Video from code
Make launch videos, UI demos and explainers with Claude Code and HyperFrames or Remotion, with setup commands, an example brief and the limits.
For motion graphics, you do not need a video model at all. Claude Code (running Opus 5.5) can write the animation as code with HyperFrames or Remotion and render an MP4 on your computer. Nothing is generated frame by frame by a video model, so there are no video credits, no rerolls and the result is exact and repeatable. Pick HyperFrames unless you already write React.
This page is the short version. The Video from code section covers setup, briefs, iteration, audio, mixing in footage, output and fixes in depth.
When to choose code over generated footage
| Choose code for | Choose a video model for |
|---|---|
| Product launches and feature announcements | Stories with people and places |
| UI demos with real screenshots and recordings | Anything that should look filmed |
| Explainers with charts, numbers and text | Music videos and mood pieces |
| Exact brand fonts and colors | Shots where realism matters more than precision |
| Many localized or variant versions of one video | One off cinematic moments |
You can mix both: generated shots for the story, code for titles, captions and data, and an editor for the final cut. Pure motion graphics also avoid AI label questions, since YouTube's disclosure rules target realistic synthetic content.
HyperFrames or Remotion
| HyperFrames | Remotion | |
|---|---|---|
| Made by | HeyGen | Remotion |
| You write | HTML, CSS and JavaScript with data-* timing attributes and GSAP timelines | React components |
| Renders with | Headless Chrome plus FFmpeg, to MP4, MOV, WebM, GIF or PNG | Frame by frame, with a mature Lambda renderer |
| License | Apache 2.0, free for everyone | Free for individuals and companies of up to 3 people, including commercial use |
| Extras | 150+ prebuilt blocks (charts, lower thirds, transitions), lint and check gates, a Studio editor, workflows for captions and cuts on footage | Larger ecosystem |
| Pick it when | You want no build step and a permissive license | Your team already writes React |
HyperFrames is open source with about 64,000 GitHub stars. HeyGen made its own launch video this way in Claude Code.
Prices and licenses
Prices checked on 15 Oct 2026.
| Item | Cost |
|---|---|
| HyperFrames | Free (Apache 2.0). Optional HeyGen cloud rendering is billed in HeyGen credits, 4K at 1.5x. |
| Remotion, individuals and companies of up to 3 people | Free, commercial use included |
| Remotion Creators (companies of 4 or more) | 25 USD per seat per month |
| Remotion Automators | 0.01 USD per render, 100 USD per month minimum |
| Remotion Enterprise | From 500 USD per month |
| Claude Code | Claude Pro 20 USD/month (17 USD/month billed yearly), or Max from 100 USD/month |
| Claude API | Opus 5.5 at 4 USD per million input tokens, 20 USD per million output tokens |
Your first code video
Install the basics
You need Node 22 or newer, FFmpeg and Chrome for HyperFrames, plus Claude Code. npx hyperframes doctor checks all of them.
Add HyperFrames to Claude Code
Run the plugin commands below, then start the skill with /hyperframes:hyperframes. Leave effort at the default medium; Setup explains when xhigh is worth it.
Give Claude a brief and 1 or 2 reference videos
Without a reference, Opus defaults to "centered text, gradient background, everything fading in". Point it at real UI screenshots, your logo and fonts, and name the patterns you do not want (Brief).
Approve one still per scene first
Ask for a scene list and one frame per scene before any animation. Fixing a still is faster than fixing motion.
Preview, then render
Watch the preview, ask for specific changes ("slow scene 3 by one second", "larger captions"), then render the MP4. Check that all text is readable on a phone.
HyperFrames:
claude plugin marketplace add heygen-com/hyperframes
claude plugin install hyperframes@hyperframes
# or, without the plugin:
npx skills add heygen-com/hyperframes
# check your machine
npx hyperframes doctor
# working by hand
npx hyperframes init my-video
npx hyperframes preview
npx hyperframes renderRemotion:
npx create-video --yes --blank my-video
cd my-video
npx remotion skills add
npm run dev
# then run `claude` in a second terminal and describe the videoMake a 30 second 16:9 launch video for our budgeting app, using HyperFrames.
Audience: freelancers in Vietnam. Hook in the first 2 seconds: "Where did this month's money go?"
Scenes: 1) hook question on a plain background, 2) three real app screenshots from ./screens sliding in one at a time with a short caption each, 3) one animated bar chart of spending by category from ./data.csv, 4) logo from ./brand/logo.svg and the line "Free on iOS and Android".
Style: match the pacing and type of ./refs/reference.mp4. Brand colors #0F766E and #F8FAFC, brand font Satoshi 500/800 from ./brand/fonts. Calm pace, one idea per scene, one moving element at a time.
Banned: centered title on a gradient, everything fading in, glows, particles, bouncy easing, invented numbers.
First give me the scene list and one still per scene for approval. Then animate and render an MP4 at 1080p, 30 fps.Swap Satoshi for your real brand font. If you have none, pick a face with character on purpose: HyperFrames lists Inter, Roboto, Poppins and similar defaults as signs of AI output, unless they are your actual brand font. If the on screen text is not English, check that the font covers every character on Fonts.
Settings worth changing
- Reference videos. One or two references decide most of the quality. Without them, output tends to be overcrowded, effect driven and too fast.
- Pace limits in the brief. Say how many elements may move at once and how long each scene lasts.
- Real assets. Use real screenshots, recordings and your actual logo instead of letting the agent draw placeholders.
- Effort. Keep the default
mediumfor notes and fixes. Ultracode runs cost 7 to 30 times more with no shown quality gain. - Save the process. Once a video works, ask Claude to save the steps as a skill so the next video starts from them.
Limits
Footage editing is limited
HyperFrames now has workflows for captions on footage, recutting a talking head, and cuts, trims and retiming, and creators have edited podcasts and short talking clips this way. It is still not a replacement for an editor on long, multi camera footage. Cut those in an editor like CapCut and use code for the graphics.
- Busy output without references. Without a reference video, most results look generic. Give it one.
- Render time. Remotion renders can slow iteration; one creator reported 700 seconds per render before switching tools (a post promoting their own pick).
- Long projects take time. One creator made a 3 minute history film in about an hour with roughly 7,400 lines of Remotion code. Expect several review rounds.
- Claude Motion. A beta for Claude Team and Enterprise plans exports MP4 and sends work to HyperFrames Studio. It has no video model, so no realistic footage or people. One user found it took about 10 minutes against about 30 with HyperFrames for similar output.
- Copy paste hype. "Netflix engineers dropped 20 repos" style lists on X are promotional, and "official Anthropic" claims without a link to Anthropic's docs are unverified. Judge tools by their docs and licenses. See Troubleshooting for the patterns.
Sources
- HyperFrames on GitHub
- HyperFrames overview, HeyGen
- HyperFrames quickstart
- HyperFrames vs Remotion, HeyGen (biased)
- Remotion with Claude Code
- Remotion license
- Claude pricing, Claude API pricing, Get started with Claude Motion
- HyperFrames vs Remotion vs Selects, Cutback
- YouTube altered or synthetic content
- Posts on X collected in Sources