How to make a video with Claude Code (step by step, 2026)

Yes. Claude Code can make videos: it writes the animation as code and renders an MP4 on your own computer. The common routes are the Remotion agent skills, HyperFrames, or a Motion Skills full-film skill that plans, scores and renders a whole film. Claude Code is included on Claude Pro and Max, and you don't need Claude Motion, which is a separate beta in Claude on Team and Enterprise plans.

Below: the four routes side by side, a step-by-step run from install to MP4 with Motion Director, the free skill, and a real film walked through from its brief to its last revision.

Checked against Claude's pricing page, Claude Code's quickstart, Remotion's coding-agent guide and the HyperFrames README on October 29, 2026.

Four ways Claude Code can make video

Route	What you write	What you get	Setup	Cost
One prompt to Opus	Nothing; Claude writes an HTML animation	A page that animates in the browser; you record or render it yourself	None	Your Claude plan
Remotion + its agent skills	React components, written by Claude	An MP4, from a Remotion project you keep	npx create-video, then npx remotion skills add	Remotion's own license (see their license page)
HyperFrames	HTML, CSS and GSAP, written by Claude	An MP4, rendered in headless Chrome with FFmpeg	npx hyperframes init, or its Claude Code plugin	Open source (Apache 2.0)
A Motion Skills full-film skill	Your material and a sentence	A whole film: a direction, an original score, checks, the MP4	The one-sentence install below	Motion Director is free; $4.90 per skill, or a plan

One prompt to Opus is the quickest way to see what Claude can animate: ask for "a 15-second animated title for my app, as one HTML file" and open it. The result changes from run to run, and turning it into an MP4 is up to you. Our Claude Motion prompts page has prompts people shared for exactly this.

Remotion is the established framework for video in React. Its coding-agent guide has you create a project with npx create-video --yes --blank my-video, add its agent skills with npx remotion skills add, preview with npm run dev, and start Claude Code in a second terminal. It suits developers who want full control of every component. Check Remotion's license before you use it at work. How its agent skills compare with a full-film skill: Remotion agent skills vs Motion Skills.

HyperFrames, from HeyGen, is an open-source framework that turns "HTML, CSS, media, and seekable animations" into MP4 files. You can install it as a Claude Code plugin or start a project with npx hyperframes init my-video and render with npx hyperframes render. Our earlier motion templates, now kept as examples, were built on it. For the two engines side by side, see HyperFrames vs. Remotion.

A Motion Skills full-film skill is a skill your agent loads. You don't write components: you give it your project, notes, data or script and say what the film is for. It picks a direction and shows you a key frame, writes the film as code, composes its music, checks every frame and renders the MP4 with our open engine, motion-skills (mo). The rest of this guide uses this route.

What you need

