How to Generate Videos with Remotion and Claude Code

"Making videos with code" sounds intimidating, but combining Remotion with Claude Code lets you generate videos from natural language prompts alone.

This article walks through the entire workflow — setting up Remotion, installing Agent Skills, generating a video with Claude Code, and rendering the output. We assume Remotion v4.0 (Node.js 16+ required, 20 LTS recommended).

What Is Remotion — A React Framework for Programmatic Video

Remotion is a framework for creating videos using React components. It is fundamentally different from timeline editors like Premiere Pro or DaVinci Resolve.

In traditional video editing, you arrange clips on a timeline and apply effects through a GUI. In Remotion, you write code that describes what a React component renders for each frame number. In other words, a video becomes a function of time.

import { AbsoluteFill, useCurrentFrame } from "remotion";

export const MyVideo = () => {
  const frame = useCurrentFrame();
  const opacity = Math.min(1, frame / 30);

  return (
    <AbsoluteFill
      style={{
        justifyContent: "center",
        alignItems: "center",
        backgroundColor: "#0a0a0a",
      }}
    >
      <h1 style={{ fontSize: 80, opacity, color: "white" }}>Hello, Remotion!</h1>
    </AbsoluteFill>
  );
};

useCurrentFrame() returns the current frame number. The code above fades in the text over the first 30 frames (1 second at 30fps). That alone is a video. Here is what it looks like when rendered.

Remotion's key advantages include:

• Reproducibility — Code produces the same output from the same input. You can manage everything with design tokens and variables
• Automation — Dynamically inject data from APIs or databases into videos
• AI integration — Being code-based, Remotion pairs naturally with AI agents. The Remotion team officially recommends Claude Code integration

Setting Up — From Project Creation to Studio Preview

Make sure you have Node.js 16+ installed (20 LTS recommended), then create a new project.

npx create-video@latest

You will be asked a few questions during setup. Choose the following:

• Template → Blank (so Claude Code builds everything from scratch)
• TailwindCSS → Yes (makes styling easier)
• Agent Skills → Yes (needed for AI agent integration)

Once the project is generated, install dependencies and start the Studio.

cd my-video
npm install
npm start

Your browser opens http://localhost:3000 showing Remotion Studio. The Studio lets you preview compositions, configure Input Props, and trigger renders.

At this point, the Blank template shows an empty canvas. Now it is time to let Claude Code build the actual content.

Installing Agent Skills

Agent Skills is a collection of rule files for AI agents provided by the Remotion team. These rules help AI agents like Claude Code, Cursor, and Codex write code that follows Remotion best practices.

If you chose Yes during create-video, Skills are already installed. To add them later, run:

npx skills add remotion-dev/skills

Installing Agent Skills places rule files (.md) in your project. Claude Code reads these files and generates code that conforms to Remotion conventions.

Here are the main skill categories.

Generating a Video with Claude Code

With Remotion Studio running, open a separate terminal in the project directory and start Claude Code.

claude

Now just send a prompt. Start with something simple.

Create a 5-second video with a dark background.
White "Hello World" text at 80px fades in over 1 second in the center.

Claude Code edits the source files and registers a composition. When the changes are saved, the Remotion Studio preview hot-reloads instantly.

Check the preview and send follow-up instructions to refine the video.

Change the text color to #00FF88.
After the fade-in, wait 0.5 seconds, then add a fade-out
where the text slides upward.

Prompting Tips

To get the best results from Claude Code with Remotion, keep these points in mind.

• Use specific numbers — Say "80px" instead of "large font", and "fade in over 1 second" instead of "slow fade"
• State the video specs first — Declare resolution (1920x1080), FPS (30), and total duration (in seconds) upfront
• Build incrementally — Start with the basic layout, then add animations, then tweak colors and fonts. Iterating produces more accurate results than trying to get everything in one prompt
• Use Sequence boundaries — Instructions like "0-2 seconds is the intro, 3-5 seconds is the main content" help Claude Code generate well-structured code with proper Sequence components

Hands-On — Building a Tech YouTube Intro

