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

Try this prompt

Copy

BUILD: Scroll-animated feature grid with staggered card entrance effects FOR: SaaS marketers building an animated features section for a product homepage MUST: - 3-column grid of feature cards each animating in on scroll with 150ms inter-card stagger - Each card: colored icon, title, 2-line description, soft radial background glow - Entrance animation: translateY(-20px) to 0 + opacity 0 to 1 per card SHOULD: - Auto-play loop mode for embedding in a screen recording or demo video - Hover lifts card 4px and intensifies the glow ring CONTEXT: React + Tailwind + Framer Motion, dark background (#0f0f0f), distinct accent color per card, Inter font

⌘+Enterto launchLaunch in Fardino

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:

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:

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:

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:

Now you're ready to prompt.

Your First Video: Hello World Animation

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

Claude will generate something like this:

Preview it with:

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

Congrats. You just made a video with a prompt.

Try this prompt

Copy

BUILD: Animated metrics countdown sequence for a social media video clip FOR: Founders or marketers creating a stats highlight reel for Instagram Reels or Stories MUST: - 3 sequential full-screen frames each counting up a key metric to its final value - Bold oversized number (120px+) with descriptor label below (e.g. "47,000 users joined") - Per-frame background accent color swap with 0.3s crossfade transition between frames SHOULD: - Thin progress bar at the bottom indicating position across the full clip - Brand logo lockup centered on the final frame before fade to black CONTEXT: React + Remotion, 1080×1920 portrait format, heavy sans-serif typeface, 3 seconds per frame, exported as MP4

⌘+Enterto launchLaunch in Fardino

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:

SaaS Dashboard Demo:

Before/After Comparison:

Social Media Clip Prompts

Quote Card Animation:

Stats Counter:

Tutorial/Explainer Prompts

Step-by-Step Walkthrough:

Code Snippet Animation:

Marketing Animation Prompts

Logo Reveal:

Feature List Animation:

Bonus: Advanced Prompts

Data Visualization Animation:

Text Transition Sequence:

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.

Replace HelloWorld with your composition name.

Common render options:

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. Build with Fardino →