Set up Remotion with Claude Code

Claude is an AI assistant made by Anthropic. You've probably used it on claude.ai to write text, answer questions, or brainstorm ideas.

Claude Code is the next level. It's a tool that lets Claude work directly on your computer, creating files, running commands, installing software, and building things for you. Instead of just chatting, Claude becomes a hands-on collaborator.

That's what makes it powerful for video. You don't need to learn video editing software. You describe the video you want, and Claude Code creates it.

Remotion is a React-based video framework. Instead of dragging clips on a timeline, you describe your video and Remotion turns it into a finished MP4.

You don't need to know how Remotion works. Claude Code handles all of that. You describe what you want in plain English, and Claude writes the code, previews it, and exports the final file.

With Claude Code and Remotion together, you can:

• ›Create animated video ads from a text description
• ›Add text overlays, transitions, and effects
• ›Preview your video in a browser, frame by frame
• ›Export a finished MP4 file

Make sure you have these before starting.

Required

• ›Node.js 18 or higher. Open your terminal and type node --version to check. If you need to install it, go to nodejs.org and download the LTS version.
• ›Either Claude Desktop or VS Code with Claude Code. You only need one. Both paths are covered below.

Not required

• ›You do not need to be a developer. If you can install an app and click through settings, you can do this.
• ›You do not need to know React. Claude handles the code for you.
• ›You do not need prior experience with Remotion. That's what this guide is for.

Check your Node.js version

node --version

You should see something like v18.17.0 or higher. If you see an error or a version below 18, install the latest LTS from nodejs.org.

This is the faster path. If you just want to experiment with AI-generated video code, start here.

npx create-video@latest

This creates a new Remotion project with the Claude Code skill already installed. The skill teaches Claude best practices for building Remotion videos.

If you already have a Remotion project, add the skill separately:

npx skills add remotion-dev/skills

Create a simple 30-second video ad for a coffee shop with animated text overlays

This is the full-power route. Claude Code in VS Code can create files, run terminal commands, open Remotion Studio, and export videos directly. No copy-pasting required.

cd my-video
code .

Why this path is more powerful

• ›Create and edit files directly in your project
• ›Run terminal commands like npx remotion studio and npx remotion render
• ›Open Remotion Studio so you can preview in the browser
• ›Iterate on the composition based on what you see in the preview
• ›Export the final MP4 and see where it saved

Here's what happens when you create your first video with Claude Code (Path B).

1. 01You describe the video. Either type /remotion-video followed by your description, or just describe what you want in plain English.
2. 02Claude creates the composition. A React component file that defines every frame: imports, animation timing, text content, and styling.
3. 03Claude opens Remotion Studio. (VS Code path only.) A browser-based preview where you can scrub through frame by frame.
4. 04You request changes. Not happy with something? Tell Claude what to adjust.
5. 05Claude exports the video. When you're happy with the preview, Claude runs the export command and produces a finished MP4.

Sample conversation

Create a 30-second product ad for "Mountain Brew Coffee".
Dark background (#1a1a2e). Accent color: warm orange (#e67e22).

Hook (0-5s): "Your morning deserves better" with fade-in animation.
Features (5-20s): Three cards that slide in one at a time:
  - "Single Origin Beans"
  - "Roasted Fresh Weekly"
  - "Shipped to Your Door"
CTA (20-30s): "Order now at mountainbrew.co" with the accent color.

I'll create that composition for you. Let me set up the file
and configure the animations.

Creating src/compositions/MountainBrewAd.tsx...
[writes the full component]

Registering composition in Root.tsx...
[updates the root file]

Opening Remotion Studio for preview...
[runs npx remotion studio]

Your video is ready to preview at http://localhost:3000.
Take a look and let me know if you want any changes before
I export the final MP4.

You can then ask Claude to adjust timing, change colours, swap out text, or add new sections. When everything looks right, say 'export it' and Claude produces the final file.

Copy and paste these into Claude to get started immediately. Replace the bracketed text with your own details.

Create a 30-second product showcase video for [product name].
Use animated text overlays on a dark background with blue
(#3B82F6) accent color. Include a hook that grabs attention
in the first 3 seconds, 3 feature highlights that animate in
one at a time, and a call-to-action with a website URL.
Resolution: 1080x1920 (vertical for Instagram Reels).

Create a 45-second talking head reel template. The layout
should work like this:

- Hook (0-5s): Camera footage fills the entire frame. Bold
  subtitle text at the bottom.
- Middle (5-35s): Split screen. Camera footage in the bottom
  half, content/graphics in the top half. Add subtitle bars
  that sync with speech timing.
- CTA (35-45s): Camera footage fills the frame again with a
  branded lower third and call-to-action text.

Use [brand color] as the accent color. Make the subtitle
text white with a slight text shadow for readability.

Create an animated statistics video showing these numbers:
- 47% increase in conversion rate
- 2.3x return on ad spend
- 150+ clients served
- £1.2M in revenue generated

Each stat should animate in with a count-up effect. Use a
dark background (#0f0f0f) with bright accent colors that
alternate between sections. Smooth transitions between each
stat. Total duration: 20 seconds.

"Claude Code isn't available"

You need a paid Claude plan (Pro or Max). Check your subscription at claude.ai/settings.

"Remotion is not installed"

You need Remotion and its CLI in your project. Ask Claude to set it up:

Set up Remotion in this project and install all dependencies

Or do it manually:

# Fresh project
npx create-video@latest

# Or add dependencies to an existing project
npm install remotion @remotion/cli @remotion/player

"Export fails" or "Cannot find module"

Check these common causes:

• ›Node.js version. Must be 18 or higher. Run node --version to verify.
• ›Missing dependencies. Run npm install to make sure everything is installed.
• ›Wrong composition name. The composition ID in your export command must match the ID registered in Root.tsx.

# Check Node version
node --version

# Reinstall dependencies
rm -rf node_modules && npm install

# List available compositions
npx remotion compositions

"Claude doesn't understand what I want"

AI works best with specific instructions. If your results are off, try:

• ›Specify exact durations. '30 seconds' is better than 'short video'.
• ›Include hex colours. '#3B82F6' is better than 'blue'.
• ›Describe the structure. 'Hook (0-5s), body (5-25s), CTA (25-30s)' is better than 'make it look professional'.
• ›Reference the starter prompts above as a template.

"Remotion Studio won't open"

Make sure no other process is using port 3000. Specify a different port:

npx remotion studio --port 3005

Video is just one example of what Claude Code can do. The same approach works for anything you want to build: