# Animated Video > Build animated motion design (explainer, transition reel, product intro). Uses Stage/Sprite timeline from animations.jsx for in-browser compositions or Remotion for full video/MP4 workflows. - Skill: `bluzir/animated-video` (Agent Skill) - Install (CLI): `npx skillmds@latest add bluzir/animated-video` - Raw SKILL.md: https://api.skillmd.com/api/skills/bluzir/animated-video/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Coding & Dev Tools - Author: bluzir (https://skillmd.com/u/bluzir) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/bluzir/animated-video --- # 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). **Available primitives:** | Primitive | Role | |---|---| | `` | Root composition. Owns one RAF clock, scale-to-fit canvas, scrubber UI, play/pause. Reads/writes position in localStorage. | | `` | Active only in `[start..end]`ms window. Children can be element or `(localT) => element`. Unmounts when out of range. | | `useTime({ stopAt? })` | Returns current ms. Inside Stage: reads shared clock (free). Standalone: spawns its own RAF (costlier). | | `useSprite()` | Returns local t ∈ [0,1] within the current Sprite. | | `Easing` | `linear`, `inQuad`, `outQuad`, `inOutCubic`, `outQuart`, `inOutExpo`, `spring(stiffness, damping)` | | `interpolate(t, [in], [out], { clamp?, easing? })` | Piecewise lerp. Supports numbers and hex colors. | | ``, ``, ``, ``, `` | Entry/exit sugar. **Persist after their animation window** (unlike Sprite). | | `` | Standalone one-shot wrapper (no Stage needed). | **Steps:** 1. Invoke `Skill: frontend-design` for aesthetic direction 2. Create `artifacts/.html` with React + Babel + `animations.jsx` 3. `Bash(cp starters/animations.jsx "$(dirname )/")` — copy starter next to the HTML 4. Run `/serve` (required for external `.jsx` CORS) 5. Compose the scene. Pattern: ```jsx function Scene() { const t = useTime(); // Stage-shared clock // drive properties via interpolate() const bg = interpolate(t, [0, 2000, 5000], ['#fef9f3', '#f3d8a8', '#8a5a22'], { easing: Easing.inOutCubic }); return (

Entry stays visible after 500ms

Fade + slide combo

{(local) =>

Bounded — disappears after 3500

}

); } function App() { return ; } ``` 6. `/done http://127.0.0.1:4567/artifacts/.html` — verify scrubber works, animation plays cleanly, console clean 7. For exporting frames/seeking for PPTX: external tools can send `window.postMessage({ seekMs: N, playing: false }, '*')` — Stage listens and jumps ## Path B — Remotion (MP4 export, multi-scene video) For long-form (>60s), multi-scene narrative, or MP4-export needs. 1. Delegate to `Skill: remotion-best-practices` — full Remotion workflow 2. Set up `artifacts/-remotion/` as a separate Remotion project 3. Return a preview HTML and MP4 artifact when done ## When to pick which | Need | Path | |---|---| | Single scene, any length | A | | Product intro, explainer under a minute | A | | Multi-scene narrative | B | | MP4 export required | B | | Browser-only preview (ship an HTML) | A | | Exact frame timing (e.g. 30fps video) | B (Remotion is frame-based) | | Physics / gesture-driven | A with Popmotion ` ``` and use `window.popmotion` directly. ## Verify Path A: `/done ` — scrubber reaches end, clicking bar seeks, play/pause toggles, console clean. If the user wants PPTX frames of this animation: seek via postMessage before each screenshot. Path B: Remotion preview server at `localhost:3000` + exported MP4.