Claude Code can build Remotion videos from a plain English prompt once the skill is installed and the prompt reads like a shot list. See the install commands, three prompt examples, React code to copy, a footage workflow, render fixes, and license costs.
Typing one paragraph and getting back a rendered MP4 sounds like a stunt until you watch it happen. With the Claude Code Remotion skill, you describe a scene in plain English, the agent writes React components, and Remotion turns every frame into a real video file. No timeline to drag. No export dialog hiding the one setting you need. This article shows the install, the prompts that work, code you can copy, and the traps that eat an afternoon.
Whether you run a SaaS that needs a launch clip, a data team that wants animated charts, or a solo creator tired of re-editing the same intro, making videos with code gives you something a timeline editor never will: a video that is a plain text file you can version, review, and re-render in a minute.
Remotion is a framework that renders video from React code. You write components, Remotion plays them frame by frame in a headless browser, captures each frame, and stitches the result into MP4, WebM, GIF, or a still image. Anything a web page can draw, such as SVG, CSS layouts, charts, web fonts, and canvas, becomes video material.
The Remotion docs put the central idea in one line: a video is a function of images over time. Your component reads the current frame number and returns what that frame should look like. Change a value from frame to frame and you have an animation.
Every composition needs four numbers:
The first frame is 0 and the last frame is durationInFrames - 1. A 5 second clip at 30 fps is 150 frames. That arithmetic matters later, because it is the first thing a vague prompt gets wrong.
Claude Code already writes solid React. What it does not know out of the box are Remotion's house rules. Animation must be driven by useCurrentFrame(), because CSS transitions do not render deterministically. Local media should be loaded with staticFile(). Video clips belong in <OffthreadVideo>, not a plain <video> tag. Miss one of these and the preview looks fine while the final render breaks.
The skill is a bundle of instructions the agent loads when it detects a video task. It spans Remotion best practices, project and composition creation, launching Studio, rendering, and extras such as captions and package upgrades. The agent stops guessing and starts following the framework's conventions.
💡 The skill is guidance, not a renderer. Your project, your Node.js install, and Remotion itself still produce the video. The skill only keeps the agent from writing code that fights the framework.
You need Node.js, a terminal, and Claude Code, which requires a paid Anthropic plan or API credits. Everything else installs from npm.
npx create-video --yes --blank my-video
cd my-video
npm install
The --blank flag gives you a minimal project instead of a demo, so the agent has nothing to untangle before it starts.
From inside the project folder:
npx remotion skills add
Two alternatives exist. The skills package installs with npx skills add remotion-dev/skills, and the official Claude Code plugin installs with these two commands:
claude plugin marketplace add remotion-dev/claude-code-plugin
claude plugin install remotion@remotion
Open two terminals in the project folder. Keep the preview running in the first and start the agent in the second:
# terminal 1
npm run dev
# terminal 2
claude
Studio opens a browser preview that reloads each time the agent saves a file. Start a fresh Claude Code session after installing, otherwise the skill may not load. The skill shows up as slash commands: /remotion-create, /remotion-studio, /remotion-render, /remotion-docs, and /remotion-best-practices, which wraps all the others when you are unsure which one applies.
Vague prompts produce generic videos. The prompts that work read like a director's shot list: duration, dimensions, frame rate, scene order with timing, exact text, asset paths, colors, fonts, motion style, and a short list of things to avoid.
| Ingredient | Weak version | Strong version |
|---|---|---|
| Length | "a short video" | "15 seconds at 30 fps" |
| Size | "social format" | "1080 by 1920, vertical" |
| Scenes | "intro and demo" | "2s title, 8s demo, 5s call to action" |
| Text | "a headline" | "Notes, finally fast" |
| Motion | "cool animations" | "restrained spring entrances, no bounce" |
| Limits | nothing | "no stock music, one font family" |
Say what to avoid. "No gradients, no emoji, no more than two colors" prevents more rework than any positive instruction.
This prompt is modeled on the one in Tella's walkthrough:
/remotion-create
Create a 15-second, 1920x1080, 30 fps launch video for a note-taking app.
Three scenes: a 2-second title card, an 8-second product demo section,
and a 5-second call to action. Dark background, large readable type,
restrained spring animations. One file per scene under src/scenes,
all text passed in as props.
What comes back is predictable: three scene components, a root composition of 450 frames, and a defaultProps object holding the copy. Preview it in Studio, then adjust with short follow-ups such as "make the title enter 10 frames later" or "slow the spring on the call to action".
Data videos are where code beats a timeline editor, because the numbers are real input rather than hand-drawn bars.
Read data/sales.json and build a 10-second, 1920x1080 bar chart at 30 fps.
Bars grow from zero with a spring, staggered by 4 frames each.
Show the value above each bar once it stops moving. Hold the final state
for 1 second. White background, one accent color, no gridlines.
Swap the JSON file and render again, and you have next month's report video. Staggering is a one-line idea for an agent: the delay is the bar index times four frames.
The skill includes guidance on captions, so a prompt like this works well: "Add word-by-word captions to public/clips/interview.mp4 using captions.json. Highlight the active word in yellow and keep captions inside the lower third." Give the agent real word timings in a file rather than asking it to invent them. Invented timings drift out of sync within seconds.
Even when the agent writes everything, you should be able to read it. Three patterns show up in nearly every project.
import {AbsoluteFill, interpolate, spring, useCurrentFrame, useVideoConfig} from 'remotion';
export const TitleCard: React.FC<{title: string}> = ({title}) => {
const frame = useCurrentFrame();
const {fps} = useVideoConfig();
const enter = spring({frame, fps, config: {damping: 200}});
const opacity = interpolate(frame, [0, 15], [0, 1], {extrapolateRight: 'clamp'});
return (
<AbsoluteFill style={{backgroundColor: '#0f172a', justifyContent: 'center', alignItems: 'center'}}>
<h1 style={{color: 'white', fontSize: 96, opacity, marginTop: (1 - enter) * 60}}>
{title}
</h1>
</AbsoluteFill>
);
};
A damping of 200 gives a smooth entrance with no bounce. interpolate maps frames 0 to 15 onto opacity 0 to 1, and extrapolateRight: 'clamp' stops the value from running past 1 afterward.
import {AbsoluteFill, Sequence} from 'remotion';
export const LaunchVideo: React.FC = () => (
<AbsoluteFill>
<Sequence from={0} durationInFrames={60}>
<TitleCard title="Notes, finally fast" />
</Sequence>
<Sequence from={60} durationInFrames={240}>
<ProductDemo />
</Sequence>
<Sequence from={300} durationInFrames={150}>
<CallToAction />
</Sequence>
</AbsoluteFill>
);
Inside a Sequence, useCurrentFrame() restarts at zero, so every scene can be written and tested alone. At 30 fps these blocks run 2, 8, and 5 seconds, which adds up to the 450 frames of the launch prompt.
import {Composition} from 'remotion';
import {TitleCard} from './TitleCard';
export const Root: React.FC = () => (
<Composition
id="TitleCard"
component={TitleCard}
durationInFrames={90}
fps={30}
width={1920}
height={1080}
defaultProps={{title: 'Hello from code'}}
/>
);
Now override the text at render time and loop over a list:
for name in "Spring sale" "Black Friday" "New arrivals"; do
npx remotion render src/index.ts TitleCard "out/${name// /-}.mp4" --props="{\"title\":\"$name\"}"
done
Three videos from one component, no editor opened.
💡 Tell the agent up front: "Every string, color, and number goes into props." It costs nothing and makes batch variants, A/B tests, and translations trivial later.
Remotion animates what you give it: text, shapes, charts, images, and clips. For real-looking footage or a sharper storyboard, you bring material in from outside. PicassoIA handles both ends, with a Claude Sonnet 5 page for drafting scene specs and code, and a Seedance 2.0 page for generating clips.
high when you need exact frame counts across many scenes, and low for quick rewrites. Leave max tokens at the 8192 default for long specs./remotion-create.The model also accepts an image, so a screenshot of your product interface can feed the storyboard directly.
16:9 for 1920x1080, or 9:16 for vertical.720p default.public/clips/ inside your Remotion project.To keep a brand look consistent, upload a still as the first frame. Seedance 2.0 treats it as the opening image of the clip.
💡 Generate one shot per clip and cut them together in Remotion. Short clips with a clear camera move beat a single long clip with five ideas.
import {AbsoluteFill, OffthreadVideo, staticFile} from 'remotion';
export const HarborShot: React.FC = () => (
<AbsoluteFill>
<OffthreadVideo src={staticFile('clips/harbor.mp4')} />
</AbsoluteFill>
);
Then layer text, lower thirds, and captions over the footage with normal React. For polish outside Remotion, these pages fit the workflow:
| Task | Page |
|---|---|
| Voiceover from a script | Speech 2.8 HD |
| Cut a clip to exact length | Trim Video |
| Join rendered scenes | Video Merge |
| Swap or mix a soundtrack | Video Audio Merge |
| Burn captions into a render | Autocaption |
Studio is for iteration and the command line is for output. These are the commands you will use most:
| Goal | Command |
|---|---|
| Live preview | npm run dev |
| Render an MP4 | npx remotion render src/index.ts LaunchVideo out/launch.mp4 |
| Export one still | npx remotion still src/index.ts LaunchVideo out/frame.png --frame=60 |
| Override props | --props='{"title":"Hello"}' |
| Lower memory use | --concurrency=2 |
You can also type /remotion-render and let the agent run the render for you. When something breaks, these are the five failures you will meet first:
npm install first, then check the terminal for a Node.js version or port conflict.Sequence.When the agent keeps guessing, /remotion-docs hands it the official documentation to check against.
Remotion's license decides whether this is free for you. Per the project's license page, it is free for individuals, for-profit organizations with up to 3 employees, non-profits, and anyone evaluating it. Larger companies need a company license. At the time of writing, Remotion lists these tiers:
| Plan | Who it fits | Price |
|---|---|---|
| Free | Individuals, up to 3 employees, non-profits | $0 |
| Creators | 4+ people making videos by hand | $25 per seat per month |
| Automators | Apps that render automatically | $0.01 per render, $100 monthly minimum |
| Enterprise | Custom terms and support | From $500 per month |
Check the current pricing page before you ship, since terms change. Other costs are Claude Code usage, render time on your own machine, and credits for any AI footage.
The limits are real too. This workflow shines for motion graphics, explainers, data videos, captions, and templated variants. It is a poor fit for multicam live-action editing, where filmed or generated footage should carry the picture and Remotion should only add the graphics layer. And the agent is not deterministic: two runs of the same prompt give two different layouts, so always check in Studio before you render.
Start small. Create the project, add the skill, and ask for a five second title card with your own text. Once it renders, grow it: add a scene, pass the copy in as props, then loop over a list for ten variants.
Then bring in outside material. Generate a looping background with Seedance 2.0, record a script with Speech 2.8 HD, and let Remotion assemble everything with exact timing. Prefer stills? Create your own images and scene art on Picasso IA through the full model list and drop them into public/ as backgrounds for your compositions. Experiment, break things, and re-render. A video that lives in code costs a minute to fix, so try the version you would never have attempted on a timeline.
