Remotion Video

Remotion Video

Creates production-grade videos using Remotion — a React framework where video is code. Every frame is a React component. Animations use spring physics and frame-based interpolation.

Reference Files

Why Remotion

Remotion treats video as a React application. Each frame is a pure function of time — given frame N and total frames F, your component renders deterministically. This means:

• 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.js 18+ is required. Check before scaffolding:

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

If Node.js is not available, inform the user — Remotion cannot run without it.

Step 1: Scaffold the Project

Run scripts/scaffold_project.sh to create a new Remotion project. The script is idempotent — it detects an existing project and skips re-initialization.

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

Determine the best approach. Read the relevant rule file for detailed patterns.

Step 3: Compose the Components

Core rules for writing Remotion 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

Remotion Studio provides hot-reload preview. Start it with:

npm run dev

Studio opens at http://localhost:3000. The timeline scrubber lets you inspect any frame.

Use <Still> component for frame-accurate screenshots during iteration.

Step 5: Iterate

Step 6: Render

Use scripts/render.sh to render the final video:

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

Quality presets

Format options

Error Handling

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

For mathematical animations, algorithm visualizations, or when Node.js is unavailable, use concept-to-video (Manim/Python) instead. Manim runs in any Python environment and excels at geometric proofs, equation animations, and LaTeX rendering.