REFERENCE
- Gallery page: https://magpui.com/en/i/calm-desktop-app-update-flow-619460
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/calm-desktop-app-update-flow-619460/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/calm-desktop-app-update-flow-619460/clip.mp4
- Original post: https://x.com/benjitaylor/status/2095942952694710461 by @benjitaylor
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 small centered update card for a desktop app with three states: Update available (title, subtitle, Update button), Downloading (animated mascot dots, progress bar with percentage), Ready (Restart now and Later).
DESIGN SYSTEM
- Background #F7F7F7; text centered, title 14px semibold, subtitle 12px grey.
- Progress bar 140x6, track #E5E5E5, fill #3B82F6, 3px radius.
MOTION
- State change: content crossfades with 8px vertical slide, 220ms.
- Progress fill animates smoothly between reported values (spring, no jumps).
- Mascot dots bounce in sequence, 120ms stagger.
SECTIONS
- Update available.
- Downloading.
- Ready to restart.
IMPLEMENTATION
- State machine with three states; role progressbar; buttons with clear focus.
- 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
- Progress never goes backwards.
- The card keeps the same size in all states.
- Later dismisses without losing the downloaded update.
