AI Motion Graphics with Claude Code and Remotion: From Install to Your First MP4

How code-based motion graphics differ from AI video generation

A video generation model takes your prompt and draws every pixel itself. The result can look great. The trouble starts when you want to change one word on screen or one number on a bar chart. Generate again, and other parts of the frame change too.

Code-based motion graphics work the other way around. The AI writes code that says where a piece of text sits on a given frame and how transparent it is. A renderer runs that code once per frame, captures each frame as an image, and stitches the frames into a video file. Anthropic's help article describes Claude Motion the same way: it animates the text, charts, shapes, and images in your request with code. Because each animation is code, you can change one detail, such as a word, a number, or a timing, and the rest stays the same. The same article says Claude Motion doesn't use a video generation model, so it doesn't create realistic footage or people.

Remotion does this job in React. In the Remotion fundamentals docs, a composition is "the combination of a React component and video metadata." The metadata is four values: width and height in pixels, frames per second (fps), and total length in frames (durationInFrames). Frame numbering starts at 0, so the last frame is durationInFrames - 1. Your component receives the current frame number and draws what the screen looks like at that moment. In effect, the whole video becomes one function: give it a frame number, and it returns a picture.

The workflow has five stages: write a scene table, have Claude Code write the scene code, preview it in Remotion Studio, render an MP4, and check the file. The editing loop in the middle usually runs several times.

Who can use Claude Motion

Anthropic announced Claude Motion on October 8, 2026, alongside Claude Dashboards. As of November 6, 2026, the help article lists it as a beta feature on Team and Enterprise plans. It is on by default for Team. On Enterprise, it stays off until an owner turns it on. The switch lives in Organization settings > Artifacts, and Enterprise owners can also limit it to specific groups with custom roles. In a chat, typing /motion in the message box brings up the Motion option. Finished animations export as MP4 from the "Export" button. Motion counts toward your plan's usage limits, and the help article says longer or more complex animations use more of your limit than a typical message.

Claude's pricing page shows Claude Motion (beta) as not included on Free, Pro, Max, and Ultra. If you work solo on one of those plans, expect the option not to appear. That doesn't block you, though. What Claude Motion does is write motion as code and render it to MP4, and you can do the same thing with Claude Code and an open video framework. The difference is where the work happens: inside the claude.ai interface, or on your own computer with developer tools and a terminal.

Four paths to choose from

Making video with code gets easier to plan if you sort the options by what you need to move on screen. The four paths below are this guide's own grouping. The facts about each tool come from its official documentation.

In short: text, charts, and logos point to A or B. People on screen point to C. Footage you already have points to D.

For a first project, B is the shortest route. The framework already handles scene splitting, timing math, and render commands, so the AI only has to write scene code. Two tools come up most often within path B.

The Remotion docs say you need "at least Node 16 or Bun 1.0.3." The HyperFrames README lists Node.js 22 or later and FFmpeg, and describes the project as a free, open-source framework that turns HTML, CSS, media, and seekable animations into MP4 videos under the Apache 2.0 license. Its README gives its own plugin commands: claude plugin marketplace add heygen-com/hyperframes and claude plugin install hyperframes@hyperframes. This guide follows Remotion, because its official Claude Code plugin instructions are short and clear.

Remotion license: check whether you qualify for free use

Read the license before you install. Remotion is not free for everyone without conditions. The "Free License" section of LICENSE.md, re-checked on November 6, 2026, lists four groups that qualify:

• an individual
• a for-profit organization with up to 3 employees
• a non-profit or not-for-profit organization
• anyone "evaluating whether Remotion is a good fit, and are not yet using it in a commercial way"

Other for-profit organizations need a "Company License," and the file points to remotion.pro for pricing. On November 6, 2026, the remotion.pro license page described the free tier as "For individuals and companies of up to 3 people" and said a Company License is "Required for collaborations and companies of 4+ people." The same page listed two Company License options: "Remotion for Creators" at $25 per seat per month, and "Remotion for Automators" at $0.01 per render with a $100 monthly minimum. It also mentioned an Enterprise License "Starting at $500 per month." Prices can change, so check that page on the day you buy.

The license FAQ adds two details worth knowing. If you bring in another studio, freelancers, or an agency to help operate Remotion, their headcount counts toward the 4-person threshold together with yours. If you deliver only a finished video file, such as an MP4, and your client never receives the project code or runs Remotion, the client is not a user of Remotion, so their headcount does not count toward yours.

