# remotion-video-creation

> A Claude Code skill from Affaan M's everything-claude-code repo that bundles 29 domain-specific Remotion rule files behind a single dispatcher — 3D (Three.js / R3F), animations, audio, captions, charts, transitions, Lottie, Tailwind, sequencing, trimming — read only the rules that match the React video task at hand.

**Use case**: Pick the right Remotion rule file for the task instead of dumping the whole Remotion docs into context

**Canonical URL**: https://agentcookbooks.com/skills/remotion-video-creation/

**Topics**: claude-code, skills, content

**Trigger phrases**: "build a Remotion composition with captions", "Remotion 3D scene with React Three Fiber", "TikTok-style word-highlight captions in Remotion"

**Source**: [Affaan M](https://github.com/affaan-m/everything-claude-code/tree/main/skills/remotion-video-creation)

**License**: MIT

---

## What it does

`remotion-video-creation` is the React-video skill in [Affaan M's everything-claude-code](https://github.com/affaan-m/everything-claude-code) — see [skills/remotion-video-creation](https://github.com/affaan-m/everything-claude-code/tree/main/skills/remotion-video-creation). It's a dispatcher over 29 individual rule files covering the parts of Remotion that change shape per task: how to do 3D with Three.js and React Three Fiber, animation primitives (interpolation, springs, easing), audio import / trim / volume / pitch, importing `.srt` captions vs. TikTok-style page captions with word highlighting, charts, transitions, Lottie embedding, sequencing, trimming, and timing.

The pattern is the same as MiniMax-AI's `shader-dev`: routing-first, lazy-read. Rather than load the whole Remotion knowledge base into context, the skill reads only the rule files that match the user's request — `rules/captions.md` and `rules/display-captions.md` for a captioned video, `rules/3d.md` for a Three.js shot, `rules/timing.md` and `rules/sequencing.md` for the choreography.

Each rule covers one concern with code examples and the relevant `@remotion/*` package imports (`@remotion/captions`, `@remotion/three`, `@remotion/lottie`, etc.). Mediabunny-backed helpers (`can-decode`, `get-audio-duration`, `get-video-duration`, `get-video-dimensions`, `extract-frames`) are isolated into their own rule files since they cover the metadata-extraction concerns Remotion punts to the browser.

## When to use it

- Building a React-based programmatic video — Remotion's strength is JSX/React for composition, not standalone CLI rendering
- Captioned video where you want either `.srt` import or TikTok-style per-word highlighting
- 3D scene composed in React Three Fiber that needs to render at video framerates
- Chart-driven explainer where the chart is the visual primitive
- Audio-heavy composition that needs trimming, volume curves, or speed/pitch control

When *not* to reach for it:

- Mathematical-animation explainers (graphs, geometric proofs, state-machine diagrams) — that's `manim-video`
- Real-time interactive video — Remotion is for rendered output, not live playback
- Quick social-media cuts that don't need React composition — heavier toolchain than the use case warrants

## Install

From [affaan-m/everything-claude-code](https://github.com/affaan-m/everything-claude-code) at `skills/remotion-video-creation/`. Drop the folder into `~/.claude/skills/remotion-video-creation/`. The runtime needs a Remotion project scaffolded (`npm create remotion-app@latest` produces the entry point) plus React 18+, Node 22+, and any of the `@remotion/*` companion packages the chosen rule file calls for (captions / three / lottie / paths). Different toolchain from `manim-video` — Manim is Python CLI + ffmpeg, Remotion is React + Node + bundled rendering.

## What a session looks like

1. **State the composition goal.** "I want a 30-second explainer with a 3D rotating product shot, voiceover, and TikTok-style captions that highlight word-by-word."
2. **Skill picks rule files.** Routes to `rules/3d.md`, `rules/audio.md`, `rules/transcribe-captions.md`, `rules/display-captions.md`, `rules/timing.md`. Reads only those.
3. **Scaffold the composition.** Sets the duration, dimensions, and FPS via `calculate-metadata.md` patterns so the composition props drive everything else.
4. **Wire the audio + captions.** Pulls `get-audio-duration` from Mediabunny so the composition length matches the voiceover; transcription rule generates the caption JSON.
5. **Compose the 3D shot.** R3F rule covers the canvas, camera, lighting. Sequencing rule decides when the 3D shot enters and exits.
6. **Render and iterate.** Single render, inspect, adjust timing curves via `rules/timing.md` (interpolation vs. spring presets), re-render.

The discipline that makes it work: rule-file boundary. Each Remotion concern (audio, captions, 3D, transitions) is self-contained — the skill enforces reading only what the task needs rather than loading 29 files of context for a 3-file task.

## Receipts

_TODO — to be filled in from a real session. Once the skill has been used to produce a real Remotion composition, this section will capture: which rule files the dispatcher actually picked vs. what the composition turned out to need, whether the TikTok-style caption renderer matched the voiceover timing on first try or needed `get-audio-duration` correction, the per-frame render cost for the chosen resolution/FPS, and any `@remotion/*` package version pin that broke after a `npm install` (R3F integration is the usual breakage seam)._

## Source and attribution

From [Affaan M's everything-claude-code](https://github.com/affaan-m/everything-claude-code/tree/main/skills/remotion-video-creation) — an MIT-licensed skill collection covering harness construction, agent ops, video, payments, and platform-specific patterns.

License: MIT.