REFERENCE
- Gallery page: https://magpui.com/en/i/animated-task-status-icons-4111da
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/animated-task-status-icons-4111da/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/animated-task-status-icons-4111da/clip.mp4
- Original post: https://x.com/thisuxhq/status/2109622635068109107 by @thisuxhq
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 set of status icons for tasks drawn as one rounded square that morphs between states: empty outline, partially filled (progress), complete (check), error (cross), blocked (bar).
DESIGN SYSTEM
- Icon 20px, 2px stroke, 6px radius.
- Colors: empty #A3A3A3, partial #F97316, complete #22C55E, error #EF4444, blocked #8B5CF6.
MOTION
- Partial: inner fill grows as a pie or half fill, 300ms ease-out.
- Complete: fill floods, then the check draws with stroke-dashoffset 220ms.
- Error: quick 2-step shake (translateX ±2px, 160ms) while the cross draws.
- Color always transitions 200ms.
SECTIONS
- StatusIcon component with a status prop.
- A demo row cycling through all states.
IMPLEMENTATION
- Single SVG with animated paths; aria-label with the state name.
- 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
- Each state is readable in grayscale (shape differs, not only color).
- Switching states mid-animation never glitches.
- Icon stays crisp at 16px.
