Remotion Video

Reference Files

references/rules/fundamentals.md

references/rules/animations.md

references/rules/compositions.md

references/rules/media.md

references/rules/text-and-fonts.md

references/rules/tailwind.md

references/rules/audio.md

references/rules/subtitles.md

references/rules/three-d.md

references/rules/charts.md

references/rules/rendering.md

references/rules/data-driven.md

references/templates/explainer.tsx

references/templates/product-demo.tsx

references/templates/data-viz.tsx

scripts/scaffold_project.sh

scripts/render.sh

Why Remotion

• Component composition: Nest scenes, reuse components, apply CSS.
• Spring physics:

  spring()

  gives natural motion without hand-tweaking cubic beziers.
• Asset pipeline: Import images, audio, video — the same way you import in React.
• Iterative workflow: Edit code → hot-reload preview → render final. The

  .tsx

  file IS the editable intermediate.
• Data-driven at scale: Render thousands of personalized videos by passing different props to the same composition.

Workflow

Scaffold → Compose → Preview → Iterate → Render

1. Scaffold the project (once per video project)
2. Interpret the user's concept — choose the right template and rule files
3. Compose React components for each scene
4. Preview in Remotion Studio (

   npm run dev

   )
5. Iterate based on user feedback
6. Render final video via

   scripts/render.sh

Step 0: Ensure Dependencies

node --version   # Must be >= 18.0.0
npm --version

Step 1: Scaffold the Project

scripts/scaffold_project.sh

bash scripts/scaffold_project.sh my-video-project
cd my-video-project
npm run dev   # Opens Remotion Studio at localhost:3000

Step 2: Interpret the Concept

Step 3: Compose the Components

• One composition per video:

  registerRoot

  points to one root composition.
• Sequences for timing: Use

  <Sequence from={30} durationInFrames={60}>

  to place scenes at specific frames.
• AbsoluteFill for layering: Use

  <AbsoluteFill>

  as the base for any full-screen element.
• Frame-based math only: Derive all animation state from

  useCurrentFrame()

  . Never use

  Date.now()

  or

  setTimeout

  .
• Spring over easing: Prefer

  spring({ frame, fps })

  for natural motion.
• Props for everything variable: Hardcoded values → props. This enables data-driven rendering.

Component structure pattern

import {
  useCurrentFrame,
  useVideoConfig,
  interpolate,
  spring,
  AbsoluteFill,
  Sequence,
} from "remotion";

type MySceneProps = {
  title: string;
  accentColor: string;
};

export const MyScene: React.FC<MySceneProps> = ({ title, accentColor }) => {
  const frame = useCurrentFrame();
  const { fps, durationInFrames } = useVideoConfig();

  const opacity = interpolate(frame, [0, 30], [0, 1], {
    extrapolateRight: "clamp",
  });
  const scale = spring({ frame, fps, config: { damping: 12, stiffness: 100 } });

  return (
    <AbsoluteFill style={{ backgroundColor: "#0a0a0a" }}>
      <div
        style={{ opacity, transform: `scale(${scale})`, color: accentColor }}
      >
        {title}
      </div>
    </AbsoluteFill>
  );
};

Step 4: Preview

npm run dev

http://localhost:3000

<Still>

Step 5: Iterate

durationInFrames

<Sequence>

<Sequence>

from

@remotion/google-fonts

fontFamily

<Audio src={staticFile('audio.mp3')} />

durationInFrames

Step 6: Render

scripts/render.sh

bash scripts/render.sh --composition MyComposition --quality final --format mp4

Quality presets

preview

draft

final

4k

Format options

mp4

webm

gif

Error Handling

node: command not found

Cannot find module 'remotion'

npm install

Composition not found

registerRoot

<Composition id=

delayRender timed out

delayRender('reason', { timeoutInMilliseconds: 60000 })

OffthreadVideo failed

ENOMEM

--concurrency

Port 3000 already in use

--port 3001

{ extrapolateRight: 'clamp' }

interpolate

@remotion/google-fonts

delayRender

Limitations

• Node.js required — Remotion is a Node.js framework. Cannot run in Python-only or headless container environments.
• Chromium dependency — Remotion renders via Chromium. The

  npx remotion render

  command downloads it automatically, but it requires ~300MB disk space.
• No server-side Lambda in v1 — Cloud rendering via

  @remotion/lambda

  is deferred to a future skill version. Local rendering only.
• Large renders are slow — A 60-second 1080p video at 30fps = 1800 frames rendered through Chromium. Plan for 10-30 minutes on a typical laptop.
• GIF size — GIFs at full resolution are large. Limit to 480p and <10 seconds for embeddable GIFs.
• Audio in preview — Remotion Studio supports audio playback in preview. Rendered audio requires ffmpeg.

Design Principles

• Frame-based thinking: Every visual state is a function of the current frame number. No timers, no intervals.
• Composition-first: Split video into logical

  <Sequence>

  blocks. Each scene is its own component.
• Spring over easing:

  spring()

  gives physically accurate motion. Only use

  interpolate

  with easing when spring doesn't fit.
• Props for content: Never hardcode strings, colors, or data inside components. Pass via props to enable reuse.
• Type everything: All composition props have TypeScript types enforced via

  z.infer<typeof schema>

  (Zod) or explicit interfaces.

Cross-Reference

concept-to-video