Claude Code + Remotion: How to Make Videos From Prompts

How Claude Code and Remotion make a video together

A Claude Code Remotion setup splits the job in two: Remotion draws and renders the frames, and Claude Code writes the code that says what to draw. You describe the video. Claude turns the description into files. Remotion turns the files into an MP4. When people look for a Remotion AI video generator, this pairing is usually what they end up with.

Remotion’s own summary of the idea is short. It hands you a frame number and a blank canvas, and you draw on it with React. Content that changes from one frame to the next becomes an animation. The first frame is 0, and the last is the length in frames minus one.

The unit you render is a composition. Remotion’s docs define it as five things:

• a React component
• the canvas width and height
• a frames-per-second value
• a duration in frames
• an id you use to pick it at render time

That structure is why a coding agent fits so well. Everything that decides the video sits in text files: scene components, timing numbers, colours and fonts. Claude Code reads files, edits them and runs commands, so it can write a scene, start the preview and render the result without you touching the code. Remotion’s documentation names Claude Code among the coding agents it works well with, and its docs pages are served as Markdown to agents that ask, so a docs link you paste gives Claude clean reference text.

For the frame-by-frame mechanics behind any code-generated video, read how AI renders motion graphics. This guide stays practical.

How to set up a Remotion project for Claude Code

You need Node.js, Claude Code and a project folder created with Remotion’s starter command. Remotion’s guide notes that most coding agents need a paid subscription, and Anthropic’s docs say most Claude Code surfaces need a Claude subscription or an Anthropic Console account. On a Mac, Remotion’s installation page requires macOS 15 or later.

These commands come from Remotion’s guide to prompting videos with coding agents:

npx create-video --yes --blank my-video
cd my-video
npx remotion skills add
npm run dev

Here is what each line does:

• npx create-video --yes --blank my-video creates a project from the Blank template in a folder called my-video.
• cd my-video moves into that folder.
• npx remotion skills add installs Remotion’s Agent Skills, instruction files that give Claude current Remotion guidance. Remotion agent skills covers what they contain and the other ways to install them.
• npm run dev starts Remotion Studio, the preview you watch while Claude works.

Then open a second terminal window, go into the same folder and start Claude Code with claude. Leave the first window running.

If you would rather start from one of the Remotion templates than from a blank canvas, run npx create-video@latest with no flags. The wizard asks for a package manager, a template and whether to install the skills. The gallery includes Hello World, an audiogram for podcasts, word-by-word animated captions, a 3D starter and a prompt-to-video starter. A few templates are paid.

How to prompt, preview and render

Prompt Claude with a short brief, watch the result in Studio, and render only when the timing looks right. That loop is the whole workflow.

Write a brief, not a wish. Remotion animations are built from numbers, so give Claude the ones that matter: frame size, frame rate, length, scene order, the exact on-screen text, colours and fonts. For example:

Make a 1080×1920 composition at 30 fps, 8 seconds long.
Scene 1 (0–3 s): the headline "Ship it Friday" slides up and settles.
Scene 2 (3–8 s): three bullet points appear one by one, 0.6 s apart.
Background #0F172A, text white, accent #38BDF8, font Inter.
Use a 15-frame fade between the scenes. Open the preview; don't render yet.

How to write a video prompt Claude can follow breaks a brief like this into its parts.

Transitions come from a package. Remotion transitions live in @remotion/transitions, which the docs add with npx remotion add @remotion/transitions. Its <TransitionSeries> component places a transition between two scenes. Both scenes render while the transition plays, so the total gets shorter: in the docs’ example, scenes of 40 and 60 frames joined by a 30-frame transition last 70 frames, not 100. Expect Claude to adjust scene lengths when you add one.

Preview in Remotion Studio. Studio is the editor that opens with npx remotion studio, and npm run dev starts it in the regular templates. It plays your compositions back so you can check timing before anything is rendered. Studio can also write some visual edits back into the code: where the code allows it, dragging an outlined element moves it, dragging its edges scales it and dragging its corners rotates it. Nudge a position by hand, then keep prompting Claude for the rest.

Render the MP4. Click Render in Studio, or ask Claude to run the CLI:

npx remotion render <composition-id>

Leave out the composition ID and Remotion shows a picker. Leave out the output path and the file lands in the project’s out folder. Behind the scenes, Remotion installs Chrome Headless Shell into node_modules to draw the frames, and its encoding is backed by FFmpeg. H.264 is the default among six video codecs.

Remotion versus ffmpeg editing of real footage

Remotion is strongest when the video is designed, and an ffmpeg pipeline is strongest when the video is filmed. Claude Code can drive both, and both produce code-generated videos, but they start from opposite ends.

Remotion video editing can include footage. Its <Video> component from @remotion/media embeds a file from the project’s public folder, and a trimBefore prop skips the opening seconds, so a clip of you can sit inside a designed layout. Remotion can also export a transparent ProRes file to lay over footage in a conventional editing app:

npx remotion render --image-format=png --pixel-format=yuva444p10le --codec=prores --prores-profile=4444

The free effect prompts on this site work from the other end. A setup step has Claude install ffmpeg, transcribe your video into word-level timestamps and cut a person mask for every frame. Python scripts then change your actual footage frame by frame: a punch-in on a key word, or paper headlines stuck to the wall behind your head. Those effects depend on knowing where you are in each frame and when you said each word. That is a footage problem, not a layout problem.

Many projects use two rows. Build an intro card or an explainer scene in Remotion, then handle cuts, captions and effects on the filmed part with ffmpeg.

What Remotion’s license says

Remotion is free for individuals and small companies, while larger for-profit companies need a paid Company License. This summary reflects the license file in Remotion’s GitHub repository as read on October 21, 2026.

You may use Remotion for free if you are:

• an individual
• a for-profit organization with up to 3 employees
• a non-profit or not-for-profit organization
• evaluating Remotion and not yet using it commercially

Free use covers commercial and non-commercial creation of videos and images, and you may modify the code for your own use. You may not sell, rent or license your own derivative of Remotion. Any organization outside the free group needs a Company License, which also brings prioritized support; the license links to Remotion’s own site for prices. The file also says the license will change slightly in Remotion 5.0, so read it again before you commit a client project. The @remotion/transitions package page lists the same Remotion License.

Claude Code is billed separately, through your Claude plan or API usage.

Where to start

Start with one short composition you could describe in five lines. A six-second title card in your own colours is enough to learn the loop: prompt, watch in Studio, write two or three notes, render.

Then follow the route that matches your videos:

• Designed videos such as promos, explainers and product scenes: stay in Remotion. The motion design prompts shelf is written for this code-first way of working.
• Talking-head videos: run the free setup prompt in a new folder, then try Digital Zoom, the simplest of the free effects.
• A full editing style on your own footage: the AI Video Effects are editing styles packaged as Claude Code skills that cut, caption and add graphics to your recording.