Claude Code + Remotion for Motion Graphics: What It's Great At, and What It Actually Takes

In January 2026, Remotion released Agent Skills for Claude Code. The pitch: describe a video in plain English, and Claude writes the code that renders it. Demos of it reportedly pulled around 13 million views on X in a week, and "Claude Code Remotion" has been a search term ever since.

It deserves the hype. It's also one of the most misunderstood tools in creator circles right now, because the demos show the ten-second result and skip the two hours around it.

So here's the whole thing — honestly, step by step — for the job most creators actually have: putting one motion graphic on a video of yourself talking.

What Remotion and Claude Code actually are

Remotion is a framework for making videos with code. A video is a React application. Every frame is a web page, rendered by a headless Chrome browser, captured as an image, and stitched into an MP4 by FFmpeg.

Claude Code is an AI coding agent that runs in your terminal. It reads and writes files in a project folder and runs commands on your machine.

Agent Skills are instructions that teach Claude Code how Remotion works, so it writes Remotion code that runs.

Put together: you describe an animation, Claude writes a React component, Remotion renders it. Nothing about it is fake. What's missing from the demos is everything that has to be true before that sentence works.

What you need before you start

• A paid Claude plan. Claude Code starts at Pro ($20/month). Video work burns through usage quickly, and people doing this regularly tend to end up on Max at $100 or $200/month.
• Node.js installed on your computer.
• A terminal, and enough comfort with it to run commands, read errors and change directories.
• A code editor is strongly recommended, because you will end up reading the code.
• A Remotion license, if you're a business. Free for individuals and companies of up to three people. Above that, $25 per seat per month.

Step 1: Set up the project

From Remotion's own guide, in a terminal:

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

That last command starts Remotion Studio, a preview app in your browser. Then, in a second terminal window:

cd my-video
claude

You now have two terminals, a browser preview and an AI agent. You haven't made anything yet.

Step 2: Bring in your talking-head video

Your footage goes in the project's public/ folder, and gets loaded into a composition — Remotion's name for a video. Compositions are registered with an exact width, height, frame rate and length in frames:

<Composition
  id="MyShort"
  component={MyShort}
  durationInFrames={1800} // 60 seconds × 30 fps
  fps={30}
  width={1080}
  height={1920}
/>

Get the frame rate wrong — your phone may have shot at 24, 29.97 or 60, not 30 — and every graphic you time later drifts. Claude can write this for you, but you have to know to check.

Step 3: Get word-level timestamps

This is the step no demo shows. To make a graphic appear on a word, you need to know the exact moment you said that word.

Remotion doesn't know what you said. You need a transcript with word-level timestamps. Remotion's route for this is Whisper, via a helper package that downloads and compiles whisper.cpp on your machine and then downloads a speech model — hundreds of megabytes to a few gigabytes depending on accuracy. Whisper also expects 16 kHz WAV audio, so your video's audio has to be extracted and converted with FFmpeg first.

