Remotion + Claude Code: Make Videos with AI

So you've been vibe coding UIs, and now you're wondering: can I make videos the same way?

Short answer: yes. And it's kind of wild.

Remotion Skills dropped in January 2026, and it's basically turned Claude Code into a video production studio. You describe what you want in plain English, and it writes the React code that generates actual video files. Motion graphics, product demos, social clips—all from prompts.

I've spent the past week testing this thing. Some prompts worked beautifully. Others... let's just say I learned what doesn't work the hard way.

Here's everything you need to know to go from zero to rendering your first video.

Key Takeaways:

• Remotion Skills lets you create programmatic videos using Claude Code and natural language prompts
• Setup takes about 5 minutes—you need Claude Code CLI and one npx command
• Video prompts are different from UI prompts—specificity about timing and motion matters more than layout

In This Article

• What Is Remotion Skills?
• Prerequisites
• 5-Minute Setup
• Your First Video
• 10+ Copy-Paste Prompts
• Tips for Better Prompts
• Common Mistakes
• Rendering & Exporting
• FAQ

What Is Remotion Skills (And Why Should You Care)?

Remotion has been around for a while—it's a React framework for creating videos programmatically. Instead of dragging clips around in Premiere, you write code that describes your video. Think of it as React components, but the output is an MP4 instead of a webpage.

The problem? Writing Remotion code from scratch takes time. You need to understand the composition model, timing, interpolation functions, spring animations...

That's where Remotion Skills comes in.

It's a plugin (technically called a "skill") for Claude Code that gives the AI everything it needs to write Remotion code properly. When you install it, Claude suddenly understands:

• How Remotion compositions work
• Timing and frame calculations
• The animation interpolation system
• Best practices for video rendering

The result? You describe a video in plain English, and Claude writes the code that generates it.

Here's why this matters: your vibe coding skills now transfer to video production.

If you've been building UIs with AI prompts, you already know how to describe what you want. The mental model is similar—you're just describing motion instead of layout.

Prerequisites: What You Need

Before we dive in, here's what you need:

Requirement	Why You Need It
Node.js 18+	Remotion runs on Node
Claude Code CLI	The AI that writes your video code
Anthropic API key	Claude needs authentication
Basic terminal skills	You'll run commands

Don't have Claude Code yet? It's Anthropic's CLI tool for AI-assisted coding. If you've been using Cursor or Copilot, this is similar but runs in your terminal. Check Anthropic's docs to get set up.

Honestly, if you've done any agentic coding before, this will feel familiar.

Step-by-Step Setup in 5 Minutes

Here's the actual setup process. It's shorter than you'd expect.

Step 1: Make Sure Claude Code Works

Open your terminal and run:

claude --version

If you see a version number, you're good. If not, install Claude Code first.

Step 2: Install Remotion Skills

This is the magic command:

npx @anthropic-ai/skills add remotion

That's it. This installs the Remotion skill into Claude Code. The skill includes all the context Claude needs to write proper Remotion code—documentation, examples, best practices.

Step 3: Create a New Project

Navigate to where you want your project and run:

mkdir my-first-video && cd my-first-video
npx create-video@latest

Follow the prompts. Pick TypeScript if you're comfortable with it (Claude handles both just fine).

Step 4: Verify Everything Works

Open the project in your editor and start Claude Code:

claude

Now you're ready to prompt.

Your First Video: Hello World Animation

Let's not overthink this. Here's a prompt that works:

