REFERENCE
- Gallery page: https://magpui.com/en/i/agent-task-list-with-folding-subagents-9cecbf
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/agent-task-list-with-folding-subagents-9cecbf/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/agent-task-list-with-folding-subagents-9cecbf/clip.mp4
- Original post: https://x.com/n___vc/status/2115869056582795401 by @n___vc
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 dark card that shows an AI agent working through a task list with subagents. Rows: "Collect fee data", "Compare validators", "Draft the report", "Check every number", and a final "Send to team" with a small orange "Asks first" tag. Pending rows have a hollow gray ring and dim text. The active row's ring becomes an orange spinning partial ring, its text brightens and a right-aligned timer counts up (0s, 1s, 2s). Beneath it, indented subagent lines appear one by one with a small orange dot ("Querying fee endpoints", then "Queried 6 endpoints", "Normalizing rates"); finished subagent lines turn gray. When the step completes, the subagent lines fold up, the ring becomes a filled blue check and a thin connector line links it to the next row, which becomes active. It should feel calm, legible and trustworthy, like watching a careful agent.
DESIGN SYSTEM: Page #161616. Card 300px wide, padding 12px 14px, radius 10px, fill #1E1E1E, border 1px #2A2A2A. Row height 22px, 12px text; active #EDEDED, pending #5C5C5C, done #9A9A9A. Rings 12px, 1.5px stroke; active #F08A24, done fill #3B82F6 with white check. Subagent lines 11px, indent 18px, dot 4px #F08A24. Timer 11px tabular numerals #7A7A7A. Tag "Asks first": #3A2614 bg, #F2A65A text, 10px, radius 4px. Connector 1.5px #3B82F6.
MOTION: Active ring spin 900ms linear. Subagent line enter: height 0 to auto plus opacity 0 to 1 and x -4 to 0, 220ms, 350ms apart. Fold: height to 0 and opacity 0 over 260ms with ease-out once the step completes. Check: scale 0.6 to 1 with a soft spring, connector draws via scaleY 0 to 1 in 200ms. Timer ticks every second with a subtle number roll.
SECTIONS: Card; step rows; nested subagent list per step; footer action row with tag.
IMPLEMENTATION: React plus Motion with AnimatePresence and layout animations so rows reflow smoothly. Drive it from a typed event stream (step started, subagent started or finished, step done) so it can be connected to a real agent run; include a mock script for the demo. Use aria-live="polite" to announce step changes. prefers-reduced-motion: no spin or fold animations, instant state swaps.
ADAPT TO THE PROJECT: Map colors to the project's status tokens and use its own step names and approval states.
SUCCESS CHECK:
- Only one step is active at a time, with a running timer.
- Subagent lines appear under the active step and fold away when it finishes.
- The final step shows the Asks first tag and waits instead of auto completing.
