Remotion

---
name: remotion
description: "Use when creating programmatic videos, animated explainers, or visual compositions with Remotion."
---

# Remotion Video Creator

Create videos using Remotion — React components rendered as video frames. Orchestrates a multi-phase pipeline from concept to verified MP4.

## Prerequisites

- **Node.js >= 18** and **npm >= 9** must be available on PATH. Verify with `node --version` and `npm --version` before starting.
- Remotion requires a Chromium-capable environment for renders; headless Chromium is bundled when you install `@remotion/cli`.

For project structure and full reference index, see [project-layout.md](references/project-layout.md).

## Quick Start

```
User: Create a 30-second explainer video about how DNS works
```

The skill runs a 5-phase pipeline: storyboard the concept, generate voiceover audio, build React scenes in parallel, evaluate quality via stills, and verify against the storyboard. Each phase gates the next.

## Pipeline

Each phase has a reference with full instructions — read it when you reach that phase.

| Phase | Name | Reference | Gate |
|-------|------|-----------|------|
| 0 (opt) | Analyze | [analyze.md](references/analyze.md) | `.storyboard.md` exists |
| 1 | Storyboard | [storyboard.md](references/storyboard.md) | User approves `docs/STORYBOARD.md` |
| 2 | Audio | [audio.md](references/audio.md) | `public/vo-beat*.mp3` + `src/timing.ts` exist |
| 3 | Build | [build.md](references/build.md) | All scenes render and pass visual inspection |
| 4 | Eval | [eval.md](references/eval.md) | All scenes score >= 7.0 |
| 5 | Verify | [verify.md](references/verify.md) | User approves `docs/VERIFICATION_REPORT.md` |

## References

- **Pipeline:** [storyboard](references/storyboard.md), [audio](references/audio.md), [build](references/build.md), [eval](references/eval.md), [verify](references/verify.md)
- **Design:** [design system](references/design-system.md), [color script](references/color-script-rules.md), [motion rules](references/motion-design-rules.md), [backgrounds](references/backgrounds.md), [diagrams](references/diagrams.md)
- **Components:** [core](references/components.md), [extended](references/components-extended.md), [TerminalScene](references/components-terminal-scene.md) (real CLI recordings), [terminal_recording scene type](references/terminal-recording-scene-type.md) (storyboard ↔ recorder integration), [scene templates](references/scene-templates.md), [patterns](references/patterns.md)
- **Animation:** [vocabulary](references/animation-vocabulary.md), [hooks](references/animation-hooks.md), [transitions](references/transition-catalog.md), [audio sync](references/audio-sync-patterns.md)
- **Content:** [audio/voiceover](references/audio-voiceover.md), [narrative](references/narrative-structures.md), [marketing](references/marketing-concepts.md), [visualization](references/visualization-reasoning.md)
- **Templates:** [beat sheet](references/beat-sheet-template.md), [storyboard](references/visual-storyboard-template.md), [timing](references/timing-manifest-template.md), [verification](references/verification-template.md), [CLAUDE.md](references/claude-md-template.md)
- **Other:** [project layout](references/project-layout.md), [error recovery](references/error-recovery.md), [analyze](references/analyze.md), [output format](references/output-format.md)