Claude Motion Graphics: Make Them Yourself or Have Them Made for You

What “Claude motion graphics” means

Claude motion graphics are animated titles, callouts, charts and captions that Claude builds by writing code. Claude decides the layout, the words and the timing. Something else draws the frames: a browser, Remotion, HyperFrames or After Effects.

In chat, or on your computer

In a chat, Claude can make an artifact that opens beside the conversation. Anthropic’s help center lists single-page websites among the things an artifact can be, and one can play a CSS or JavaScript animation right there. Artifacts are on every Claude plan.

Claude Motion, a beta on Team and Enterprise plans, exports its animations as MP4. A plain artifact animation stays a web page until you record your screen or render the code with a tool.

Remotion, HyperFrames and After Effects scripts run on your machine. Claude Code, Anthropic’s coding agent, can write those files and run the render: its docs say it reads your codebase, edits files and runs commands.

Six routes to motion graphics with Claude, compared

Pick by what you want out, a standalone animation or a graphic on your own footage, and by how much setup you will take on. Each row comes from the tool’s own docs, read on 25 October 2026.

How to choose

• You want a short animated explainer or chart, and your team is on Claude Team or Enterprise: Claude Motion.
• You want a quick draft to look at, on any plan: an HTML animation in an artifact.
• You want branded graphics on your own clips, made the same way every time: Claude Code with Remotion or HyperFrames.
• You already work in After Effects: have Claude write the script or the expression.
• You film yourself talking and want graphics placed on your words for you: a done-for-you editor such as EditorOP.

Claude Motion: animations made in chat

Claude Motion is Anthropic’s animation feature, launched in beta on 8 October 2026. Anthropic says Claude writes code that animates your text, charts, shapes and images, and the result plays like a short video. Its examples are a 30-second all-hands explainer, motion added to a board-deck chart and a product walkthrough.

How to start one

Anthropic’s help center gives two ways in. Ask for an animation in any chat, or select Output in the message box and choose Motion. You can also open the Artifacts tab and pick a Motion template. Menu names can differ by app version.

For better results, the help center suggests saying who will watch it, where it will play and roughly how long it should be, and attaching your source material.

Make a 20-second animation for my team’s update. Three bars grow one after another: January 40, February 65, March 90 subscribers. Title: Subscribers by month. White background, bold sans-serif type.

Edit, export and share

Ask Claude in chat for a change, or edit the animation directly in its editor. The help center’s own examples are “Slow down the second scene” and “Change the Q3 number to 18%”. Because the animation is code, one change leaves the rest as it was. Click Export and choose MP4. Animations start private; open one and click Share to share it.

Anthropic’s launch article lists Adobe, Descript, HeyGen, Higgsfield, invideo, Luma AI and Runway as tools you can open an animation in, with Canva and Captions coming soon.

Each animation counts toward your plan’s usage limits, and longer or more complex ones use more. On Enterprise, the feature stays off until an owner turns it on in Organization settings, under Artifacts. The help pages state no length cap, resolution, aspect ratio or audio handling, so check an export before you plan a reel around it.

Code routes: Remotion, HyperFrames and HTML

On any plan with Claude Code, the code routes turn a prompt into a project folder you keep. Every graphic becomes a file you can change, reuse and render again.

Remotion with Claude Code

Remotion builds videos as React components. Its Claude Code page sets it up in four steps: create a blank project, add Remotion’s skills, start the preview, then launch Claude Code in a second terminal and describe the video. The Agent Skills define best practices for Remotion projects and work with Claude Code, Codex, Kimi Code or Cursor.

You can render from the Studio’s Render button, the command line, a server or Remotion Lambda on AWS. Remotion can place your own clip under the graphics and read word timestamps, so it suits graphics that sit on your footage. The walkthrough below uses it.

HyperFrames with Claude Code or in Claude

HyperFrames is HeyGen’s open-source framework for turning HTML into MP4 video, built for agents. A video is an HTML file with data attributes for timing and tracks, animated with GSAP, CSS, Lottie, Three.js or similar libraries. Its README says the renderer seeks each frame in headless Chrome and encodes with FFmpeg, so the same input gives the same video.

For Claude Code, the README installs a plugin with claude plugin marketplace add heygen-com/hyperframes, then claude plugin install hyperframes@hyperframes. One of its skills covers a catalog of about 450 ready-made blocks, among them titles, captions, charts, maps and transitions. It needs Node.js 22 or later and FFmpeg.

