How to Create Videos with Claude Code and Remotion

Remotion is a React framework that turns TypeScript components into rendered video files. Claude Code is Anthropic's AI coding agent. Together, they form a video creation pipeline where you describe what you want and Claude writes the React components that render your video.

No timeline editors. No keyframe fiddling. You describe, Claude codes, Remotion renders.

What you can create

Product demos — animated walkthroughs of your app's features
Explainer videos — technical concepts with animated diagrams and code snippets
Social media content — branded short-form videos at scale
Data visualizations — animated charts and dashboards from live data
Conference talks — slide-style videos with smooth transitions

Prerequisites

Claude Code installed (npm install -g @anthropic-ai/claude-code)
Node.js 18+ and npm
Basic familiarity with React (helpful but not required — Claude handles the code)

Set up Remotion

Create a new Remotion project. Claude Code can do this for you:

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

# Navigate into the project
cd my-video

# Launch Claude Code
claude

Alternatively, ask Claude to scaffold it from scratch:

      prompt
Set up a new Remotion project in this directory with
TypeScript and Tailwind CSS support.

Install the Remotion skill

Remotion provides an official Claude Code skill that teaches Claude the framework's patterns, component structure, and rendering pipeline:

      bash
# The skill is auto-installed with recent Remotion versions.
# To install manually:
mkdir -p .claude/skills
curl -o .claude/skills/remotion.md \
  https://www.remotion.dev/skills/remotion.md

Note: Remotion is free for individuals, non-profits, and teams of up to 3. Larger teams need a Creators license ($25/seat/month). See the Remotion pricing page for details.

Create your first video

With the skill installed, describe your video and let Claude build it:

      prompt
Create a 30-second product intro video for our API service:

1. Opening: our logo fades in on a dark background (3 seconds)
2. Problem statement: text animates in — "APIs shouldn't be hard"
3. Three feature cards slide in from the right, one by one
4. Closing: CTA text "Try it free" with a subtle pulse animation

Use our brand colors: #1C1C1E background, #4E8C7F accents,
Nunito font. Output at 1920x1080, 30fps.

Claude writes the React components — <Composition>, sequences, spring animations — and you can preview immediately:

      bash
# Preview in browser
npx remotion studio

# Render to MP4
npx remotion render src/index.ts MyVideo out/video.mp4

Iterate and refine

The real power is in iteration. Since everything is code, changes are precise:

      prompt
# Adjust timing
Make the feature cards appear faster — 0.5 seconds each
instead of 1 second.

# Add data
Replace the static metrics with animated counters that
count up from 0 to our actual numbers: 99.9% uptime,
50ms latency, 10M requests/day.

# Change style
Add a subtle particle effect to the background,
similar to floating dust in a spotlight.

Each iteration is a code change — reviewable, version-controlled, and reproducible.

Advanced patterns

Template-based batch rendering

Create one video template, then render thousands of variations from data:

      prompt
Create a Remotion template for customer testimonial videos.
It should accept props: { name, company, quote, avatarUrl }.
Then render 10 variations using the data in ./testimonials.json.

Code walkthrough videos

Generate videos that step through code with syntax highlighting:

      prompt
Create an animated code walkthrough video that shows
the authentication flow in ./src/auth/. Highlight each
function as it's explained, with annotations appearing
beside the code.

Data-driven dashboards

Turn analytics data into animated video reports:

      prompt
Read the metrics from ./data/monthly-report.json and
create an animated dashboard video showing:
- Line chart of monthly active users (animated draw-in)
- Bar chart of revenue by region (bars growing up)
- Key metrics with count-up animations

Tips for better videos

Start simple — get the structure right before adding effects
Specify timing — tell Claude exact durations for each scene
Reference your brand — provide hex colors, fonts, and logo paths in the prompt
Preview often — use npx remotion studio to check changes live
Use springs for motion — tell Claude to use Remotion's spring() for natural-feeling animation

What's next? Combine video creation with Obsidian for scripting — write your video scripts as notes, then have Claude turn them into Remotion compositions.

Create Videos with Claude Code + Remotion

What you can create

Prerequisites

Set up Remotion

Install the Remotion skill

Create your first video

Iterate and refine

Advanced patterns

Template-based batch rendering

Code walkthrough videos

Data-driven dashboards

Tips for better videos

Need professional AI-generated content?