• Claude Code, on Claude Pro or Max (also Team, Enterprise or a Claude Console account; it isn't on the free plan).
• Node.js 22 or newer.
• FFmpeg (brew install ffmpeg on macOS).
• Google Chrome. The renderer drives it headlessly.

The engine installs itself through npx the first time it renders; no API keys are needed. The skill's first step, mo doctor, checks all three and says what's missing. More on where skills live in How to install agent skills.

Step by step with Motion Director

Motion Director is free and needs only a Google sign-in. It makes one film of 10–20 seconds of any kind: a launch teaser, one number that lands, one idea explained, a vertical hook.

1. Install it with one sentence

Open Claude Code in a folder (your project, or an empty one) and paste:

Read https://claude-motion.com/skills/motion-director/install.md and follow it to install the "motion-director" skill, then make a first video with it.

Claude Code reads the guide and runs one command, npx motion-skills install motion-director. The first time, a page opens in your browser: sign in with Google and approve the code your terminal shows. Prefer the terminal yourself? Each skill page has the command for Claude Code, Codex, Cursor and Gemini CLI: press Copy install prompt and open the Install from the terminal tab.

2. Give it your material

Say what the film is about and point at what it should use: the repo it's in, a README, a CHANGELOG, a spreadsheet, a link, a script. For example:

Make a 15-second launch teaser for this app from README.md and the 2.0 notes in CHANGELOG.md. 16:9, for our site.

The skill starts a sources.md: every line, number and name it might show, with the file or URL it came from. It asks only what would change the film (where it plays, the length, your brand), with its defaults written in. No material yet? It uses a sample changelog that comes with the skill and says so.

3. Pick a direction

Before it builds anything, the skill proposes three directions for your film, each a one-line pitch with one still in its own look and palette (kinetic type, data story or whiteboard for Motion Director). You pick one, or mix them ("the second one's colours on the first"); if you said "just make it", it picks the strongest and tells you which. Then it writes a short treatment for that direction: when the hook lands, when the point lands on the strongest beat, and the held end. This is your storyboard check: a still is quicker to change than a finished film.

4. Let it build, check and score

It writes the film as one index.html (HTML and GSAP), then looks at its own work: a contact sheet of the whole film, mo check for errors, mo audit so every line on screen has a source, and stills of the key moments it opens and fixes. It writes an original score with a short motif for your subject. It can't hear, so it tells you what it wrote.

5. Ask for a change

Watch the render and say what to change in plain words: "the logo comes in too late", "use our green", "hold the last line longer". The skill makes the smallest change at that place and time and renders again. You can also run mo studio to open a live preview, press C, click the frame you mean and write the change there.

6. Get the MP4

The last render goes into your project with its path, length and format, a one-line note on the style and the music, and a handoff.md. When you want the full film of that type, a 30–90 second launch film, an explainer or a data video, the matching full-film skill continues from the same folder.

A real example: "Claude Code in three steps"

This 29-second film was made with our Walkthrough Video skill, which works the same way as Motion Director with a longer film and more styles.

The brief. "A 30-second 16:9 onboarding walkthrough for people on a Claude Pro or Max plan who have never used Claude Code, playing on our site and in a getting-started email: install it, start it in a project, ask it something. Use only the official quickstart; don't invent commands or output." The material was Claude Code's public quickstart and setup pages, plus one real run of claude --version.

The directions. The skill proposed three: a big terminal with a step rail, one endless command line across coloured fields, and a system map of what each command touches. It chose the terminal: "the message is a workflow and the interface is a terminal, so the strongest proof is the real commands typed large". It also named the risk up front: no real screenshot of a session was available, so that screen had to read as simplified, and it's labelled "layout simplified" in the film.

The plan. A treatment in bars at 112 BPM: install, start, ask, then the example answer on the peak and the install command as the end card. Every word on screen is traced to the quickstart in its sources.md; the version line is the real output.

The revision. After the first render, mo qa showed a 3-second hold after step 1 and a 2-second hold after step 2 that nobody needed. Steps 2 and 3 moved earlier and the peak moved a bar sooner, which is why the film runs 29 seconds instead of 30.

The film's source, including its directions, treatment and sources, ships with the Walkthrough Video skill as an example.

Pick a full-film skill for your film type

Motion Director stops at 20 seconds on purpose. For the full film, each film type has its own full-film skill, with its styles built in:

• Launch: launch films, walkthroughs, comparisons, brand intros, event promos, app store previews.
• Teach: explainers, lessons, paper explainers, timelines, math explainers.
• Social: vertical shorts, talking-head videos, titles and transitions, social cards.
• Reports: data videos, team updates, session replays, narrated decks, investor updates.

Each full-film skill is $4.90, or all of them come with a plan: $9.90 a month, $79 a year, or $169 once for the founding lifetime pass. See pricing.

Troubleshooting

• "FFmpeg not found" or "Chrome not found". Run mo doctor (npx --yes motion-skills doctor); it names what's missing. On macOS, brew install ffmpeg; install Google Chrome from Google.
• Claude Code doesn't use the skill. Start a new Claude Code session after installing, so it reads the new skill, then ask again, naming it: "use the motion-director skill".
• The sandbox blocks a browser or a local server. The skill needs both for its visual checks. Approve them when Claude Code asks; don't let it skip the checks.
• The film is longer than 20 seconds. Motion Director makes the strongest 20 seconds and tells you which full-film skill makes the whole film.

Not on Claude Code?

The same skills work in Codex, Cursor and Gemini CLI, which is also the route on Claude's free plan. Where each agent keeps its skills is in How to install agent skills. If you were looking for Claude Motion itself, see Claude Motion not on your plan?. Step by step for those agents, with the folder each one reads: Make videos with Codex, Cursor or Gemini CLI.

Questions

Can Claude Code make videos?

Yes. Claude Code can write animation as code and render it to an MP4 on your computer. Common routes are the Remotion agent skills (React), HyperFrames (HTML and GSAP), or a Motion Skills full-film skill that plans, scores and renders a whole film. Claude Code is included on Claude Pro and Max.

Do I need Claude Motion to make videos with Claude?

No. Claude Motion is a separate beta feature in Claude on Team and Enterprise plans. Claude Code on Pro or Max can make the same kind of code-built animation with a skill, rendered on your own computer.

What do I need installed?

Node.js 22 or newer, FFmpeg and Google Chrome. The motion-skills engine installs itself through npx the first time it renders, and no API keys are needed.

Is it free?

Motion Director is free with a Google sign-in and makes 10–20 second films. Each full-film skill is $4.90, or all of them come with a plan: $9.90 a month, $79 a year or $169 once. There are no credits; the only usage is your Claude plan's own.

Does my film leave my computer?

The film is built and rendered on your computer. When a render finishes, the engine tells claude-motion.com which skill rendered and whether it worked, nothing about the film; setting MOTION_SKILLS_TELEMETRY=0 turns that off.

Sources

• Anthropic, Claude pricing (which plans include Claude Code)
• Anthropic, Claude Code quickstart
• Remotion, Coding agents
• HeyGen, HyperFrames on GitHub

This guide is independent and not affiliated with Anthropic, Remotion or HeyGen. Claude is a trademark of Anthropic, PBC. Checked against the pages above on October 29, 2026.