Guides · Updated
Remotion with Claude Code: Make Videos from Prompts
How to set up Remotion and its agent skills in Claude Code, what to prompt, how to preview and render, and what the Remotion licence allows.
Remotion is a framework that turns React components into video. Claude Code writes those components from your prompts, and Remotion renders them to MP4. With Remotion's agent skills installed, Claude follows Remotion's own rules for animation, timing and rendering instead of guessing them from general web knowledge. This guide covers the setup, what to ask for, and the licence.
What Remotion does
A Remotion video is a React component that receives the current frame number and returns what that frame should show. Animation is a calculation: at frame 0 a title is transparent, at frame 30 it is fully visible, and Remotion computes every frame in between. To render, Remotion opens each frame in a headless browser, captures it, and encodes the frames with FFmpeg.
That model suits an agent. Claude already writes React, and a video expressed as code can be edited, versioned and re-rendered like any other code.
Set it up
Remotion's documentation gives these steps for Claude Code. You need Node.js and a Claude Code subscription.
Create a project:
npx create-video --yes --blank --no-tailwind my-video
cd my-video
Add Remotion's agent skills to the project:
npx remotion skills add
Start the preview, which opens Remotion Studio in your browser:
npm run dev
Then start Claude Code in a second terminal, in the same folder:
cd my-video
claude
From here you prompt, and the Studio preview updates as Claude edits the code.
To add the skills outside a Remotion project, or for another agent, use the skills CLI:
npx skills add remotion-dev/skills
The Remotion skills
Remotion publishes its skills in one repository. The entry point is Remotion Best Practices, which routes Claude to the right one for the task:
| Skill | What it covers |
|---|---|
| Remotion Create | Starting a new project or composition |
| Remotion Markup | Compositions, animation, layout, typography, media, fonts and timing |
| Remotion Studio | Opening the preview |
| Remotion Render | Rendering a video or a still |
| Remotion Captions | Transcribing audio and animating captions |
There are also skills for maps, interactivity, building a product on Remotion, and upgrading. Each one can be called by name, for example /remotion-create Make a promo video for a record store, which is the example prompt in Remotion's README.
What to prompt
Specific prompts give better first drafts. State the length, the aspect ratio, the scenes in order, and the look:
Make a 20-second 1080x1920 video. Scene 1: the headline "Ship faster" slides up over a dark background. Scene 2: three feature cards appear one after another. Scene 3: the logo and the URL. Use Inter, white text, one accent colour.
Then change one thing at a time while watching the Studio preview: "slow the card entrances down", "hold the logo for two more seconds", "add a soft whoosh on each card". Claude edits the component and the preview reloads.
When the video looks right, ask Claude to render it, or run the render yourself. The output lands in the project's out/ folder by default.
Skills from other authors
Several community skills build on Remotion for particular jobs:
- Video Shotcraft turns a product's web pages into a promo video with camera moves and beat-synced cuts.
- Remotion Motion Graphics applies strict motion rules, such as eased springs and staggered entrances.
- Claude Code Video Toolkit adds voiceover, music, screen recordings and FFmpeg around a Remotion project.
- Stitch Remotion makes walkthrough videos of Google Stitch projects, with transitions, zooms and text overlays.
Read each skill's own documentation before installing it, as you would with any code you run.
The licence
Remotion is source-available, not open source. Its licence lets these groups use it for free, including for commercial videos:
- individuals
- for-profit organisations with up to three employees
- non-profit and not-for-profit organisations
- anyone evaluating Remotion who is not yet using it commercially
Any other for-profit company needs a company licence, sold at remotion.pro. The licence file notes that the terms change slightly with Remotion 5.0, so check the current version before you rely on it.
If the licence is a problem, Hyperframes is an Apache 2.0 alternative built on the same idea. The two are compared in Hyperframes vs Remotion.
Where to go next
- For the wider question of what Claude can and cannot do with video, read Can Claude make videos?.
- Browse every video and media skill in the directory.
Questions people ask
Can Claude Code make videos with Remotion?
Yes. Claude Code writes the React components that make up a Remotion video, and Remotion renders them to an MP4 file. Claude does not produce the video itself; it writes code, and Remotion turns that code into frames.
How do I add the Remotion skills to Claude Code?
Inside a Remotion project, run npx remotion skills add. In any other folder, run npx skills add remotion-dev/skills. New projects created with Remotion's own setup command also offer to add them.
Is Remotion free?
Remotion is free for individuals, for-profit companies with up to three employees, non-profits, and anyone evaluating it before commercial use. Larger for-profit companies need a company licence from remotion.pro. Remotion's licence file notes that the terms change slightly with Remotion 5.0.
Do I need to know React?
Not to get a first video. Claude writes the components. You will read React code when you want precise changes, so some familiarity helps once you go past prompting.
What is the difference between Remotion and Hyperframes?
Both render video with a headless browser and FFmpeg. Remotion videos are React components; Hyperframes videos are plain HTML files with timing attributes. Remotion is older and has more examples; Hyperframes is Apache 2.0 licensed with no company tier.