Create a simple 5-second video with the text "Hello World" that fades in
from transparent, holds for 2 seconds, then fades out. Use a dark blue
background (#1a1a2e) and white text. Sans-serif font, 72px.

Claude will generate something like this:

import { AbsoluteFill, interpolate, useCurrentFrame } from "remotion";

export const HelloWorld: React.FC = () => {
  const frame = useCurrentFrame();

  // Fade in: frames 0-30 (1 second at 30fps)
  // Hold: frames 30-90 (2 seconds)
  // Fade out: frames 90-120 (1 second)
  const opacity = interpolate(
    frame,
    [0, 30, 90, 120],
    [0, 1, 1, 0],
    { extrapolateRight: "clamp" }
  );

  return (
    <AbsoluteFill
      style={{
        backgroundColor: "#1a1a2e",
        justifyContent: "center",
        alignItems: "center",
      }}
    >
      <h1
        style={{
          color: "white",
          fontSize: 72,
          fontFamily: "sans-serif",
          opacity,
        }}
      >
        Hello World
      </h1>
    </AbsoluteFill>
  );
};

Preview it with:

npm run dev

Open localhost:3000 and you'll see your video playing in the browser.

Congrats. You just made a video with a prompt.

10+ Copy-Paste Prompts for Different Video Types

Here's where it gets fun. I've tested dozens of prompts. These are the ones that consistently generate good results.

Product Demo Prompts

App Feature Showcase:

Create a 15-second product demo video showing a mobile app mockup
(iPhone frame) with a dashboard UI inside. The phone should slide in
from the right, then highlight 3 features one by one with animated
callout boxes. Use a gradient background from #667eea to #764ba2.
Modern, clean aesthetic.

SaaS Dashboard Demo:

Create a 20-second screen recording style video showing a SaaS dashboard.
Start zoomed out showing the full interface, then smoothly zoom into the
analytics section. Add a cursor that moves naturally and clicks on the
"Export" button. Include a subtle drop shadow on the browser mockup.

Before/After Comparison:

Create a 10-second video with a split-screen comparison. Left side shows
"Before" (cluttered UI mockup), right side shows "After" (clean UI).
A vertical line sweeps from left to right revealing the transformation.
Add labels with a smooth fade-in.

Social Media Clip Prompts

Quote Card Animation:

Create a 6-second Instagram-style quote video. Display the text "Ship fast,
learn faster" with a typewriter animation. Add a subtle gradient background
that slowly shifts colors. Include a small avatar circle in the corner that
pops in at the end. 1080x1080 dimensions.

Stats Counter:

Create a 8-second video with an animated number counter going from 0 to
10,000. Add a "+" symbol after the number and text below saying "Happy Users".
Use spring animation for a satisfying bounce when it reaches the final number.
Dark mode aesthetic.

Tutorial/Explainer Prompts

Step-by-Step Walkthrough:

Create a 30-second explainer video with 3 steps. Each step gets 8 seconds:
Step 1: "Install the CLI" with a terminal icon, Step 2: "Run the command"
with a code snippet animation, Step 3: "Deploy" with a rocket icon.
Transitions should be smooth slides from right. Include step numbers
(1, 2, 3) in circles.

Code Snippet Animation:

Create a 12-second video showing code being typed in a code editor mockup.
The code should be: const greeting = "Hello, world!"; console.log(greeting);
Use syntax highlighting (strings in green, keywords in purple).
Add a blinking cursor. Include line numbers.

Marketing Animation Prompts

Logo Reveal:

Create a 5-second logo reveal animation. Start with particles scattered
across the screen, then have them converge to form the text "ACME".
Add a subtle glow effect when fully formed. Black background.

Feature List Animation:

Create a 15-second video listing 5 features. Each feature should fly in
from the left with a checkmark icon, then stack vertically. Features:
"Lightning fast", "Secure by default", "Easy setup", "Great docs",
"24/7 support". Add a satisfying sound-synced timing feel
(even without actual sound, make the motion rhythmic).

Bonus: Advanced Prompts

Data Visualization Animation:

Create a 12-second video with an animated bar chart. Start with empty bars,
then grow them to these values: Jan: 40%, Feb: 65%, Mar: 80%, Apr: 55%.
Use a staggered animation where each bar grows one after another.
Include axis labels and a title "Q1 Performance".

Text Transition Sequence:

Create a 10-second video that cycles through 4 words: "Build", "Ship",
"Learn", "Repeat". Each word should scale up from 0.5 to 1, hold briefly,
then blur out as the next word comes in. Use a bold, modern font and
centered layout.

Tips for Better AI Video Prompts

After testing this extensively, here's what I've learned about prompting for video:

1. Be explicit about timing.

Unlike UI prompts where you describe layout, video prompts need frame-by-frame thinking. Say "fade in over 1 second" not just "fade in."

2. Specify frame rate.

The default is 30fps. If you want something different, mention it. "Create a 60fps video for smooth motion."

3. Describe the motion, not just the end state.

Bad: "Show a logo." Good: "Logo starts 50% opacity and small, scales up to full size while fading to 100% over 2 seconds."

4. Use reference points.

"Like an Apple product video" or "Instagram Reels style" gives Claude useful context.

5. Break complex videos into scenes.

Instead of one massive prompt, describe scene by scene. This is similar to prompt chaining for complex UIs—the same principle applies to video.

Common Mistakes and How to Fix Them

I made all of these so you don't have to.

Mistake 1: Forgetting the Composition Setup

If Claude gives you a component but no Root.tsx or composition configuration, it won't render.

Fix: Add to your prompt: "Include the full composition setup in Root.tsx with proper duration and fps settings."

Mistake 2: Timing Math Is Off

You asked for a 10-second video but got 5 seconds.

Fix: Claude sometimes confuses seconds and frames. Be explicit: "10 seconds total at 30fps (300 frames)."

Mistake 3: Animations Happen All at Once

Everything fades in simultaneously when you wanted a sequence.

Fix: Describe the stagger: "First element fades in from 0-1s, second element from 1-2s, third from 2-3s."

Mistake 4: No Spring/Easing

Linear animations look robotic.

Fix: Request natural motion: "Use spring animation with moderate stiffness for a natural feel."

Mistake 5: Overwhelming Complexity

You asked for a 2-minute video with 15 scenes in one prompt.

Fix: Break it up. Generate each scene separately, then ask Claude to combine them into a sequence.

Rendering and Exporting Your Video

Once you're happy with the preview, it's time to render.

npx remotion render src/index.tsx HelloWorld out/video.mp4

Replace HelloWorld with your composition name.

Common render options:

# Higher quality
npx remotion render src/index.tsx HelloWorld out/video.mp4 --quality 100

# Different format
npx remotion render src/index.tsx HelloWorld out/video.webm --codec vp8

# Just a preview frame
npx remotion still src/index.tsx HelloWorld out/thumbnail.png --frame 60

Performance tip: Rendering happens locally on your machine. For faster renders on complex videos, consider Remotion's cloud rendering service—but honestly, most simple videos render in under a minute locally.

What to Build Next

You've got the basics down. Here are some ideas to level up:

1. Create a video template library. Build reusable components for intros, transitions, and outros. Prompt Claude to make them customizable via props.

2. Automate product videos. If you're building a product, script your demo video generation. Change the feature list, re-render. Done.

3. Combine with your existing vibe coding workflow. Use AGENTS.md context files to give Claude your brand guidelines, color palette, and font preferences upfront.

4. Build a video generation API. Remotion can run serverless. You could prompt → generate → serve videos dynamically.

The best part? This is all just React. If you're comfortable with context engineering, you can guide Claude to create increasingly sophisticated videos.

Remotion Skills is still new. I expect the prompting patterns will evolve fast as more developers experiment with it. But right now? You're early. That's an advantage.

Go make something cool.

You Might Also Like

• Vibe Coding: The Complete Guide (2026) - Master the fundamentals of AI-assisted development
• AGENTS.md: Make AI Actually Get Your Code - Set up context files for better AI output
• Prompt Chaining for Complex UIs - The same technique works for complex video sequences

Frequently Asked Questions

What is Remotion Skills?

Remotion Skills is a plugin for Claude Code that teaches the AI how to write Remotion code properly. It includes documentation, best practices, and examples so Claude can generate video code from natural language prompts.

Do I need to know React to use this?

It helps, but it's not strictly required for basic videos. Claude handles the React code. However, if you want to customize or debug, some React knowledge will save you time.

How long can videos be?

There's no hard limit. I've generated 2-minute videos without issues. For longer content, break it into scenes and render separately, then combine with ffmpeg if needed.

Can I add audio or music?

Yes. Remotion supports audio tracks. Just prompt Claude: "Add a background audio track from 'audio.mp3' that fades in over 2 seconds." You'll need to provide the audio file in your project's public folder.

Is this free?

Remotion itself is open source. Claude Code requires an Anthropic API key (pay per use). For most video generation, the API costs are minimal—a complex video prompt might cost a few cents.

Can I use this for commercial projects?

Yes. Remotion has a company license for commercial use, but for most individual projects and startups, the standard license works fine. Check Remotion's licensing page for specifics.

---

Written by the Fardino Team. We build AI tools for frontend developers. Try Fardino free →