This skill should be used when the user asks to "animate this diagram", "build a flowchart that reveals step by step", "animate an architecture/sequence diagram", "make a chart animate in", "grow the bars / draw the line / count up the number", "show data flowing along a connector", or "turn a stati

Diagram & Data Animation Make structure and data legible by revealing it over time — one idea per beat. Build progressive node/edge reveals, flowing connectors, and animated charts (bars grow, lines draw, numbers count up) for web or video. When to use Architecture, flow, or sequence diagrams that build step by step. Animated charts: bars grow, lines draw on, numbers count up. "How it works" walkthroughs and process explainers. Showing data or signal flowing along connectors. Core principle: progressive disclosure Never show everything at once. Reveal in this order: nodes → edges → labels . Highlight the active element and dim the rest (focus + context). Pace to comprehension, not flash — hold each step 0.5–1.5s so it lands. Keep a consistent visual grammar: color means meaning, and that mapping never changes mid piece. Quick reference Goal Mechanism Easing Node appear scale 0.8→1 + opacity, transform origin:center back.out(1.5) / easeOut Edge connect stroke dashoffset len→0 easeInOut , 0.4–0.7s Flowing data animate stroke dashoffset looping + traveling dot linear , infinite Bar grow scaleY 0→1, transform origin:bottom easeOut , stagger 0.06s Line chart path stroke dashoffset len→0 easeInOut , 0.8–1.2s Count up interpolate value with eased t easeOutCubic Highlight active full opacity, others opacity:.35 0.3s Progressive node/edge reveal (SVG + GSAP) pathLength="1" lets one dash value drive any edge length. Reveal nodes first, then draw edges between the now visible nodes. Flowing connector (marching dash + traveling dot) Traveling dot along the path ( offset path , no JS): Charts Bar grow (scaleY from the baseline): Line chart draw on (the whole series path strokes in): Count up with eased interpolation (rAF): Build tool choice Inline animated SVG + GSAP/CSS : best for bespoke diagrams and full control on the web. Framer Motion (React) : declarative reveals via variants + staggerChildren ; pairs with Visx/Recharts for charts. D3 + transitions : data bound charts; .transition().duration().attr() for grow/draw, tween for count up. Mermaid / Excalidraw : author the diagram structure fast, render to SVG, then animate the SVG. Remotion (React) : data driven, deterministic renders for video output and repeatable exports. Output checklist Reveal order is nodes → edges → labels; nothing dumps in all at once. Each step holds long enough to read (0.5–1.5s). Color grammar is consistent and meaningful. Active element highlighted, context dimmed. prefers reduced motion path shows the final composed diagram without looping motion. Deliver & verify (standalone HTML) Packaged helper ( scripts/ ): scripts/seek shot.sh anim.html 0 1.5 3 freezes the ?t=N harness and screenshots each moment; scripts/contact sheet.sh sheet.png frame .png tiles them for one glance review. See scripts/README.md . For a self contained diagram (reveal, flowing connector, animated chart) the deliverable is one HTML file that opens directly in a browser — no build step, no render pipeline. A single file is the right tier for web motion. (If the diagram is part of a rendered video, build it as a Remotion composition instead and verify via remotion still — see remotion video.) Output contract: One .html file: SVG inline; Framer Motion / D3 / anime / GSAP from CDN; the animation in one inline <script (one driver). A way to freeze an exact moment for screenshots, matched to how the diagram animates: GSAP / JS timeline: build one master tl , then ?t=N → tl.pause(); tl.seek(N) . SVG SMIL: svg.pauseAnimations(); svg.setCurrentTime(N) . CSS keyframes: drive reveal order with animationDelay ; freeze by pausing/seeking the equivalent JS timeline. Verify loop — render → freeze → screenshot → check: 1. Open the file at start / mid / end: …/diagram.html?t=0 , ?t=<dur/2 , ?t=<dur (read tl.duration() from the console). 2. Headless screenshot each frozen frame: 3. Check fidelity — the step by step reveal appears in order (nodes → edges → labels, each step present at its frame), connectors point at the right nodes, count ups land on the EXACT values — and artifacts (clipped labels, off canvas nodes, FOUC before fonts, jank at seams). Before you finish: 1. Opens standalone in a browser — no console errors, no missing CDN. 2. One driver/master timeline; the freeze ( ?t=N / setCurrentTime ) lands on a deterministic still. 3. Screenshotted at start / mid / end — reveal order correct, connectors land on the right nodes, numbers exact. 4. prefers reduced motion shows the final composed diagram without looping motion. 5. Color grammar consistent; active element highlighted, context dimmed; nothing dumps in all at once. Reference files references/diagram and chart recipes.md — fuller runnable code: staged node/edge reveal with labels, flowing dash + traveling dot connectors, bar/line/count up chart recipes, sequence diagram and architecture build patterns, and D3 / Framer Motion / Remotion implementations with easing notes.

diagram-animation