LICENSE.md also says, "In Remotion 5.0, the license will slightly change." The FAQ says the change will affect the license and terms, and that telemetry will become mandatory for "Remotion for Automators" customers. It says telemetry in server-side rendering remains voluntary for Free License users and for companies under the "Remotion for Creators" option. On November 6, 2026, the latest release listed on GitHub was v4.0.541, so that change had not taken effect yet. If you make videos alone for a blog or social media, you likely fall under the individual case. If you use Remotion for company work, or after a major version change, read the license text again at that point.

Step by step: from install to your first MP4

The steps below put the commands from the Remotion and Claude Code docs in order. Commands are copied exactly as the docs show them.

0. What you need

• Node.js: Node 16 or later, or Bun 1.0.3 or later, per the Remotion docs. The same page says macOS 15 (Sequoia) or later is required, and Linux distros need glibc 2.35 or later.
• Claude Code: The Remotion docs note that "Most coding agents require a paid subscription." Claude's pricing page includes Claude Code on Pro, Max, Ultra, Team, and Enterprise, but not on Free. The Claude Code docs also allow signing in with an Anthropic Console account.
• An empty project folder: one folder per video project.

If you still need Claude Code, the official docs list a native installer. On macOS, Linux, or WSL:

curl -fsSL https://claude.ai/install.sh | bash

In Windows PowerShell:

irm https://claude.ai/install.ps1 | iex

After it finishes, open a new terminal and run claude --version. A working install prints a version number.

1. Install the plugin

Run these two lines in your terminal, one after the other.

claude plugin marketplace add remotion-dev/claude-code-plugin
claude plugin install remotion@remotion

Then restart Claude Code. The Remotion docs also describe a route for the Claude desktop app: select Code, open Customize in the sidebar, go to Plugins → Discover, search for "remotion," and add the plugin from remotion-dev/claude-code-plugin. The plugin helps you create and edit Remotion projects, and it includes Remotion Agent Skills.

This plugin comes from outside Anthropic's official marketplace (claude-plugins-official), which is why you add its marketplace first. The Claude Code docs say installing a plugin adds its skills, agents, hooks, and MCP servers to Claude Code on your machine. They also warn: "A plugin can run hooks and MCP servers, so read the pane before you install." Once installed, run claude plugin list in your shell. It prints your plugins with Version, Scope, and Status lines.

2. Create a project

The plugin can set up a project for you. If you'd rather do it yourself, use the commands from the Remotion docs.

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

The last line opens the preview, Remotion Studio. Remotion's coding agents guide recommends keeping that preview running in one terminal, then opening a separate terminal in the same folder and starting claude there. You can watch the preview update as each request lands.

The Agent Skills can also be added on their own with npx skills add remotion-dev/skills. Remotion's skills page says they "define best practices for working in Remotion projects," and suggests the /remotion-best-practices skill as a good default if you aren't sure which one to use.

3. Write a scene table first

If you start with a one-line request, the AI guesses the length, colors, and font sizes. When the result misses, it's also hard to say what to fix. So build a scene table before you prompt. Five columns are enough.

With a table, your request changes from "make a video" to "make it match this table." When you revise, you can point at one cell: "change only the bar color in scene 3."

4. Send the prompt

With the plugin installed, start a new Claude Code session in the folder where you want the video. Then type /remotion:remotion-create followed by a description. The example in the docs is:

/remotion:remotion-create Make a promo video for a record store

For anything more than a quick test, paste the template from the next section and add your scene table.

5. Revise while watching the preview

The first result usually needs work. Ask for one change at a time.

• "The number in scene 2 climbs too fast. Make it rise evenly over 3 seconds."
• "The title text touches the edge of the frame. Give it more margin."
• "Don't use a different transition for each scene. Use one transition throughout."

If you pack several fixes into one sentence, changed and unchanged parts get mixed, and it's hard to spot in the preview what actually moved.

6. Render

When you're happy with it, render to MP4.

npx remotion render

If you don't pass a composition ID, Remotion asks you to select one. Add a name, as in npx remotion render HelloWorld, to render only that composition. If you don't pass an output location, the file goes into the out folder. If you don't pass --codec, it uses the H.264 encoder. To render only part of the video, use --frames: a comma-separated list of frames such as --frames=0,30,60 renders those frames as an image sequence, and ranges such as --frames=0-99,150-199 are inclusive. On Windows shells, the docs say an inline JSON string for --props isn't supported because the shell removes the " character, so pass a file name instead.

