---
name: remotion-video-composer
description: "Build React-based videos with Remotion. From prompt to rendered MP4 in one skill. Generates Remotion compositions from a script outline — slide-by-slide React components, timing curves, audio tracks, and the final render pipeline. Ships ready-to-deploy `bun run render`."
license: MIT
---

# Remotion Video Composer

Turn a script outline into a rendered MP4 without leaving React. This skill scaffolds a complete Remotion project — compositions, per-scene components, timing logic, audio tracks, and the render command — so you go from a written brief to a shareable video file in one pass. It's built for developers who already think in JSX and would rather express motion as code than drag clips around a timeline.

## When to use it

- You have a narration script or slide outline and want a programmatic explainer, product demo, or social clip.
- You need data-driven or templated videos where text, numbers, or assets change per render (via props).
- You want animations defined in code so they're diffable, reviewable, and regenerable in CI.
- You're producing many variants of the same video and need a parametrized composition instead of manual edits.

## How it works

The skill generates a standard Remotion entry (`src/Root.tsx`) that registers each `<Composition>` with an `id`, `fps`, `durationInFrames`, `width`, and `height`. Each scene becomes a React component composed with `<Sequence>` for timing offsets and `<Series>` for back-to-back slides. Motion uses `useCurrentFrame()` together with `interpolate()` and `spring()` for easing curves; transitions come from `@remotion/transitions` (`<TransitionSeries>` with presets like `fade()` and `slide()`).

Audio is wired through `<Audio>` and `<OffthreadVideo>`, with `staticFile()` for assets in `public/`. When duration depends on an audio file or fetched data, the skill uses `calculateMetadata` to set `durationInFrames` dynamically. Props are typed and validated with a Zod schema so the Remotion Studio sidebar exposes editable controls. The final pipeline ships a `bun run render` script wrapping `remotion render`.

## Usage

```bash
curl -fsSL --create-dirs -o ~/.claude/skills/remotion-video-composer/SKILL.md https://claudeskil.com/skills/remotion-video-composer/SKILL.md

# Preview live in the browser
bunx remotion studio

# Render the composition to MP4
bunx remotion render MyVideo out/video.mp4

# Override typed props at render time
bunx remotion render MyVideo out/promo.mp4 \
  --props='{"title":"Q3 Launch","accent":"#ff5c00"}'
```

A generated scene looks like:

```tsx
const frame = useCurrentFrame();
const opacity = interpolate(frame, [0, 20], [0, 1], {
  extrapolateRight: "clamp",
});
```

## Tips & gotchas

- Always clamp `interpolate` with `extrapolateLeft/Right: "clamp"` — unclamped values keep extrapolating past your range and cause flicker.
- Prefer `<OffthreadVideo>` over `<Video>` for embedded footage; it decodes frames deterministically during render and avoids dropped frames.
- Anything in `useEffect`/`setTimeout` won't reflect in the render — drive every visual from `frame`, never from wall-clock time.
- Load fonts via `@remotion/google-fonts` and await readiness, or text reflows mid-render.

## FAQ

**Do I need ffmpeg installed?** No. Remotion bundles its own ffmpeg build for encoding; you only need a Chromium-compatible environment, which Remotion downloads on first render.

**Can I render on a server or CI?** Yes — use `@remotion/renderer`'s `renderMedia()` programmatically, or `@remotion/lambda` for distributed cloud rendering.

**MP4, WebM, or transparent output?** All supported. Pass `--codec=h264` (default), `vp8`/`vp9` for WebM, or `--codec=prores --image-format=png` for an alpha channel.