REFERENCE
- Gallery page: https://magpui.com/en/i/agent-card-that-falls-asleep-412f8c
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/agent-card-that-falls-asleep-412f8c/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/agent-card-that-falls-asleep-412f8c/clip.mp4
- Original post: https://x.com/MichaelFilipiuk/status/2110749049049796915 by @MichaelFilipiuk
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
An agent settings card with a mascot, a name, a one-line description and an Active toggle. Turning it off puts the mascot to sleep (grey, closed eyes, floating Zs); turning it on wakes it with a bounce.
DESIGN SYSTEM
- Card 240px wide, white, 20px radius, shadow 0 20px 40px rgba(0,0,0,.08), on #F2F2F2.
- Mascot 64px: active is a blue #3B82F6 rounded hexagon with open eyes; asleep is #BDBDBD with closed-eye lines.
- Title 15px semibold, description 12px grey, small toggle.
MOTION
- Sleep: color crossfades 400ms, eyes morph from dots to lines (scaleY), mascot sinks 4px; Zs rise from the top right in a loop (translate 0 to -18px, fade, 1.8s, 600ms stagger).
- Wake: Zs stop, mascot pops up 8px with spring (stiffness 500, damping 15), eyes open with a quick double blink.
SECTIONS
- Mascot.
- Name and description.
- Toggle row.
IMPLEMENTATION
- Framer Motion; switch semantics on the toggle (role switch, aria-checked).
- 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
- State is never ambiguous: grey means off.
- Zs loop only while asleep.
- Toggle works with Space and Enter.
