Remotion Claude Code: from an empty folder to a rendered MP4

Create the project with npx create-video and pick the Blank template. The Remotion docs for Claude Code give this exact command, which skips the prompts and avoids Tailwind:

npx create-video --yes --blank --no-tailwind my-video
cd my-video

A Remotion project is a normal Node.js project. Two ideas are worth knowing before you prompt anything. First, a composition is "something you can render": a React component plus an id, width, height, fps and durationInFrames. Second, compositions are registered in src/Root.tsx, like this:

<Composition
  id="MyComposition"
  durationInFrames={150}
  fps={30}
  width={1920}
  height={1080}
  component={MyComposition}
/>

That example is 150 frames at 30 fps, so a 5-second video at 1920 by 1080. Duration is always frames divided by fps, which is the first thing to check when a video comes out too short or too long.

Remotion skills are the official instructions that teach a coding agent how to write Remotion code correctly, and you add them from inside the project folder. Remotion's skills page gives npx skills add remotion-dev/skills, and the Claude Code page shows npx remotion skills add; both install the Remotion Agent Skills.

npx skills add remotion-dev/skills

According to the docs, the skills cover project setup, React markup (animations, layouts, typography, media, audio and timing), previewing and rendering in Studio, captions, map animations, and more. Supported agents include Claude Code, Codex, Kimi Code and Cursor. Without the skills, Claude Code still writes code, but it is more likely to use patterns Remotion does not expect, such as CSS animations that do not follow the video frame.

Start the preview in one terminal so you can watch changes as they land. The Claude Code page uses npm run dev for this:

npm run dev

The best Claude Code prompts for Remotion state the format, the length and a scene list with timings. Open a second terminal, cd my-video, run claude, and try one of these.

1. A scene list with timings

"Create a 15-second vertical video, 1080 by 1920 at 30 fps, for a coffee subscription. Scene 1 (0 to 3 s): the headline 'Fresh beans, every Monday' on a dark background. Scene 2 (3 to 9 s): three benefits appear one at a time. Scene 3 (9 to 15 s): the call to action 'Start your box'. Register it as a composition with the id CoffeeAd."

Why it works: seconds map directly to durationInFrames, each scene has a start and an end, and the composition id is fixed so you can render it by name later.

2. Kinetic type

"Animate this sentence as kinetic typography: one word at a time, each word springs in from below, the key word is larger and uses the accent colour. Keep every word on screen for at least 12 frames and never let two lines overlap."

Why it works: it names the motion (spring), the hierarchy (key word larger) and a hard rule in frames, which gives Claude something checkable rather than a vague "make it dynamic".

3. A chart that counts up

"Add a bar chart with four bars for these values: 12, 28, 45, 63. The bars grow from zero over 40 frames, staggered by 6 frames, and the number above each bar counts up to its value in sync. Use the same font as the headline."

Why it works: you supply the real data, the animation length and the stagger, so the result is driven by the current frame instead of by guesswork.

A general rule for all three: change one thing per prompt after the first draft. If you ask for five fixes at once, it is hard to tell which one broke the timing.

Remotion Studio is the browser preview where you scrub the timeline and check every scene before rendering. The Claude Code page starts it with npm run dev, and you can also start it directly with npx remotion studio.

npx remotion studio

The studio command accepts options including --port (choose the port), --no-open (do not open a browser automatically) and --props (pass props to a composition as JSON). Leave it running while Claude Code edits files, and the preview updates as the code changes.

What to check in the Studio, in this order:

1. Does the video end where you expect? If not, compare durationInFrames and fps.
2. Does any text overlap or run off the canvas at the size you chose?
3. Do scene changes land when you asked for them? Scrub to the exact frame.

Then tell Claude Code what you saw, using frames or seconds: "the headline is still on screen at frame 95, it should leave at frame 90". Specific feedback converges faster than general complaints.

You render a finished composition to MP4 with npx remotion render, followed by the composition id and an output path. The documented syntax is npx remotion render <entry-point|serve-url>? <composition-id> <output-location>, where the entry point is optional and media goes to the out folder if you give no location.

npx remotion render MyComposition out/video.mp4

The render page documents these flags, among others:

• --codec: the output format. The default is h264, the usual choice for MP4.
• --crf: the Constant Rate Factor, for trading quality against file size.
• --concurrency: how many frames are rendered in parallel.
• --scale: scales the output frames by a factor greater than 0 and at most 16 (default 1).
• --frames: render only some frames, for example 0-99, which is handy for a quick check.
• --props: pass props to the composition as inline JSON or a file.

npx remotion render MyComposition out/video.mp4 --codec h264 --concurrency 4

Use the id you gave the composition in src/Root.tsx, not the file name. If you leave the id out, the CLI lets you pick a composition.

Most problems come from fonts, from timing maths and from licensing, and each has a documented fix or a clear check.

Fonts look wrong or flash

Load fonts with Remotion's own helpers so the render waits for them. The fonts page documents @remotion/google-fonts for Google Fonts and @remotion/fonts for local font files. Ask Claude Code to use one of these instead of a plain stylesheet link.

import { loadFont } from "@remotion/google-fonts/TitanOne";

const { fontFamily } = loadFont("normal", {
  weights: ["400"],
  subsets: ["latin"],
});

The video is the wrong length

Length is durationInFrames divided by fps. A 15-second video at 30 fps is 450 frames. Check both numbers in src/Root.tsx.

Rendering feels slow

Every frame is drawn, so longer and heavier compositions take longer. Render a short range with --frames to test a change, and adjust --concurrency to match your machine. Run the full render once you are happy with the preview.

Do I need a Remotion license?

Check before you use the video commercially at a company. Remotion's license covers individuals, for-profit organizations with up to 3 employees and non-profits, including commercial use. For-profit companies with more than 3 employees need a Company License.

If you want the finished MP4 more than you want a Remotion project, skip the setup. Opus55Vid runs the same idea for you: you write one sentence, Claude Opus 5.5 writes the Remotion code, and you download a 1080p MP4 with sound effects timed to the animation (no background music). You need no Claude account, no Node.js and no terminal.

See what an Opus 5.5 video looks like, or compare the two routes in the Remotion AI overview. If you enjoy the code, keep the workflow above; it gives you full control over every frame.