7. Check the render

"The render finished" and "the video is fine" are two different claims. Before you even open the file, you can catch three kinds of problems automatically: the spec (resolution, frame rate, duration), blank stretches, and the first and last frames. Replace the file name with the one that actually appeared in your out folder.

ffprobe -v error -select_streams v:0 -show_entries stream=width,height,r_frame_rate,duration -of default=nw=1 out/video.mp4
ffmpeg -i out/video.mp4 -vf blackdetect=d=0.5:pix_th=0.10 -an -f null -
ffmpeg -ss 0 -i out/video.mp4 -frames:v 1 first.png
ffmpeg -sseof -0.1 -i out/video.mp4 -frames:v 1 last.png

The first line prints width, height, frame rate, and duration. The second uses blackdetect, an FFmpeg filter that detects video intervals that are almost completely black. Its defaults are a minimum duration of 2 seconds (d), a picture black ratio of 0.98 (pic_th), and a pixel black threshold of 0.10 (pix_th). With those defaults, short blank gaps slip through, so the command above lowers the minimum to 0.5 seconds. These defaults match both the FFmpeg filter documentation and the built-in help (ffmpeg -h filter=blackdetect) of a local FFmpeg install, checked on November 6, 2026. The third and fourth lines save the first and last frames as images. Two pictures tell you whether the title is already visible on the first frame and whether the ending got cut off.

Prompt template: copy and fill in

Fill in the brackets and paste your scene table. The two lines that matter most are the one that limits numbers and text to what's in the table, and the one that forbids marking unchecked items as passed.

Create one vertical video as a Remotion project.

[Spec]
- Size 1080x1920, 30fps, total length [10] seconds
- Background [white], one accent color only: [teal]
- Font: [a font already in the project]; keep text well away from the frame edges

[Scene table]
(paste your scene / text / motion / length / notes table here)

[Rules]
- Use only the text and numbers in the scene table. Do not invent numbers.
- Use a single transition type throughout.
- No human faces, real people, or logos.

[When you finish]
- Tell me the composition name and the render command.
- Give me a table of the start frame for each scene.
- Mark anything you did not check as "not checked." Do not report it as passed.

Once you have each scene's start frame in a table, later requests like "make scene 2 one second longer" use the same reference point for you and the AI. At 30 frames per second, one second is 30 frames.

Checklist

Before you publish a rendered video, go through these in order.

• Spec: do the width, height, frame rate, and duration from ffprobe match your request?
• First frame: is the title already visible in the first-frame image, rather than a black screen?
• Blank screens: does the blackdetect output show no unintended black stretches?
• Text overflow: do long words stay inside the frame and avoid awkward line breaks? (Check by eye.)
• Numbers: do the numbers on screen match the values in your scene table?
• Last frame: is the full closing line visible in the last-frame image?
• Audio: if you added background music, do you have the rights to use it?
• License: does your situation fall within Remotion's free license?

Why "one prompt and done" doesn't hold up

Social media is full of claims like "one prompt, finished motion graphics." The workflows in the official docs aren't built that way. Remotion's advice to run the preview and the agent side by side assumes you'll watch and revise several times. The plugin ships Agent Skills, which Remotion describes as best practices for working in Remotion projects, so the agent starts out knowing the framework's conventions. The Claude Motion help article also says longer and more complex animations use more of your limit. Narrowing the scope with a scene table and fixing one thing at a time tends to get you there faster and uses less of your plan.

The code the AI writes is still a program that lives in your folder. Take one look at what the render command runs and which files it created. For why AI automation needs checks beyond the instructions themselves, see Instructions leak, code holds (in Korean).

FAQ

Can I use Claude Motion on an individual plan (Pro, Max, Ultra)?

As of November 6, 2026, Anthropic's help article lists Claude Motion as a beta feature on Team and Enterprise plans, and the pricing page marks it as not included on Free, Pro, Max, and Ultra. On an individual plan, you can install the official Remotion plugin in Claude Code and build the same kind of code-driven video. Plan coverage can change, so check the help article before you start.

Is Remotion free?

