Animated Video

Two paths depending on complexity. Decide first, tell the user which path you're taking.

Phase 0 — Context pre-flight (auto-detect, ONE question max)

Before deciding Path A vs B, silently check for context:

1. Read .claude/design-tokens.json if exists
2. Bash(ls ~/.claude/design-systems/ 2>/dev/null) — brand folder match
3. Glob codebase tokens
4. Scan brief for github / Figma / image / PRD attachment → dispatch ingestion skills

If nothing — ONE AskUserQuestion: design system / codebase / screenshot / Figma / none / decide. Report "Using . Proceeding."

Path A — Standalone HTML with Stage/Sprite

For any animation that can live in one HTML file (explainer reel, product intro, transition sequences, hero animations — <60s typical).

Uses the Remotion-compatible in-browser engine in starters/animations.jsx. Same mental model as Remotion — different runtime (no build step, runs under Babel standalone).