March 25, 2026

Making a video in 20 seconds with claude code

Traditional video editing is a bottleneck. Even with modern tools, you're still stuck dragging playheads, manually adjusting keyframes, and waiting for renders. But if you treat video as code, you can treat video as data.

By combining Remotion (a React framework for video) with Claude Code (Anthropic's agentic coding tool), you can effectively "prompt" a production-ready MP4 into existence. Here is how to set up the ultimate programmatic video stack.

I made this video for my app in 20 seconds using Remotion and Claude Code.

1. The Foundation: Scaffolding Remotion

Before Claude can write your video, you need a playground. Start by creating a fresh Remotion project.

# Create a new Remotion project
npx create-video@latest my-video-gen
cd my-video-gen

# Recommended settings during setup:
# - Template: Blank (best for AI generation)
# - TypeScript: Yes
# - TailwindCSS: Yes (Claude loves styling with Tailwind)

2. The Secret Sauce: Installing "Skills"

Claude Code is smart, but it doesn't inherently know the nuances of Remotion's spring(), interpolate(), or Sequence logic. You need to install the official Remotion Agent Skills. This gives Claude a "manual" it can reference while it codes.

# Install the Remotion skills into your project
npx skills add remotion-dev/skills

# Or use Remotion's own built-in command:
npx remotion skills add

This creates a .claude/skills directory in your project. Inside, Claude finds SKILL.md, which contains all the best practices for timing, frame-based animation, and composition structure.

3. Activating the Agent

Now, fire up Claude Code inside your project directory.

claude

Pro-tip: To avoid Claude asking for permission for every file change (which will be many), you can start it with the auto flag for a safer hands-off experience:

claude --auto-approve

Or, if you want to move even faster and trust your setup, you can use --dangerously-skip-permissions — just know it bypasses all safety checks.

4. Prompting Your Video

Instead of writing React components yourself, you can now describe the motion graphics you want.

The Golden Rule: Be specific about frames and easing. Since Remotion is frame-based (30fps or 60fps), Claude performs best when you define animations in frame counts.

Try this prompt inside Claude Code:

"Create a 5-second intro video (150 frames at 30fps). Background: A dark navy gradient. Animation: The text 'VibeCode' should scale up from 0 to 1 using a spring animation from frames 0 to 45. Add a subtle floating particle effect in the background using AbsoluteFill."

Claude will then:

Create a new .tsx component
Register the composition in Root.tsx
Implement the physics-based animations

5. Live Preview & Rendering

While Claude is working, keep the Remotion Studio open in a split-screen terminal. You'll see the video update in real-time as Claude saves files.

# In a separate terminal tab
npm run dev

Once it looks perfect, tell Claude to render it, or run the command yourself:

# Render to MP4
npx remotion render [composition-id] out/video.mp4

Why this changes everything

This workflow moves you from Editor to Director. You aren't pixel-pushing; you're defining intent. Because it's all code, you can easily swap variables — change a hex code, update a name, or inject an API response — and regenerate the video in seconds.