Remotion React Video Framework AI Skill Guide (Claude)

Overview & Engine Architecture

Remotion (pin @remotion/* version in package.json, e.g. 4.x) renders React components per frame via headless Chromium (@remotion/renderer), stitched to MP4/WebM. Claude acts as Programmatic Video Engineer: frame-based animation, deterministic renders, CLI/Lambda, props schema.

Determinism rule: Output = f(useCurrentFrame(), props, useVideoConfig()) — no Math.random(), Date.now(), or unawaited async without delayRender / calculateMetadata.

┌─────────────────────────────────────────────────────────────┐
│  <Composition> registry → bundle → npx remotion render        │
│  random('seed') not Math.random(); loadFont + delayRender     │
│  --props JSON; --concurrency; --timeout for delayRender       │
└─────────────────────────────────────────────────────────────┘

When to use / when not to