For some users. LICENSE.md lists individuals, for-profit organizations with up to 3 employees, non-profits, and anyone evaluating it before commercial use as eligible for the free license. Other for-profit organizations need a Company License. The file says the license will change slightly in Remotion 5.0, so re-read it when the major version changes.

Do I need to know how to code?

Claude Code writes the scene code, so you can start without knowing React. You still need to type commands in a terminal, install Node.js, and describe what's wrong while you watch the preview. When a render fails, the fastest fix is usually to paste the exact error message into Claude Code and ask.

Should I pick Remotion or HyperFrames?

Pick Remotion if you want to write scenes in React and follow the official Claude Code plugin guide. Pick HyperFrames if you want to write in HTML and CSS under the Apache 2.0 license, with no headcount conditions. The HyperFrames README lists Node.js 22 or later and FFmpeg as requirements. Both produce MP4 files.

Can this method make videos with people in them?

The code approach suits animating text, charts, shapes, and images, and the Claude Motion help article also says it doesn't create realistic footage or people. If you need a character, generate the character art with an image model and layer text and transitions on top with code. Keeping the face consistent from scene to scene is a separate job: make a character reference image first. The steps are in Make one character sheet first (in Korean).

References

1. Anthropic Help Center. Get started with Claude Motion: beta on Team and Enterprise, on by default for Team, off for Enterprise until an owner enables it (Organization settings > Artifacts), animates text, charts, shapes, and images with code, no video generation model, MP4 export, longer or more complex animations use more of your limit (checked November 6, 2026). support.claude.com
2. Claude. Build live dashboards and animate explainers with Claude: published October 8, 2026, Motion in beta on Team and Enterprise, /motion in the message box, MP4 download (checked November 6, 2026). claude.com
3. Claude. Plans & pricing: Claude Code included on Pro, Max, Ultra, Team, and Enterprise; Claude Motion (beta) listed for Team and Enterprise only (checked November 6, 2026). claude.com
4. Claude Code Docs. Overview: native install commands, claude --version, subscription or Console account (checked November 6, 2026). code.claude.com
5. Claude Code Docs. Install and manage plugins: plugins add skills, agents, hooks, and MCP servers; read the details pane before installing; add non-official marketplaces first; claude plugin list (checked November 6, 2026). code.claude.com
6. Remotion. Claude Code plugin: two install commands, restart, desktop app route, /remotion:remotion-create example, includes Remotion Agent Skills (checked November 6, 2026). remotion.dev
7. Remotion. Prompting videos with coding agents: npx create-video --yes --blank my-video, npx remotion skills add, npm run dev with the agent in a separate terminal, "Most coding agents require a paid subscription" (checked November 6, 2026). remotion.dev
8. Remotion. Agent Skills: npx skills add remotion-dev/skills, /remotion-best-practices (checked November 6, 2026). remotion.dev
9. Remotion. Creating a new project: Node 16 or Bun 1.0.3, macOS 15 or later, glibc 2.35 or later, npx create-video@latest --yes --blank my-video (checked November 6, 2026). remotion.dev
10. Remotion. The fundamentals: composition definition, width, height, fps, durationInFrames, first frame 0 and last frame durationInFrames - 1 (checked November 6, 2026). remotion.dev
11. Remotion. CLI render: composition prompt, out folder default, H.264 default, --frames lists and ranges, Windows --props note (checked November 6, 2026). remotion.dev
12. Remotion. LICENSE.md: Free License eligibility, Company License, "In Remotion 5.0, the license will slightly change" (checked November 6, 2026). github.com
13. Remotion. License pricing page: free for up to 3 people, Company License for 4+, Creators and Automators pricing, Enterprise starting price (checked November 6, 2026). remotion.pro
14. Remotion. License FAQ: headcount, contractors, client work, Remotion 5.0 change (checked November 6, 2026). remotion.dev
15. Remotion. GitHub releases: latest release v4.0.541 (checked November 6, 2026). github.com
16. HeyGen. HyperFrames README: HTML, CSS, media, and animations to MP4, Apache 2.0, Node.js 22+ and FFmpeg, Claude Code plugin commands, agent skills (checked November 6, 2026). github.com
17. FFmpeg. Filters documentation, blackdetect: minimum duration d default 2.0, pic_th default 0.98, pix_th default 0.10; matched against ffmpeg -h filter=blackdetect (checked November 6, 2026). ffmpeg.org