One detail that trips people up constantly: every @remotion/* package must be on exactly the same version as Remotion itself. Install the helper at a mismatched version and nothing works, with an error that doesn't say why.

At the end of this step you have a JSON file of words and millisecond timestamps.

Step 4: Turn milliseconds into frames

Remotion doesn't think in seconds. It thinks in frames. You said "twelve thousand four hundred dollars" at 12.4 seconds; at 30 fps that's frame 372. Every graphic's start, end and animation curve is expressed in frames.

Here's roughly what a single counting-up number looks like:

export const MyShort = () => (
  <AbsoluteFill>
    <OffthreadVideo src={staticFile("talking-head.mp4")} />
    <Sequence from={372} durationInFrames={90}>
      <RevenueCounter target={12400} />
    </Sequence>
  </AbsoluteFill>
)

const RevenueCounter = ({ target }: { target: number }) => {
  const frame = useCurrentFrame()
  const { fps } = useVideoConfig()
  const progress = spring({ frame, fps, config: { damping: 200 } })
  const value = Math.round(interpolate(progress, [0, 1], [0, target]))
  return (
    <div style={{ position: "absolute", top: 380, left: 80, fontSize: 96, fontWeight: 800, color: "white" }}>
      ${value.toLocaleString()}
    </div>
  )
}

That's one graphic: a number with no background, no chart, no brand font and no exit animation. Claude writes this happily. You still need to understand it well enough to know when it's wrong.

Step 5: Place it so it doesn't cover you

Look at top: 380, left: 80 above. Those are pixel coordinates, picked by hand.

Remotion has no idea where your face is. It doesn't know where your hands move, where your burned-in captions sit, or where TikTok puts its like and share buttons. If you lean left at second 14, the graphic is now on your cheek, and the only way to find out is to scrub through the preview and check.

You can describe the problem to Claude, but Claude doesn't watch your Studio preview. It only sees a frame if it renders a still and inspects it, or you screenshot one and hand it over — frame by frame, moment by moment. So in practice: scrub, screenshot, describe, re-prompt, re-check. (Where a graphic should go on a vertical frame is its own topic — see how to add motion graphics to a talking-head video.)

Step 6: Make it look designed, not default

The code above renders white text in the default browser font. To look like your brand, you need to load your fonts (via Remotion's font packages or local font files), set your exact colours, design a container, and tune easing so the motion feels intentional rather than mechanical.

If you want your real website or app screen in the graphic, someone has to rebuild it in React — or you screenshot it and lose the animation.

Step 7: Iterate

Every change is a loop: prompt Claude → it edits a .tsx file → the Studio hot-reloads → you scrub to the right frame → you check it on a phone-sized preview → you prompt again. When something breaks — a TypeScript error, a missing import, a version mismatch — you read the error and decide whether to fix it yourself or ask Claude to.

Long sessions also run into the practical limits of any coding agent: usage caps on your plan, and a context that fills up as the project grows.

Step 8: Render

npx remotion render MyShort out/video.mp4

Remotion downloads a Chrome Headless Shell into your project, renders every frame as a web page, and encodes them with FFmpeg. A 60-second 1080×1920 short is 1,800 separate page renders, on your laptop, with the fan running. For anything heavier, Remotion Lambda renders in the cloud — which means an AWS account, IAM permissions and a deployed Lambda function.

Then you watch the MP4, notice one graphic lands a beat late, and go back to Step 4.

So who is this for?

Developers. Genuinely. If you already live in a terminal and write React, Claude Code + Remotion is one of the most powerful video tools ever made: infinitely flexible, programmable, and free for small teams. You can build templates, automate hundreds of videos from data, and version-control your motion design.

Motion designers who code, for the same reasons.

Creators who just want a graphic on their video? Count the steps above. Setting up a JavaScript project, transcribing audio into word timestamps, converting milliseconds to frames, positioning elements by pixel, managing package versions and rendering headless Chrome — to put a number on screen while you say it.

The version without any of that

That gap is exactly what Rescroll AI Motion Graphics exists for. Every step above still happens — it just isn't your job:

• No setup. It runs in Chrome or Edge. Drop your video in — any aspect ratio.
• Timing is automatic. Your video is transcribed word by word, so a graphic lands on the exact word. No milliseconds, no frames.
• Placement is automatic. Rescroll's AI reasons about your actual footage before it designs anything, keeping each graphic clear of your face, your hands, your captions and the app buttons.
• Design matches your brand. Attach a screenshot, a saved web page, your logo or font files, and it uses the real colours, type and spacing. Name a product and it rebuilds the real screen.
• It checks itself. It renders frames, looks at them and fixes what's off before you see anything — and shows you what it checked.
• Changes are a sentence. "Bigger, later, a different colour" — say it in the chat and the graphic is rebuilt.
• Rendering is ours. Graphics are drawn at 4K on our servers, and you get a finished MP4 with your original audio. You can close the tab.

Above: a founder says his product just launched. His real site slides in as a browser window, scrolls to pricing, zooms in on "one plan, twenty bucks", and a cursor clicks Get started. One description, one attached page.

Frequently asked questions

Can Claude Code + Remotion do things Rescroll can't? Yes. Horizontal video, fully data-driven batch videos, custom programmatic templates, anything you can write in React. If you need those and you can code, it's a great choice.

Can Rescroll do things Claude Code + Remotion can't? Not in principle — code can do anything. In practice, Rescroll does the parts that are hardest to do by hand: reading your footage to place graphics around you, timing to your words, checking its own frames, and rendering in the cloud.

Do I need to know how to code to use Remotion with Claude Code? You can start without it, and many people do. You'll need it the first time something breaks, and something always does.

How long does it take? For a developer who's done it before, one polished graphic on a talking-head video is often an hour or more, including transcription, timing, placement and a render. The first time, budget an afternoon.

For more on choosing between tools, see the best AI motion graphics generators in 2026.