Claude’s connector directory also lists HyperFrames by HeyGen, made by HeyGen and marked Anthropic verified, with two tools: compose and render_video. The README’s own comparison says both HyperFrames and Remotion render with headless Chrome and FFmpeg, HyperFrames from plain HTML and Remotion from React. The same table calls Remotion Lambda a mature cloud renderer.

An HTML animation in an artifact

The lightest route needs no install. Ask Claude in chat for a single-page HTML animation, such as a title that types itself out, and it plays in the artifact panel. For legacy artifacts, the help center says the controls at the top of the panel let you view the code, copy it or download it.

To make it a video, record your screen or hand the HTML to a renderer such as HyperFrames. A screen recording captures whatever your computer manages to draw in real time, so a busy animation can stutter; that is our judgment. Remotion and HyperFrames step through the animation one frame at a time instead.

After Effects: scripts and expressions from Claude

Claude can write both kinds of code After Effects runs. Adobe draws the line this way: a script tells the application to do something, while an expression tells a property to do something.

Scripts

After Effects scripts use ExtendScript, which Adobe calls an extended form of JavaScript, saved as .jsx or .jsxbin files. A script can, for example, reorder layers or find and replace text in text layers. Run one with File, then Scripts, then Run Script File.

By default, scripts cannot write files or use the network. Adobe’s page shows where to allow it: Scripting & Expressions in the preferences, under Allow Scripts To Write Files And Access Network. Turn it on only for scripts you have read.

Write an After Effects ExtendScript that adds a lower third to the active composition: my name on one line, my role below, sliding in from the left over 12 frames. Put it all in one undo group.

Expressions

An expression is a small piece of JavaScript on one property, per Adobe. Its examples include a wiggle in place of hand-made keyframes, linked properties, and animated graphs and charts. Ask Claude for the expression, then paste it into the property. Adobe documents syntax differences between its expression engines, so tell Claude which one your project uses.

Letting Claude drive After Effects

Adobe’s own Adobe for Claude connects Claude with Acrobat, Adobe Express, Photoshop, Lightroom, Illustrator, Firefly, Premiere, InDesign and Adobe Stock, per its help page. That page does not mention After Effects. Community-built MCP servers fill the gap.

One of them, mcp-aftereffects from Kumo Productions, connects Claude Code or Claude Desktop to a running copy of After Effects 2024 to 2026. It can edit layers, keyframes and expressions and render frames to preview. Its README warns that the AI changes your project directly and that project details may reach the AI service, and suggests testing on a backup file. It is third-party software, not an Adobe or Anthropic product.

Walkthrough: a stat callout with Claude Code and Remotion

Here is one graphic made end to end: a stat callout that pops up when you say a number. The commands come from Remotion’s docs. The prompts and the number are our examples, and Claude will word its replies its own way.

1. Set up the project

Install Node.js and Claude Code, then run Remotion’s setup commands:

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

The last command starts the preview, Remotion Studio. Open a second terminal in the same folder and run claude.

2. Describe the graphic

Create a composition called StatCallout: 1080 × 1920, 30 fps, 4 seconds, transparent background. Count a big number up from 0 to 6, then slide the words ‘hours saved a week’ up beneath it. Load Inter with @remotion/google-fonts. Animate only from useCurrentFrame with interpolate or spring.

Check it in the Studio. Scrub through: the count should stop on 6 and the text should never jump. Remotion’s docs say to always animate with useCurrentFrame(), and warn that animations it does not drive, such as CSS transitions, can flicker in the render. MindStudio’s third-party guide notes that Claude Code may forget to register a new composition in Root.tsx, so it never appears. If that happens, say so.

3. Time it to your words

Claude cannot hear the moment you say “six”, so give it a transcript with a time for each word. Remotion’s transcription docs list Whisper.cpp, Whisper in the browser, OpenAI Whisper and ElevenLabs as sources it converts into its own caption format.

words.json has my transcript with each word’s start and end in milliseconds. Start the callout on the frame where I say ‘six’, hold it until 1 second after that sentence ends, then fade it out over 8 frames.

Play it with sound. The number should appear as you say the word.

4. Put it on your clip

Put public/take.mp4 underneath with OffthreadVideo. Place the callout in the upper third, clear of my face and of the bottom of the frame, where the app shows its caption and buttons.

Then open a still in the Reels safe zone checker to see what the app covers.

