You can make real MP4 videos with Claude Code and Remotion without ever touching a timeline. Remotion is a free-for-most tool that builds videos out of code. Claude Code writes that code for you. Your job is to describe the video you want in plain English, watch the preview, ask for changes, and render the final file. This guide walks through the whole setup step by step, gives you copy-paste prompts, and explains where this approach works well and where it doesn't.
If you're still figuring out what Claude can and can't do with video in general, start with the pillar guide, Can Claude edit videos?, then come back here.
TL;DR
- Remotion turns code into video. Claude Code writes the code. You describe what you want.
- You need Claude Code (which requires a paid Claude plan) and Node.js on your computer.
- Setup is four commands: create a project with
npx create-video@latest, add the Remotion skills withnpx skills add remotion-dev/skills, preview withnpx remotion studio, and render withnpx remotion render. - It's great for text animations, explainers, stat and chart videos, captions, and templated series. It's not for cutting raw vlog footage or making realistic AI footage of people.
- Remotion is free for individuals, non-profits, and companies with up to 3 employees. Bigger companies need a paid license.
- Not technical enough for this? Look at HyperFrames in claude.ai or Claude Motion (Team and Enterprise plans).
What is Remotion (and why it pairs with Claude Code)?
Remotion (opens in a new tab) is a tool that makes videos from code. Instead of dragging clips onto a timeline, you write a small web page that changes frame by frame, and Remotion records it into an MP4. Every title, color, number, and animation is written down as instructions, so it can be changed by editing text.
That's exactly why it pairs so well with Claude Code. Claude Code is Anthropic's coding agent: it runs on your computer, reads and writes files in a folder, and runs commands for you. Writing code is what it does best. So the division of labor looks like this:
- You describe the video: length, size, text, colors, pacing.
- Claude Code writes and edits the Remotion code.
- Remotion shows you a live preview and renders the final video.
A few terms you'll see along the way, in one line each:
- Composition: one video inside your project, with a set width, height, length, and frame rate. In code it's a
<Composition>tag, but you never need to write it yourself. - Remotion Studio: a preview window that opens in your browser so you can scrub through the video.
- Render: turning the preview into an actual MP4 file.
- Skill: a set of instructions Claude Code loads so it knows a tool's best practices. More on this below.
What you need before you start
- Claude Code. It needs a paid Claude plan (Pro, Max, Team, or Enterprise) or an Anthropic Console account. The free plan doesn't include it. If you haven't installed it, follow how to download Claude Code. It covers Mac, Windows, and Linux with the exact commands.
- Node.js. Remotion runs on Node.js, a free program that lets your computer run JavaScript tools. Download it from nodejs.org (opens in a new tab) if you don't have it.
- A terminal. That's the text window where you type commands (Terminal on Mac, PowerShell or Windows Terminal on Windows). You'll only type a handful of commands.
- Your assets (optional). Logos, screenshots, music, or caption files you want in the video.
Not sure whether Claude Code is the right tool for you at all? Claude Code vs Claude Cowork explains the difference in plain English.
Step by step: make your first video with Claude Code and Remotion
Step 1: Create a Remotion project
Open your terminal, move to the folder where you keep projects, and run:
npx create-video@latestThis is the official starter command from the Remotion GitHub repo (opens in a new tab). It asks a few questions, such as a project name and which template to start from. A blank or basic template is fine. It then creates a new folder with everything Remotion needs. If the setup offers to add AI skills, say yes and you can skip step 2.
When it finishes, move into the new folder (replace my-video with the name you chose):
cd my-videoStep 2: Add the Remotion skills
From inside the project folder, run:
npx skills add remotion-dev/skillsThis installs Remotion's official skills so Claude Code follows Remotion's own best practices instead of guessing. Remotion also documents an alternative command, npx remotion skills add, that does the same job.
Step 3: Open Claude Code in the folder
Still inside the project folder, start Claude Code:
claudeClaude Code can now see your project files. If you're using Claude Code inside the desktop app instead of the terminal, open the same folder there.
Step 4: Describe your video
Type what you want in plain English. Be specific about size, length, and text. For example:
Make a 15-second vertical video (1080x1920, 30fps) that says "3 ways to save an hour a day" with each tip sliding in one at a time. Dark background, white bold text, a yellow accent color. Then tell me how to preview it.Claude Code will write the code, add the new composition, and tell you what it changed. It will usually ask permission before running commands or editing files. Read what it asks and approve it.
Step 5: Preview in Remotion Studio
To see your video, run this in the project folder (or ask Claude Code to run it):
npx remotion studioRemotion Studio opens in your browser. Pick your composition from the list on the left and play it. Then go back to Claude Code and ask for changes the way you'd talk to an editor: "Make the second tip stay on screen a second longer," "Use a rounder font," "Add a fade at the end." The preview updates as the code changes.
Step 6: Render the MP4
When you're happy, render it:
npx remotion renderIf you don't name a composition, Remotion asks you to pick one. The file lands in the out folder inside your project. You can also just tell Claude Code, "Render the TipsVideo composition to an MP4," and it will run the right command.
What the Remotion skill actually does
A skill is a folder of instructions that Claude Code loads when a task calls for it. Think of it as a cheat sheet written by the people who make the tool. If skills are new to you, what are Claude agent skills? explains them from scratch.
Remotion's main skill is remotion-best-practices. As of October 2026, Remotion's AI skills page (opens in a new tab) describes it as covering all the other skills, so it's the one to reach for when you're unsure. The set also includes more focused skills, such as remotion-captions for subtitles, remotion-studio for launching the preview, and remotion-render for rendering.
You usually don't need to call a skill by name. Claude Code picks up the right one when your request involves Remotion. If it ever seems to ignore Remotion's conventions, start your message with /remotion-best-practices to load it directly.
In practice, the skill is the difference between Claude writing code that technically runs and code that follows Remotion's rules for timing, animation, fonts, and media. Fewer broken renders, fewer rounds of "that didn't work."
6 copy-paste Remotion prompts for Claude Code
Paste these into Claude Code from inside your Remotion project. Swap the bracketed parts for your own details. If you'd rather build a prompt by answering a few questions, the video editing prompt generator has a "Claude Code + Remotion" option that writes a ready-to-paste Remotion prompt for you.
1. 30-second vertical Reel explainer with captions
Create a new 30-second vertical composition (1080x1920, 30fps) called ReelExplainer. Topic: [your topic]. Break it into 5 short scenes, each with one bold headline and one supporting line. Add large, centered captions that appear word by word. Use [brand color] as the accent and keep text inside a safe area so phone app buttons don't cover it. Show me in Remotion Studio when it's done.2. Animated stat or chart video
Make a 20-second 16:9 composition (1920x1080) called StatsVideo. Animate these numbers counting up from zero, one at a time: [stat 1], [stat 2], [stat 3]. Then show a bar chart of this data growing from the bottom: [paste data]. Clean white background, dark text, one accent color. Put the source line "[source]" in small text at the bottom.3. Product demo using your screenshots
I put screenshots in the public folder: [file names]. Build a 45-second 16:9 product demo called ProductDemo. Show each screenshot inside a simple browser frame, slowly zoom toward the area that matters, and add a short caption for each step: [step captions]. End on a title card with "[product name]" and "[website]".4. Talking-head clip with burned-in captions from an SRT
I added my video clip to the public folder as [clip name].mp4 and its subtitles as [file name].srt. Create a composition that plays the clip at its original size and length and burns in the captions from the SRT file. Captions should be bold, white with a dark outline, centered in the lower third, and highlight the current word if possible.5. YouTube intro
Create a 5-second YouTube intro (1920x1080, 30fps) called YouTubeIntro. Show my logo from public/[logo file] scaling in with a slight bounce, then the channel name "[channel name]" typing out underneath. Use [brand colors]. End on a clean frame I can cut straight into my video.6. Turn a blog post into a 60-second video
Here's a blog post: [paste text or URL]. Turn it into a 60-second vertical video (1080x1920). First write a script of 6 to 8 short scenes and show it to me for approval. After I approve, build the composition with one key line per scene, simple icons or shapes as visuals, and a closing scene with "[call to action]".The last prompt shows a good habit: ask Claude to plan first and build second. Approving a script takes one minute and saves several rounds of redoing animations.
Good uses and bad uses
Remotion with Claude Code shines when the video is made of designed elements, not filmed footage:
- Text and motion graphics: titles, quotes, tips, lists, lower thirds.
- Data videos: stats counting up, charts growing, before-and-after numbers.
- Templated series: the same layout with new text each week, like a weekly tip or a monthly results recap. Once one works, the next takes a single prompt.
- Captions over existing clips: burned-in subtitles on a talking-head video.
- Product walkthroughs built from screenshots.
It's the wrong tool for:
- Cutting raw vlog footage. Picking the best takes, trimming pauses, and pacing a story from hours of clips is still a job for an editor like CapCut, Descript, or Premiere. The pillar guide, Can Claude edit videos?, covers the better options for that.
- Realistic AI footage. Remotion doesn't generate people, places, or camera shots. It animates what you give it.
- One-off videos you need in five minutes. The first setup takes some time. The payoff comes on the second, third, and tenth video.
Remotion licensing: is Remotion free?
Remotion isn't open source in the usual sense. It has its own license. As of October 2026, it's free for:
- Individuals
- Non-profit organizations
- For-profit companies with up to 3 employees
- Evaluation, if you're just trying it out
Companies above that size need a company license. The published tiers are Creator at $25 per month per seat, Automation at $0.01 per render with a $100 monthly minimum, and Enterprise starting at $500 per month. Check the current terms on the Remotion license page before using it for client or company work, since pricing can change.
Remotion vs HyperFrames
HyperFrames is the other code-to-video tool people pair with Claude. Both are good. The right choice mostly depends on your company size and how you want to work with Claude.
| Remotion | HyperFrames | |
|---|---|---|
| Made by | Remotion | HeyGen |
| Built with | React (a JavaScript framework) | HTML, CSS, and GSAP animations |
| License and cost | Free for individuals, non-profits, and companies up to 3 employees; paid company license above that | Open source (Apache 2.0), no render or seat fees |
| Claude integration | Official skills for Claude Code: npx skills add remotion-dev/skills | Connector in Claude's directory, plus a Claude Code plugin: claude plugin marketplace add heygen-com/hyperframes then claude plugin install hyperframes@hyperframes |
| Requirements | Node.js | Node 22+ and FFmpeg |
| Best for | Mature projects, data videos, captions, templated series, teams already using React | Animated slides, explainers, and motion graphics, especially at larger companies that want no license fees |
Which should you use? If you're a solo creator or a small business, both are free, and Remotion's maturity and skills make it a safe first pick. If you work at a company with more than 3 employees and don't want a license, HyperFrames avoids that cost. If you don't want to use a terminal at all, HyperFrames has the edge because it also works as a connector inside claude.ai. The HyperFrames code is on GitHub (opens in a new tab), and a new project starts with npx hyperframes init my-video.
Don't want to use Claude Code? Two alternatives
Claude Code is the most flexible route, but it isn't the only one.
- Claude Motion. Anthropic announced Claude Motion in beta on October 8, 2026. It's available on Team and Enterprise plans only, not Free, Pro, or Max. You start it with
/motionin a chat, and Claude writes code that animates text, charts, shapes, and images. You edit through chat and export an MP4. Like Remotion, it's not a video generation model, so no realistic footage. - The HyperFrames connector in claude.ai. HyperFrames by HeyGen (opens in a new tab) is in Claude's official connector directory and makes animated slides, explainers, and motion graphics from a regular Claude chat, no terminal required.
Troubleshooting and what to verify
- Watch the whole render before posting. Claude can't see the finished video the way you do. Play the MP4 start to finish and check timing, spelling, and that nothing runs off the edge of the screen.
- Fonts look wrong. Ask Claude Code to load the font properly using Remotion's font guidance. A font that shows in Studio can still fall back to a default if it isn't loaded correctly.
- Images or clips don't show. Put them in the project's
publicfolder and tell Claude the exact file names. - The preview won't open. Make sure you're running
npx remotion studiofrom inside the project folder, not its parent. - Something broke after a change. Paste the error message into Claude Code and ask it to fix it. That's usually all it takes.
- Check the license. If you're using this for a company with more than 3 employees, confirm you're covered before you publish.
Frequently asked questions
What is Remotion?
Remotion is a tool that makes videos from code. You write, or have Claude Code write, a small React project that describes each frame, preview it in Remotion Studio in your browser, and render it to an MP4. It's well suited to text animations, data videos, captions, and templated video series.
Is Remotion free?
As of October 2026, Remotion is free for individuals, non-profits, for-profit companies with up to 3 employees, and evaluation. Larger companies need a company license: Creator at $25 per month per seat, Automation at $0.01 per render with a $100 monthly minimum, or Enterprise from $500 per month.
How do I add the Remotion skill to Claude Code?
From inside your Remotion project folder, run npx skills add remotion-dev/skills in your terminal. Remotion also documents npx remotion skills add as an alternative. The main skill is remotion-best-practices, and Claude Code loads it when your request involves Remotion.
Remotion vs HyperFrames: which should I use?
Solo creators and small businesses can use either for free, and Remotion is a safe first pick because it is mature and has official Claude Code skills. HyperFrames, made by HeyGen, is open source under Apache 2.0 with no license fees, so it suits larger companies, and it also works as a connector inside claude.ai if you want to avoid the terminal.
Can Claude Code edit my existing videos?
Partly. With Remotion, Claude Code can place your clips in a composition, trim them, and add captions, titles, and graphics on top, then render a new MP4. It is not a replacement for a timeline editor when you need to pick takes and cut hours of raw footage. For that, use an editor like CapCut, Descript, or Premiere and let Claude help with scripts, cut lists, and captions.
Make your first video this week
Pick one short video you'd normally skip because it takes too long to make, like a weekly tip or a stat you want to share. Set up a Remotion project, paste one of the prompts above, and render it. For the bigger picture on video and AI, read Can Claude edit videos?. And if you want to get comfortable working with Claude day to day, without needing to code, the free Claude Cowork course walks you through it step by step.