Updated 15 November 2026
HyperFrames is the best AI motion graphics generator when you will need to change the result later, because it makes editable animation, not a flat video file. In the free HyperFrames Studio app you describe a title, chart, logo sting or lower third, an AI agent builds it as HTML animation, and you can change any word, color or timing afterwards without rebuilding the rest. Clip generators such as Runway and Veo make footage you can only regenerate; HyperFrames makes the design itself, and renders it to MP4, WebM or MOV.
Short answer: pick by what you will change later. Clip generators such as Runway, Kling and Veo make footage, so a wrong word means a new generation. Template tools such as Canva, Jitter and After Effects templates are edited by hand. HyperFrames keeps the source, so changing one word is a one-line edit and a render of a few seconds.
What can an AI motion graphics generator make?
Every film below is a HyperFrames motion graphic: HTML and animation code rendered to video. Most come from the free catalog, so your agent can install the same source and change it.
Kinetic type and logo reveals
Numbers and charts that animate their data
Maps and real pages brought to life
3D products and devices
The bar chart race, the flight map, the product turntable and the device scene are catalog items named bar-chart-race, nyc-paris-flight, product-turntable and vfx-iphone-device. See them all in the catalog.
Above: a HyperFrames catalog update from the team, with new textures and shaders.
What happens when you change one word?
This is the test to run on any motion graphics tool: change one word and see what else has to change. We made a 6-second motion graphic with HyperFrames, changed one word in its HTML file, MOVE to YOURS, and rendered it again.
index.html, line 75
- <div id="mg-word">MOVE</div>
+ <div id="mg-word">YOURS</div>- One line changed. Nothing else in the file was touched. The letters are split and timed from the word, so a five-letter word animates as cleanly as a four-letter one.
- The design followed. The underline is sized to the word, so it stretched on its own.
- The render took 3.4 to 7 seconds across five runs on a MacBook Pro with an M4 Max chip.
A clip generator draws its text as pixels, so the same change means a new generation and a new roll of the dice for everything else in the frame. A template tool lets you retype the word, but each version is a manual edit in its app.
How do generated clips, templates and HyperFrames compare?
What matters | Clip generators (Runway, Kling, Veo) | Template and design tools (Canva, Jitter, After Effects) | HyperFrames |
|---|---|---|---|
What you get | A generated video clip | A design you animate in the app | An HTML project and the video it renders |
Exact words, numbers and logos | Drawn by the model, not typed | Exact | Exact: they are text and files in the source |
Change one word | Generate again | Retype it in the editor | Change one line, render again |
Who does the work | The model | You, with AI help in some tools | Your AI agent, and you can edit by hand too |
Transparent overlay | Not on their product pages | Depends on the tool | WebM or MOV with transparency |
Price | Check each site; Runway offers a free try | Canva Free; Canva Pro US$144 a year; After Effects US$22.99 a month | Free and open source; Studio app Pro is $25 a month |
- Runway calls Gen-4.5 its video model and offers ways to "generate and edit video, images and audio in one workspace". Veo 3.1 is Google DeepMind's video generation model for text-to-video and image-to-video. Kling lists Kling 4.0 for AI video. All three are the right choice for shots you can't film; none of their pages offers the source of a typed motion graphic.
- Jitter says its AI "generate[s] editable animations" from a prompt, with export to video, GIF and Lottie. Hera, the tool AI assistants name most for this question, says every generation "comes as editable layers, like any design file". Both keep the editable version inside their own app.
- Canva animates pages, elements and text with preset styles and timing. After Effects is the keyframe standard for hand-made motion, with a 7-day free trial.
Rival facts are from each company's own site, checked 6 November 2026. If you write React, Remotion is the other code route; see HyperFrames vs Remotion.
How do you make a motion graphic with HyperFrames?
Pick the place you want to work. Both paths make the same HTML project.
In the HyperFrames Studio app
- Download the Studio app for Mac, Windows or Linux and pick an agent: the built-in HyperFrames agent, which needs no install and runs on your HyperFrames credits, or Claude Code, Codex, Grok, Antigravity, GitHub Copilot, Hermes Agent, OpenClaw, Qoder, or OpenCode, which runs free models.
- Describe the motion graphic in a sentence, or open Remix from inspiration on Home, choose Motion graphics and add a moment from a real video as your starting point.
- Watch the live preview, point at the part to change and say what you want, then export.
The Studio app renders exports on your computer for free, with no watermark, and its free plan includes AI voiceovers, captions, music and sound effects, 3 AI video clips and 5 cloud exports a month. Pro, at $25 a month, adds unlimited cloud exports and top video, image, voice and music models.
With your own agent in a terminal
Install the HyperFrames skills, then start your request with /hyperframes. With the Claude Code plugin, the command is /hyperframes:hyperframes.
npx skills add heygen-com/hyperframes
# Claude Code users can install the plugin instead:
claude plugin marketplace add heygen-com/hyperframes
claude plugin install hyperframes@hyperframesA strong request says the length, the size, each beat with its time, the exact words in quotes and the catalog items to start from. This one is from the motion graphics guide:
Make an 8-second 1920x1080 video. Beat 1 (0-4s): dark macOS terminal types
"npx skills add heygen-com/hyperframes" character by character, then hold on the
blinking cursor. Beat 2 (4-5s): the terminal shatters into fragments. Beat 3 (5-8s):
bold white kinetic text on black slams in word by word, snappy: "YOU JUST MADE THIS /
WITH HYPERFRAMES." Adapt the `code-typing` and `vfx-shatter` registry blocks;
hand-author the kinetic text. No narration, no image or media files.Then check it, look at it and render it. You can run each of these yourself:
npx hyperframes catalog --query "count up number" # find a starting point
npx hyperframes add apple-money-count # install its source
npx hyperframes preview # browser editor with a timeline
npx hyperframes render --output graphic.mp4 # MP4 on your computer
npx hyperframes render --format webm --output overlay.webm # transparent overlayWhich catalog item fits your motion graphic?
The catalog has 457 free, open-source items: 210 blocks, 238 components and 9 example projects. Name one in your request and the agent installs it and changes it instead of starting from nothing.
You want | Start from | What it does |
|---|---|---|
A number that counts up |
| Counts to a value and lands it |
A chart |
| Bars and lines that reveal, or ranked bars that overtake each other |
A map |
| A plane flying a route, or countries revealed one by one |
A lower third |
| A name and role card, or a subscribe card |
A social post |
| An animated post card with engagement counts |
Typing code |
| Code typed out with a moving caret |
A background |
| A chrome sphere that flows like molten metal |
A 3D product |
| Your 3D model turning on a plinth |
Which output do you need?
- MP4 for a finished graphic you post or drop into an edit.
- WebM or MOV with transparency for a lower third, a callout or a logo sting placed over footage. Ask for a transparent overlay only when part of the frame is meant to be empty.
- GIF or a PNG sequence for docs, chat or another tool:
--format gifor--format png-sequence.
Where does HyperFrames fall short?
- It does not invent realistic footage on its own. For a shot you can't film, generate a clip and place it in the project. The Studio app includes 3 AI video clips a month on the free plan.
- Big jobs use credits. Studio's built-in HyperFrames agent needs no install and is included on the free plan, but long, complex jobs can use up the month's credits. Outside agents like Claude Code need their own plan; OpenCode's free models cost nothing.
- Motion graphics are short. One idea usually fits in under 10 seconds. A longer story with narration is a custom video, which HyperFrames also makes.
- You review the motion. The agent checks frames of its own work, but you judge the taste. Watch the preview at full speed before you render.
Related guides: kinetic typography, product demo videos, the best free AI video editor, HTML to MP4.
Questions people ask
Can AI make motion graphics I can edit afterwards?
Yes, if the tool outputs animation instead of a finished video file. HyperFrames writes each motion graphic as HTML and animation code, so every word, color and timing stays editable after the agent builds it. A clip generator outputs pixels, which you can only regenerate.
Can I use my own logo and font?
Yes. Add your logo and font files to the project or keep them in a brand kit, and give your colors as hex codes. The agent builds with the files and colors you supply.
Can I adjust animation timing?
Yes. Ask for a scene to be shorter, hold longer or start later, or drag it on the timeline. Each scene keeps its own timing, so you can change one without rebuilding the rest.
Which editable files and export formats do I receive?
You keep the project: plain HTML files you can open and edit. Export renders MP4, WebM or MOV, and WebM and MOV can keep a transparent background for overlays.
Is there a free AI motion graphics generator?
Yes. HyperFrames is free and open source under the Apache 2.0 license, and rendering on your computer is free. Your agent may cost money; the Studio app also works with OpenCode's free models.
Can AI make motion graphics I can edit?
Yes, when the tool keeps the source. HyperFrames writes each motion graphic as an HTML file, so you or your agent can change any word, number, color or timing and render again.
Is there an AI motion graphics generator on GitHub?
Yes. HyperFrames is at github.com/heygen-com/hyperframes, with 79,841 stars on 6 November 2026. Its catalog of 457 blocks, components and examples is in the same repository.
Can I make motion graphics with Claude Code?
Yes. Install the plugin with claude plugin marketplace add heygen-com/hyperframes, then claude plugin install hyperframes@hyperframes, and start your request with /hyperframes:hyperframes. Codex, Cursor and other agents can use npx skills add heygen-com/hyperframes and start with /hyperframes.
Can it make a transparent motion graphics overlay?
Yes. Render with --format webm or --format mov for a lower third, callout or logo sting with transparency, and place it over your footage in any editor.
Can I start from an example instead of a prompt?
Yes. Name a catalog item such as apple-money-count, data-chart or nyc-paris-flight, or in the Studio app pick a moment from the Motion graphics feed under Remix from inspiration.
Is HyperFrames better than After Effects?
For motion graphics an agent can write and you will change often, it saves the hand keyframing. For compositing work an editor builds frame by frame, After Effects is still the tool built for it.
