REFERENCE
- Gallery page: https://magpui.com/en/i/animated-agent-credit-charts-ef67f5
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/animated-agent-credit-charts-ef67f5/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/animated-agent-credit-charts-ef67f5/clip.mp4
- Original post: https://x.com/PostiauxCharles/status/2112882320978104612 by @PostiauxCharles
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: Build a compact agent-credit dashboard with three stacked usage cards and an adjacent add-credits panel. Coordinate numerical totals and chart reveals.
DESIGN SYSTEM: Estimate a 760px-wide composition, two equal columns, 12px gaps, near-black #101010 background, #191919 cards, 12px radii and subtle #303030 borders. Use a neutral sans-serif, 12px labels, 28px totals and 14px panel heading. Color the upper dot-and-stem chart pink #dc70a5, middle filled line blue #699fe6 and lower bars orange #ee984a. Keep axes faint.
MOTION: On entry or replay, animate totals from zero over 900ms, draw the blue line with pathLength, grow orange bars from their baseline and fade pink dots with a 35ms stagger. Use cubic-bezier(0.22,1,0.36,1). Reveal the allocation bar left to right over 650ms. These durations are implementation targets. Keep selection transitions at 160ms.
SECTIONS: Three labeled agent cards with totals and distinct chart types; add-credits panel with brief usage summary, segmented allocation strip, three radio-card amounts, cancel action and primary confirmation. Support unselected, selected, focus and pressed states.
IMPLEMENTATION: Use SVG charts and Motion for coordinated reveals, with real radio inputs. Keep confirmation local unless the project supplies billing logic. Under reduced motion show final totals and charts immediately. Provide visible keyboard focus, text summaries for charts and accessible radio labels. Animate transforms and SVG paths rather than layout; avoid continuous loops.
ADAPT TO THE PROJECT: Reuse existing tokens, components and fonts; map estimated colors to nearby tokens. Never copy logos, brand names, photos or illustrations; use placeholders.
SUCCESS CHECK:
- Three charts reveal in coordination with their totals.
- Credit options work with keyboard and pointer.
- Reduced motion shows the completed charts without animation.
