REFERENCE
- Gallery page: https://magpui.com/en/i/cards-that-expand-with-a-blur-7ac38a
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/cards-that-expand-with-a-blur-7ac38a/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/cards-that-expand-with-a-blur-7ac38a/clip.mp4
- Original post: https://x.com/wheresryan22/status/2100473433897222224 by @wheresryan22
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 family of components that morph from a compact pill (Track my flight) into an expanded card (flight tracker, confirmation, booking). During the morph the pill label blurs out and the card content blurs in.
DESIGN SYSTEM
- Background #EBEBEB, pill black #111 with white 13px label, 18px radius; card white 24px radius, shadow 0 20px 50px rgba(0,0,0,.12).
MOTION
- Container morphs with a shared layout transition, spring (stiffness 300, damping 30).
- Outgoing content: filter blur 0 to 8px and opacity to 0 in 150ms; incoming: blur 8px to 0, opacity to 1, 200ms, delayed 80ms.
- Collapse reverses.
SECTIONS
- Pill state.
- Expanded card variants.
IMPLEMENTATION
- Framer Motion layout + AnimatePresence mode popLayout; keep text from scaling (animate container size, not scale).
- prefers-reduced-motion: skip the animation and show the end state.
ADAPT TO THE PROJECT
- Reuse the project's existing tokens, components and fonts; map colors to the closest existing tokens.
- Do not copy logos, brand names, characters or artwork from the reference. Use neutral placeholders.
SUCCESS CHECK
- Text never looks stretched during the morph.
- Focus moves into the card when expanded.
- Escape collapses it.