Let us build something more practical: a 5-second opening animation for a tech YouTube channel, created entirely through conversation with Claude Code.

Start by giving Claude Code the full specification.

Create a 1920x1080, 30fps, 5-second YouTube opening video.

Structure:
- 0-1s: A terminal-green (#00FF88) grid fades in against a dark background
- 1-3s: Channel name "Studio Mitsu" appears in the center with a typewriter effect
- 3-4s: Subtitle "Tech & Code" fades in below the channel name
- 4-5s: Everything fades out

Background: #0a0a0a, text color: #00FF88.
Use a monospace font (Fira Code).

Claude Code creates multiple components and wires them together with Sequence for timeline control. The generated code structure looks roughly like this.

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

const Grid = () => {
  const frame = useCurrentFrame();
  const opacity = Math.min(1, frame / 30);
  // Grid animation
  return (
    <AbsoluteFill style={{ opacity }}>
      {/* Grid line rendering */}
    </AbsoluteFill>
  );
};

const TypewriterText = ({ text }: { text: string }) => {
  const frame = useCurrentFrame();
  const charsToShow = Math.floor(frame / 3);
  return (
    <span style={{ fontFamily: "Fira Code", color: "#00FF88", fontSize: 72 }}>
      {text.slice(0, charsToShow)}
      <span style={{ opacity: frame % 20 < 10 ? 1 : 0 }}>_</span>
    </span>
  );
};

export const Opener = () => {
  const { fps } = useVideoConfig();

  return (
    <AbsoluteFill style={{ backgroundColor: "#0a0a0a" }}>
      <Sequence durationInFrames={fps * 5}>
        <Grid />
      </Sequence>
      <Sequence from={fps * 1} durationInFrames={fps * 2}>
        <TypewriterText text="Studio Mitsu" />
      </Sequence>
      <Sequence from={fps * 3} durationInFrames={fps * 1}>
        {/* Subtitle fade-in */}
      </Sequence>
      {/* Fade-out */}
    </AbsoluteFill>
  );
};

Here is the video generated from this prompt.

The actual code Claude Code generates will be more complete, but the core pattern is the same. Sequence controls timing through from and durationInFrames, while useCurrentFrame() drives frame-level animations.

Check the Studio preview and adjust font sizes, easing curves, and colors with follow-up prompts. This rapid cycle of "prompt → preview → adjust" is where the Remotion + Claude Code combination really shines.

Rendering and Exporting Your Video

Once the preview looks right, export it as a video file.

npx remotion render MyComposition out/video.mp4

Replace MyComposition with the id you used when registering the Composition. If you omit the output path, it saves to the out/ folder with a default name.

Key Options

# Specify codec (default is h264 = MP4)
npx remotion render MyComposition out/video.webm --codec=vp9

# Adjust quality (CRF: lower = higher quality, larger file)
npx remotion render MyComposition out/video.mp4 --crf=18

# Render a specific frame range (useful for testing)
npx remotion render MyComposition out/test.mp4 --frames=0-90

Rendering uses your local CPU. A 5-second video typically finishes in a few seconds to under a minute.

For longer videos or batch rendering, Remotion Lambda runs renders in parallel on AWS. A 1-minute video costs roughly $0.017, and a 10-minute HD video about $0.10. However, for personal use, local rendering is more than sufficient.

Wrapping Up

This article covered the workflow for generating videos with Remotion and Claude Code — without writing a single line of code by hand.

• Remotion — A framework for programmatic video with React. Free for teams of 3 or fewer (Creators $25/seat/month for larger teams)
• Agent Skills — Rule files for AI agents. Install with npx skills add remotion-dev/skills
• Claude Code — Generates and modifies Remotion code from prompts. Changes reflect instantly in the Studio preview
• Rendering — Export to MP4, WebM, and more with npx remotion render

The "prompt → preview → adjust → render" cycle offers a speed that traditional video editing cannot match. It is especially powerful for templated videos like intros, data visualizations, and short-form social media content.

Start by running npx create-video@latest, then tell Claude Code to "make a 5-second animated video" and see what happens.