Free Guide

How to Make Videos with Remotion and Claude Code

Set up a React video project, prompt what you want, and render real MP4s. Free for teams up to 3.

Tools you'll use

The setup is Install > Scaffold > Prompt > Preview > Render. You install two things (Claude Code and Node.js), scaffold a Remotion project with one command, then prompt Claude to build your video in React. The preview updates live as you work. When it looks right, render to MP4.

Set up

Install the prerequisites

You need two things:

Claude Code (requires a paid Anthropic subscription)
Node.js (free, download the LTS version)

Scaffold a Remotion project

Run npx create-video@latest in your terminal. When it asks:

Select the Blank template
Say yes to TailwindCSS
Say yes to install Skills

Why Skills matter

Skills are documentation context files that Remotion built for Claude Code. They tell Claude how Remotion's API works so it writes valid code instead of guessing. Always install them.

Start the preview

Navigate into your project folder and run:

npm install
npm run dev

This opens Remotion Studio in your browser with a live preview of your video. Keep this running.

Build

Open Claude Code in the project

Open a separate terminal window. Navigate to the same project folder and run claude. Claude now has access to your Remotion project files and the Skills you installed.

Prompt your video

Describe what you want in plain English. Something like: "Make a 10-second intro with my logo fading in, text sliding up from the bottom, and a gradient background." Claude writes the React components and Remotion composition for you.

Preview and iterate

Your browser preview updates as Claude makes changes. Watch the result, ask for tweaks. "Make the text bigger." "Slow down the fade." "Add a bounce effect." Keep going until it looks right.

Export

Render to MP4

Tell Claude to render the video, or run npx remotion render yourself. You get a real MP4 file, ready to upload anywhere. Remotion also supports WebM, GIF, and image sequences.

What you can build

Social media content

Captions, shorts, reels. Submagic uses Remotion for short-form videos with auto-captions, b-rolls, zooms, and sound effects.

Product demos

Screen recordings with auto layouts, device mockups, captions, and 4K export. Vibrantsnap and SuperMotion both run on Remotion.

Data visualizations

Turn statistics into animated videos. AnimStats transforms data into captivating GIFs and videos. Electricity Maps visualizes real-time grid emissions across Europe.

Ecommerce ads

AdmoveAI uses Remotion to build and render high-performing ecommerce video ads automatically on their platform.

Personalized campaigns

GitHub Unwrapped generates a unique year-in-review video for every user based on their GitHub activity. Same template, different data, thousands of unique videos.

Music visuals

Banger.Show creates 3D music visuals without learning 3D or video editing software. Visuals match the sound and build the artist's brand.

Automated daily content

Hello Meteo pulls OpenWeather data and renders a daily weather forecast video, then posts it to social media automatically. Same workflow, fresh data every day.

Before you start

Claude Code requires a paid subscription. It's a CLI tool from Anthropic. You need an active subscription to use it.

Remotion is free for individuals and teams up to 3. Company license starts at $100/month for 4+ people. No sign-up needed to start.

The Skills install matters. When scaffolding, say yes to install Skills. This gives Claude the documentation context it needs to write valid Remotion code. Without it, Claude guesses at the API and makes mistakes.

Tools used in this guide

Remotion

Open-source React framework for creating real MP4 videos programmatically. 42k GitHub stars, 1.4M monthly npm installs, 800 pages of documentation, 35+ templates. Free for individuals and teams up to 3.

remotion.dev

Claude Code

Anthropic's CLI for Claude. Write and edit code by prompting in your terminal. Reads your project files and understands context. Paid subscription required.

claude.com/product/claude-code

Node.js

JavaScript runtime required to run Remotion projects. Download the LTS version. Free and open source.

nodejs.org

FAQ

Is Remotion free?

Free for individuals and companies up to 3 people, including commercial use. Company license required at 4+ people, starting at $100/month for automators or $25/month per seat for creators.

Do I need to know React?

No. Claude Code writes the React components for you. You describe what you want in plain English and Claude handles the code.

What formats can Remotion render?

MP4, WebM, GIF, and image sequences. You can render locally, on a server, or serverless via Remotion Lambda.

What are Remotion Skills?

Documentation context files that Claude Code reads so it understands Remotion's API. Install them during project setup so Claude writes valid code instead of guessing. More details in the docs.