web-animation-enginelisted

# Web Animation Engine A tiny bundled runtime for composing time-driven web animations: multi-scene explainers, animated heroes, motion graphics, diagrammatic videos. Code-only — no image editor, no MP4 export, just runnable HTML. ## When to use this skill Use it when the user wants to **build** animated content: - "animate this hero section" - "make a motion graphic explaining X" - "bring this SVG diagram to life" - "animated explainer for our pitch deck" - "scrubable timeline showing the data reveal" Do NOT use it for: - Polishing motion on an existing UI (button hovers, modal slide-ins, page-load staggers) → that's UI-micro-interaction territory; use `/frontend-design` for the visual layer or a UI animation skill if installed. - Producing video files (MP4/GIF) → this engine outputs runnable HTML, not exports. - Static design (typography, color, layout) → defer to `/frontend-design`. ## Two-step rule: script first, code second Never start with code. Time-driven animation falls apart without a script. Always: 1. **Write the beats.** Three to six sentences describing what happens, in order, with rough seconds. *"0–3s: two distant nodes appear. 3–6s: a loop forms between them. 6–10s: the loop replicates across a network. 10–15s: punchline."* This is the entire script for a 15-second piece. 2. **Build the scenes.** One `<Sprite start={x} end={y}>` per beat. Inside each Sprite, compose SVG/HTML that reads the beat's progress and animates accordingly. If the user gave y