REFERENCE
- Gallery page: https://magpui.com/en/i/depth-flag-coin-carousel-f3a205
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/depth-flag-coin-carousel-f3a205/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/depth-flag-coin-carousel-f3a205/clip.mp4
- Original post: https://x.com/0xUrvish/status/2111837715549610398 by @0xUrvish
Before building, download the first frame and look at it. If ffmpeg is available, download the clip and extract frames (ffmpeg -i clip.mp4 -vf fps=2 frame-%02d.png), then study the motion frame by frame. Match what you see; the text below describes it, the frames are the truth.
BUILD: A country or currency picker shown as a ring of round flag badges orbiting on a flat elliptical track. The front three badges are large and sharp; badges moving around the back shrink, slide behind and blur out like depth of field. Dragging or clicking rotates the ring and the front-center badge is the selection. It should feel tactile, like coins on a turntable.
DESIGN SYSTEM: Stage background off-white #F4F4F4 with a soft radial highlight #FFFFFF in the center. Track: ellipse about 420px wide by 120px tall (radii 210 x 60). Badge: circle 110px at the front, flag artwork clipped to a circle, a subtle inner highlight (radial white 0 to 20% at top-left) and shadow 0 10px 24px rgba(0,0,0,0.18). 8 badges evenly spaced. No labels on the badges; the selected country name sits below in 14px medium sans-serif #1A1A1A.
MOTION: Each badge's angle t on the ellipse drives: x = cos(t) * 210, y = sin(t) * 60, scale from 0.55 at the back to 1.0 at the front, blur from 6px at the back to 0 at the front, opacity 0.6 at the back to 1 at the front, z-index from depth. A slight tilt: rotateY up to 25deg toward the direction of travel. Click a badge: the ring rotates so it reaches front-center, spring stiffness 220, damping 26, mass 1 (about 600ms with a tiny settle). Drag horizontally: angle follows the pointer at 1deg per 2px, release keeps the velocity and snaps to the nearest slot with the same spring. Idle: optional slow auto-rotate 6deg/s, stops on hover. Hover on a front badge: scale +4%, 150ms cubic-bezier(0.2, 0, 0, 1).
SECTIONS: Parts: stage, elliptical track (invisible), 8 badges, selected label. States: idle (auto-rotate or still), hover (front badge lifts), dragging (ring follows pointer), settling (spring to slot), selected (front-center badge, label updates).
IMPLEMENTATION: Motion (Framer Motion) with one motion value for ring rotation and useTransform per badge for x, y, scale, blur filter and zIndex; CSS transforms only, blur applied only to badges behind center. prefers-reduced-motion: no auto-rotate, selection jumps with a 150ms crossfade, no blur. Keyboard: role="listbox" with each badge as role="option", ArrowLeft/ArrowRight rotate one slot, Enter confirms, 2px focus ring #1A1A1A offset 3px on the front badge; aria-label with the country name on each. Performance: 8-12 badges max, will-change: transform on badges.
ADAPT TO THE PROJECT: Reuse the project's existing tokens, fonts and selection patterns; map the neutrals to the closest existing tokens. Use an open flag icon set or simple SVG flags; do not copy any branding or artwork from the original.
SUCCESS CHECK:
- Badges at the back are visibly smaller, blurred and behind the front ones, with correct stacking during rotation.
- A fast drag release keeps spinning briefly and always lands with one badge exactly at front-center.
- Arrow keys rotate the ring and screen readers announce the selected country.