5. Render a check, then the real file

npx remotion render StatCallout out/check.mp4 --frames=0-60 --scale=0.5
npx remotion render StatCallout out/stat.mp4

The first command renders frames 0 to 60 at half size, which is quicker to review while you iterate. Remotion’s CLI docs describe both flags, and without a codec flag the render uses H.264. Pass a single number to --frames to render one still, then give Claude Code the image path and ask it to check the frame; its docs say it can analyze images.

Skipped step 4 and want a transparent overlay for another editor instead? Remotion’s transparent video docs give ProRes 4444 settings: --codec=prores --prores-profile=4444 --pixel-format=yuva444p10le --image-format=png.

Which route suits each talking-head graphic

Most graphics in a talking-head reel are text. In EditorOP’s October 2026 outlier report, 48 of the 50 talking-head posts had text on screen, and word-by-word captions were the most common kind (19 of 50). That sample is winners only, so it describes what was common and cannot show what earned the views.

Captions have their own craft. See video captions people can actually read and the guide to adding captions to Instagram Reels.

Time, skills and licenses

Time

Setup is the slow part, and you do it once. MindStudio’s third-party guide claims a lower third or title card is “a 10-minute conversation” with Claude Code and Remotion. It also says a simple 5-second 1080p render takes about 30 to 90 seconds on a modern laptop. We have not tested those figures, and your first graphic will take longer while you learn the loop.

Every change is another prompt and another render. Budget several rounds per graphic, and a timing pass whenever you re-cut the clip underneath.

Skills

Claude Motion and artifacts need no code. The code routes need a terminal, Node.js, and the patience to paste an error back to Claude and render again. The After Effects routes assume you know After Effects well enough to judge what a script did.

Plans and licenses

• Claude Motion: a beta on Team and Enterprise plans that counts toward usage limits.
• Claude Code: included in Pro and Max. Anthropic says “all activity in both tools counts against the same limits”, so a long round of prompts and fixes draws on the same allowance as your chats.
• Remotion: individuals, for-profit organizations with up to 3 employees, non-profits and people evaluating it need no company license, per its license. Companies of 4 or more need a Company License, priced per seat for manual work and per render for automation; Remotion’s license page has the details.
• HyperFrames: Apache 2.0, which its README says means “no per-render fees or commercial-use thresholds”.
• After Effects: you need After Effects from Adobe. Community MCP servers are separate open-source projects; mcp-aftereffects uses the MIT license.
• Fonts, logos and music: check each one’s license for use in video. That is our advice; no tool on this page checks it for you.

Limits to plan for

• Fonts. Remotion’s docs point to its font packages, or to delayRender() to hold the render until a font is ready. Check the font in the rendered file as well as the preview.
• Timing to speech. Claude times graphics from a transcript. If the transcript mishears a word or a timestamp drifts, the graphic lands in the wrong place. Re-check timing after every re-cut.
• Flicker. Remotion renders in several browser tabs that share no state, so an animation not driven by the frame number can break. Its docs also rule out plain randomness, except through its random() helper.
• Render time. Remotion and HyperFrames draw every frame in a headless browser, then encode the video. Long or effect-heavy pieces take longer, so render short ranges at half size while you work.
• Claude Motion is a beta. Its help pages state no length cap, resolution, aspect ratio or audio handling, and it makes no footage and no people.
• Claude does not watch the render. Unless you show it frames, Claude only sees its code. Watch every render at full size on a phone, with sound, before you post.

Graphics timed to your words, without code

EditorOP takes the other path. You upload your raw talking-head clips, and it adds motion graphics timed to what you say. A number you say can become a stat callout, two options you compare can share a side-by-side card, and a city you name can get a map pin.

The graphics come from a designed library. The AI matches moments in your transcript to graphic types and fills each one with your words; code then times and places them. Change any graphic in the editor: edit its words and numbers, swap the design of a stat, list or name card, move or retime it, or delete it.

You can also change them by chatting in Claude through the EditorOP connector. Ask Claude to swap a graphic for another design, move it earlier or later, resize it, remove it or add one at a moment. You can also ask for a graphic behind you or in front of you. EditorOP fits graphics to keep them clear of your face and captions, and these edits use no credits.

It makes vertical reels up to 90 seconds from talking-head clips; it is not a general motion design tool. See AI motion graphics for the graphics and the Claude video editor for the connector.

Questions people ask