Back to Pack GalleryMotion Pack 04 · Choice
Card selection
After selecting a layout, its boundary, checkmark, and selection summary express the result together.
Layout directionSelected: Quiet
3Select a layout direction
Build a three-option card selector: clicking a card moves selection to it, reveals a checkmark, and updates the current-choice summary. Use travel only to communicate focus while keeping layout stable.
Motion rules
Boundary, checkmark, and summary show the active direction together.
Reduced motion
Update the selection boundary and check directly without travel.
Implementation
Copy HTML, CSS, and the JavaScript required for behavior together.