REFERENCE
- Gallery page: https://magpui.com/en/i/folding-gradient-stat-cards-5eaaa9
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/folding-gradient-stat-cards-5eaaa9/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/folding-gradient-stat-cards-5eaaa9/clip.mp4
- Original post: https://x.com/basit_designs/status/2111783629336785222 by @basit_designs
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 horizontal carousel of tall stat cards (score 853, 82%, 93, 25...). Each card has a soft mesh gradient blob behind a big number. As cards move through the middle of a curved track they bend along a vertical fold, flatten when centered, and bend the other way as they leave, like sheets of paper on a cylinder.
DESIGN SYSTEM
- Background #EEF1F4; cards 220x300, white, radius 18px, inner mesh gradient (violet #8B5CF6, cyan #22D3EE, pink #F472B6, lime #A3E635) blurred 30px.
- Number 34px semibold, label 11px uppercase #6B7280, a small pill button at the bottom.
MOTION
- Drag or wheel scrolls the track with inertia, snapping to the nearest card (spring 300/30).
- Each card's rotateY = (distance from center) * 35deg, clamped to 70deg; a second half of the card folds with an extra 20deg (two halves, fold line in the middle).
- Gradient hue shifts 20deg as the card turns; shadow grows on the folded half.
SECTIONS
- Track, cards (two halves each), pagination dots.
- States: centered (flat, scale 1), side (folded, scale 0.9, opacity 0.8), dragging.
IMPLEMENTATION
- CSS 3D transforms driven by scroll position (Motion useScroll / useTransform); each card split into two halves with transform-origin at the fold.
- WebGL is not needed.
- 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
- The centered card is flat, the others fold more the further they are.
- Snaps to a card after a drag.
- Arrow keys move one card.
