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

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:

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.