REFERENCE
- Gallery page: https://magpui.com/en/i/stacked-cards-that-fan-on-hover-c4f32d
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/stacked-cards-that-fan-on-hover-c4f32d/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/stacked-cards-that-fan-on-hover-c4f32d/clip.mp4
- Original post: https://21st.dev/@chetanverma16/components/stacked-cards-interaction by Chetan Verma
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 stack of three image cards (photo on top, title and short text below). Only the front card is fully visible; on hover the two behind slide out left and right, rotating a few degrees, and on click the front card cycles to the back.
DESIGN SYSTEM
- White background; cards 220x260, white, radius 12px, 1px #EEE border, shadow 0 10px 30px rgba(0,0,0,.08).
- Image radius 8px inside 10px padding; title 12px medium, text 11px #777.
MOTION
- Hover: back cards translateX ±60px, rotate ∓6deg, spring (260/22); front card lifts 4px.
- Click: front card moves to the back (z-index swap at the midpoint, scale 0.95 then 1), 400ms.
- Leave: cards return to the stack.
SECTIONS
- Three cards with image, title, text.
- States: stacked, fanned, cycling.
IMPLEMENTATION
- Motion with variants; cards absolutely positioned in one container, order kept in state.
- prefers-reduced-motion: swap the motion for a 150ms opacity change.
- Keyboard: every control focusable with a visible focus ring; same actions with Enter/Space and arrow keys where it makes sense.
- Animate only transform, opacity and filter.
ADAPT TO THE PROJECT
Reuse the project's existing design tokens, components and fonts; map colors to the closest existing tokens. Never copy logos, brand names, photos or illustrations from the original: use placeholders.
SUCCESS CHECK
- Hover fans the cards out and leave restacks them.
- Click brings the next card to the front.
- Works with keyboard (Enter cycles).
