HyperFrames, HeyGen’s open-source framework that turns HTML into MP4 video, shipped v0.8.145 today (October 10, 2026). The headline change is GPU export inside HyperFrames Studio. It also fixes a bug that left long exports stuck at 90%. The repo has passed 60,000 GitHub stars and is on GitHub’s weekly trending list. The whole engine is Apache 2.0, so you can render as many videos as you want on your own machine without paying per render.
Why should a creator care? HyperFrames isn’t a video model. It doesn’t dream up footage. It’s the layer that turns an AI coding agent into a motion designer. You describe a product intro, a lyric video or an animated chart. Your agent writes plain HTML and animation code, and HyperFrames renders it frame by frame into a video that comes out identical every time. If you’re tired of keyframing explainers and lower-thirds in After Effects, it’s worth an afternoon.
HyperFrames at a Glance
- What it is: an open-source framework that renders HTML, CSS and seekable animations (GSAP, Lottie, Three.js, CSS) into MP4, WebM, MOV or GIF.
- What’s free: the CLI, the render engine, 21 agent skills and the block catalog, all under Apache 2.0. Rendering on your own machine uses no HeyGen credits.
- What costs money: HeyGen-hosted cloud renders (paid per credit, and 4K is billed at 1.5×), plus whatever your AI coding agent costs you.
- Hardware: no GPU needed. You need Node.js 22+, FFmpeg and Chrome, and each render worker uses about 256 MB of RAM.
- The catch: results are only as good as the agent writing the HTML, and the new Studio desktop app asks you to sign in with a HeyGen account.
What HyperFrames Actually Does
Each HyperFrames video is an index.html file. Clips are ordinary elements with data-start, data-duration and data-track-index attributes, so a video, a title and a music bed are each one tag on a timeline. Animations come from GSAP timelines, CSS keyframes, Lottie, Three.js, Anime.js or WAAPI. HyperFrames loads the page in headless Chrome, jumps to each frame, takes a capture and hands the frames to FFmpeg.
Because every frame is reached by seeking rather than played in real time, the same input gives you the same frames every time. HeyGen calls this deterministic rendering. For creators, it means you can tweak one line of text, re-render and get exactly the same timing everywhere else.
The Agent Skills Are the Real Product
HyperFrames ships 21 skills that teach coding agents how to make a video: plan the piece, write valid compositions, wire up seekable animation, add media, lint, preview and render. A /hyperframes router reads your request and picks a workflow. The ones creators will use most are:
/product-launch-video: a URL or brief becomes a 30–90 second promo./faceless-explainer: text becomes a typographic or diagram explainer./music-to-video: beat-synced lyric videos and kinetic promos from a track./embedded-captionsand/talking-head-recut: captions and lower-thirds over talking-head footage./motion-graphics: logo stings, stat hits and headlines under 10 seconds.
They work with Claude Code, Codex, Cursor and Gemini CLI. If you’ve already tried an agent-driven design tool like Open Design or the Doop design canvas, the idea is the same, but the output is a video file instead of a static layout.
frame.md: Your Brand Kit, Rewritten for Video
The most interesting design idea here is frame.md. Many brands now keep a design.md of colors, type and spacing rules that AI agents can read. frame.md rewrites those web-focused rules at video scale, so the agent stops reaching for tiny web text or navigation bars. The gallery has a dozen free systems to remix.
What’s New This Week (v0.8.138 to v0.8.145)
HyperFrames releases almost every day. Eight versions shipped between October 6 and October 10. These are the changes that matter to creators, all taken from the project’s own release notes:
- GPU export in Studio (v0.8.145): Studio can now encode on your GPU (NVENC, VideoToolbox, AMF, VAAPI or QSV).
- No more 90% stall: long exports no longer freeze near the end.
- Built-in transcription now runs inside the desktop app, and the CLI’s
transcribe --tocan write SRT or VTT files directly. - Faster distributed renders: on AWS Lambda, HeyGen says a 26-minute clip now finishes its planning step in about 20 seconds instead of more than 6 minutes. That’s the project’s own number, not an independent test.
HyperFrames vs Remotion vs Motion Canvas
HyperFrames openly credits Remotion as its inspiration, and both drive headless Chrome and FFmpeg. The biggest difference for a small studio is the license.
| Tool | You write | License | Free for commercial work? | Agent skills built in |
|---|---|---|---|---|
| HyperFrames | Plain HTML + GSAP/CSS/Lottie | Apache 2.0 | Yes, no limits | Yes, 21 skills |
| Remotion | React components | Source-available Remotion License | Only for individuals, companies with up to 3 employees, and non-profits | No (needs React/JSX) |
| Motion Canvas | TypeScript generators | MIT | Yes | No |
| Revideo | TypeScript (Motion Canvas fork) | MIT | Yes | No |
Remotion is more mature, but past three employees you need a company license. Motion Canvas and Revideo are MIT but haven’t had a commit since July. HyperFrames is the only one built for an AI to write.
Try HyperFrames Free Today
What you need: any recent Mac, Linux or Windows machine. No GPU is required because rendering runs on the CPU in headless Chrome. Install Node.js 22 or newer and FFmpeg. Plan on roughly 256 MB of RAM per render worker. The CLI picks the worker count automatically, and you can set it from 1 to 24.
Path 1: the CLI (fully free, no account). Open a terminal and run:
npx hyperframes init my-video
cd my-video
npx hyperframes doctor # checks Node, FFmpeg, Chrome, RAM
npx hyperframes preview # live-reload preview in your browser
npx hyperframes render --output video.mp4If doctor can’t find Chrome, run npx hyperframes browser ensure and it will download one. For a transparent overlay you can drop into Premiere or DaVinci Resolve, render with --format mov (ProRes 4444) or --format webm (VP9 alpha), and make sure the composition’s background is transparent.
Path 2: with your AI agent. In your project folder, run npx skills add heygen-com/hyperframes and choose Core Skills. If you use Claude Code, run claude plugin marketplace add heygen-com/hyperframes, then claude plugin install hyperframes@hyperframes. Then try a prompt like: “Using /hyperframes, create a 10-second product intro with a fade-in title, a background video and subtle music.”
Path 3: the Studio desktop app. Open hyperframes.dev and click Download for macOS, or scroll down to the Linux .deb and AppImage links. A Windows version is listed as “coming soon.” The Studio docs explain the sign-in step.
For ideas, browse the Showcase for finished videos you can remix, and the block catalog for one-command add-ons like npx hyperframes add data-chart. The full flag list is in the CLI reference.
Honest Trade-offs
- It isn’t a generator. It arranges type, graphics, charts and media you already have. For generated footage you still need a video model.
- “Free” stops at the engine. Local rendering is free, but the agent writing your HTML usually isn’t. HeyGen’s cloud render also charges per credit.
- The Studio app wants a HeyGen login. You can click “Not now,” but it keeps asking. The download page doesn’t list a price, so if you want zero accounts, stick with the CLI.
- Fast-moving code. Eight releases in five days. Pin a version for client work.
- Speed depends on your CPU. Each frame is a Chrome capture, so long 4K laptop renders are slow. No independent benchmarks exist yet.
Workflow Tips for Creators
- Choose a frame.md design system before you prompt. Agents given a fixed palette and type scale produce far less generic motion.
- Use
--quality draftwhile you iterate and switch to--quality deliveryonly for the final export. - Render lower-thirds and logo stings as transparent MOV files and composite them in your main editor, instead of building the whole edit in HTML.
- Pair
/embedded-captionswith a local transcription model. Our guide to free AI transcription with speaker labels covers a fully offline setup. - Vectorize logos before you animate them. A clean SVG from a tool like Inkvec animates much better than a blurry PNG.
Haven’t built anything with a coding agent yet? Our video How To Build a WordPress Plugin With AI & No Coding walks through the same describe-review-iterate loop HyperFrames relies on. More tool tests are on the Creative AI Show YouTube channel.
HyperFrames FAQ
Is HyperFrames free?
Yes. The framework, CLI, skills and catalog are open source under Apache 2.0, and local renders use no HeyGen credits. You only pay for optional HeyGen cloud rendering, your own AWS or GCP bills if you render there, and your AI agent’s subscription.
Can I use HyperFrames commercially?
Yes. Apache 2.0 allows commercial use with no per-render fees and no company-size limit, unlike Remotion.
What are HyperFrames’ system requirements?
Node.js 22+, FFmpeg/FFprobe and Chrome, which the CLI can download for you. No GPU is required, and about 256 MB of RAM per render worker is enough. A GPU only speeds up encoding when you use --gpu. The Studio app runs on macOS and 64-bit Linux, with Windows “coming soon.”
Can HyperFrames export transparent video?
Yes. Render with --format mov for ProRes 4444 or --format webm for VP9 with alpha, and set the composition background to transparent.
Accurate as of October 10, 2026 (HyperFrames v0.8.145). This project ships updates almost daily, and pricing for hosted rendering can change, so check the GitHub repo for the latest.
No responses yet