HyperFrames: Make Real Videos by Writing HTML (2026 Guide, Updated)

What Is HyperFrames?

HyperFrames is an open-source framework from HeyGen that turns HTML, CSS, media, and seekable animation into a finished MP4 video. You write a web page whose elements carry timing attributes, and a render command steps through it frame by frame in headless Chrome and encodes the result with FFmpeg. It is Apache-2.0 licensed, built to be authored by AI coding agents such as Claude Code and Codex, and its tagline says it plainly: "Write HTML. Render video. Built for agents."

We first wrote this post in June 2026 after shipping our first video with it. Since then we have used HyperFrames for every production video OneWave has released, from a site hero explainer to client demos to social recuts, so this is an updated field guide rather than a first look. The GitHub repository sits at just under 44,000 stars as of September 4, 2026, and HeyGen lists tldraw and TanStack among the teams using it in production.

What Changed Since June 2026

When we published the original version, the CLI was at 0.6.x. It is now at 0.8.27, with 152 releases shipped in between. The big additions are hosted rendering (a HeyGen-run cloud render, plus self-managed AWS Lambda and Google Cloud Run paths and a Docker mode), a single check command that replaced the old validate, inspect, and layout checks and now audits layout, runtime errors, and WCAG contrast in one pass, and a skills system that grew to 20 skills with a router that installs creation workflows on demand. HeyGen also shipped a Codex plugin, Figma import, a local semantic catalog search, and frame.md, a video-first version of your design system that an agent can compose from. Everything below reflects the September 2026 tool, and the commands have been corrected where they had changed.

How We Made the Video Above

That clip is the whole argument in 44 seconds, so it is worth saying exactly what went into it - because none of it required an editor, a studio, or a motion designer. It is one HTML file that pulls together a handful of ordinary inputs:

• A real voiceover, recorded on a phone. Our founder recorded a few takes on his iPhone. We dropped them into the project, transcribed them to word-level timestamps, and cut the lines to the beats - so the narration is a genuine human voice, not text-to-speech.
• Royalty-free b-roll. The surfing, the gym, the workspace shots are free stock clips (Pexels) dropped straight in as <video> elements. The same slots could hold footage you shoot yourself.
• A product demo built entirely in HTML. The SaaS dashboard with the cursor that moves and clicks is not a screen recording - it is markup and CSS with an animated pointer. That is the "HTML + anything = video" idea made literal: if you can build the UI, you can film it.
• Off-the-shelf pieces from the catalog. The lower-third card and the film-grain texture are prebuilt registry blocks we installed by name with npx hyperframes add and restyled to our brand.
• Titles, transitions, captions, and a music bed - all defined in the same file, all on one timeline.

Then one command rendered the finished MP4. The source lives in version control next to the site, so when the brand or the copy changes, we re-render instead of re-shooting. That is the point of the rest of this post.

How It Actually Works

The core idea is "video as code," and the design is refreshingly literal: HTML is the source of truth. Every timed element carries class="clip" and its timing lives in data-* attributes (data-start, data-duration, data-track-index). A root element declares the composition's id, width, and height. Motion comes from one paused animation timeline per composition that the renderer can seek to any frame, and CSS controls how everything looks.

To render, HyperFrames loads your HTML in headless Chrome, seeks to each frame, captures it, and encodes the sequence with FFmpeg. Because nothing depends on the wall clock, it is deterministic: the same input always produces the exact same frames. That means video you can put in version control and a CI pipeline, and regenerate on demand. There is no build step either - an index.html composition plays as-is in a browser, per the official quickstart.

Larger pieces are built from sub-compositions: each scene is its own HTML file with its own timeline, mounted into a host composition with data-composition-src. Our 73-second hero explainer is 13 of them. That is also how the registry works - a block you install is a self-contained sub-composition you drop onto a track.

The mental model: a HyperFrames composition is just a web page that happens to know what time it is. If you can build a landing page, you can build a video.

What You Can Build

It is far more than slideshows. The framework, its catalog of blocks and components, and its media commands cover most of what a real motion-graphics pipeline needs:

• Voiceover, built in. npx hyperframes tts runs the Kokoro model locally with 54 voices across nine languages and no API key, so narration can be generated right in the project. (We usually reach for other voices; more on that below.)
• Captions that sync. npx hyperframes transcribe runs Whisper and produces word-level timestamps for karaoke-style, per-word animated captions. It also imports existing SRT and VTT files.
• Scene transitions and VFX. A registry of transitions (3D, blur, glitch, light leaks, WebGL shader warps, whip pans) you install by name, plus a local catalog --query search that takes a plain-English description of the move you want.
• Social-ready overlays. Prebuilt lower thirds and platform cards for YouTube, TikTok, Instagram, X, Reddit, and Spotify, plus macOS-style notifications and app showcases.
• Audio mixing and audio-reactive motion. Voiceover ducking, EQ and compression chains, volume automation, and submix buses live in the composition itself, and animations can be driven off audio frequency bands.
• Data viz and transparent overlays. Animated charts, chart races, and maps ship as blocks. npx hyperframes remove-background cuts a presenter out of footage so you can composite them over your scene.
• Decks, not just videos. npx hyperframes present serves a navigable presentation with presenter and audience sync, from the same HTML contract.

Animation is adapter-based, so you can author motion with GSAP, CSS keyframes, Anime.js, the Web Animations API, Lottie, Three.js, or TypeGPU. The one rule is that it must be seekable, which is what keeps renders deterministic.

Shoot B-Roll on Your iPhone, Wrap It in Code

Here is the part that makes this practical for a small team: you do not need a stock-footage subscription or a camera crew to get real footage into a video. The clip in your pocket counts. The workflow we use looks like this:

• Record on your phone. Shoot the b-roll on your iPhone - a product in use, a storefront, a whiteboard, a quick talking-head intro. Anything you would normally pay for as stock, you can usually just film.
• Get it into the project. AirDrop or drag the .mov/.mp4 into your project's assets folder, then tell Claude Code what it is. It can trim it, convert it, and run npx hyperframes transcribe on any speech for captions without you touching an editor.
• Wrap it in HTML. Your footage becomes a clip in the composition - literally a <video class="clip"> element with data-start and data-duration. From there HyperFrames composites everything else around and over it: animated titles, lower thirds, word-synced captions, a generated voiceover, transitions between shots, even background removal so a presenter floats over a branded scene.
• Render. One command turns the whole thing - your phone clip plus all the motion graphics - into a finished, on-brand MP4.

So the honest answer to "where does the b-roll come from?" is: you. You film it, and the code does the production work that used to need an editor.

Using It in Claude Code

HyperFrames ships as agent skills, so you teach your agent the whole workflow with one install. A router skill reads your request and pulls in the right creation workflow - product launch video from a URL, faceless explainer from text, PR-to-video, talking-head recut, captions, motion graphic, music video, slideshow - so you rarely have to know which one you need. (Want just the commands in order? See our step-by-step guide to making a video with HyperFrames.) In a terminal:

• Install once: npx skills add heygen-com/hyperframes and pick the Core Skills group; the router installs each workflow the first time it is needed. npx hyperframes skills update does the same non-interactively and pulls from the current main branch. You need Node.js 22+ and FFmpeg on your PATH.
• Scaffold: npx hyperframes init my-video creates the project (add --tailwind for a Tailwind v4 project), or npx hyperframes capture pulls a website's screenshots, logo, and assets in to build from.
• Author: describe the video in plain language - Claude Code writes and edits the HTML composition, and searches the catalog before hand-building any motion.
• Check: npx hyperframes lint while iterating, then npx hyperframes check as the gate. It reruns lint, then opens a browser once to audit runtime errors, failed requests, layout overflow, and WCAG contrast.
• Preview: npx hyperframes preview opens HyperFrames Studio with frame-accurate scrubbing and hot reload.
• Render: npx hyperframes render --quality draft to iterate, --quality high to deliver.

This pairs naturally with everything else Claude Code does - we keep video compositions in the same repos as the products they explain and regenerate them when the brand or copy changes. The hyperframes skills are on the short list of Claude skills we use to run OneWave. (New to Claude Code? Start with our guide to Claude Chat, Cowork, and Code and our Claude Code vs Codex breakdown.)

Using It in Codex, Cursor, and Gemini CLI

The same skills work in OpenAI's Codex, Cursor, Gemini CLI, and any other coding agent that supports skills - the install command and the npx hyperframes dev loop are identical. HeyGen also builds a dedicated Codex plugin archive from the repo, so the Codex app can load the production workflow as a plugin instead of a skills folder.

In other words, it is agent-agnostic. Whether your team lives in the Claude Code terminal or the Codex desktop app - or runs both through Crest - the path to a finished video is the same: describe it, check it, preview it, render it.

Rendering: Local, Docker, or Cloud

Local rendering needs only Chrome (HyperFrames downloads its own) and FFmpeg, and --docker gives you a reproducible container render for CI. If you do not want to manage any of that, npx hyperframes cloud render uploads the project and renders on HeyGen's infrastructure. Teams that need to own the compute can deploy the render stack to AWS Lambda or Google Cloud Run and drive it from a laptop or a pipeline.

Compositions can also declare variables and be batch-rendered from a JSON file of rows, which is how you get a hundred personalized versions of one template. Output is a standard 1080p MP4 by default, with flags for quality and frame rate, and a WebM export when you need transparency. Because the output is an ordinary video file, embedding it anywhere is trivial - host it and drop in a normal HTML <video> tag. The source of truth stays in code; what you ship to the page is the rendered file.

HyperFrames vs Remotion

HyperFrames is openly inspired by Remotion, and both render video with headless Chrome and FFmpeg. The difference is the authoring model. Remotion's bet is React components with a bundler; HyperFrames' bet is plain HTML with no build step that both humans and agents can write and read directly. HyperFrames is Apache-2.0 with no per-render fees or company-size thresholds, while Remotion ships under a source-available license that requires a paid plan for larger companies. Remotion's Lambda renderer is the more mature cloud path; HyperFrames now has hosted, Lambda, and Cloud Run options of its own. HeyGen's comparison guide covers the rest. Our view: if your team already lives in React and has a motion designer, Remotion is fine. If you want an agent to produce the video from a prompt, HTML is the format it is best at, and that is HyperFrames.

What We Have Shipped With It

Every OneWave video since June has come out of HyperFrames, built from Claude Code with the hyperframes skills. Each one taught us something the docs did not:

• The 73-second site hero explainer. Thirteen scene sub-compositions in one host file, with a champagne-gold brand pass done entirely in CSS. Lesson: modularize early. A monolithic file is fine for 40 seconds; past a minute, one scene per file is the only way an agent can edit a beat without breaking its neighbors.
• The 47-second SendSafely MCP launch teaser. Kinetic type, a logo lock-dial of real tool marks, and a dual-surface hero showing the same MCP call in a terminal and a desktop app. Narration is edge-tts (Microsoft neural voices), which we prefer to the built-in Kokoro, and we verified every acronym by running npx hyperframes transcribe on the clips and reading the transcript back.
• The 73-second "Claude became the browser" explainer. A faceless explainer built from a blog post, with a mocked Claude interface rendered in HTML. Lesson: text to speech reads "ID" as a word. Write "I.D." in the script, and treat the transcript as the proof of pronunciation, not your ears.
• The 31.5-second Lone Star lead-agent demo. A client product demo built in the client's own design system, not ours. Lesson: when a ring gauge and its numeral are driven by two separate tweens they drift apart, because GSAP's progress callback is linear. Tween one proxy value and set both from it.
• Three 9:16 social recuts of an advisor podcast. Generated, not hand-authored: a Python script emits all three compositions from a per-clip card plan and a transcript.json. Lesson: never animate the clip element itself. HyperFrames owns visibility on anything with data-start, so fades go on an inner child or lint fails.

Why This Matters for Business

Video is the most expensive content most businesses produce, and the bottleneck is usually tooling and specialists. HyperFrames changes the economics:

• Templatable at scale. Because a composition is HTML with variables, you can batch-render variants - personalized demos, localized versions via multilingual TTS, per-account social clips - the same way you template a web page.
• No license friction. It is Apache-2.0 and published on npm with no per-render fees, so volume does not blow up your costs.
• The whole chain is built in. Voiceover, captions, transitions, overlays, audio mixing, and background removal all live in the tool - you are not stitching five subscriptions together.
• Agent-native means fast. A marketer can describe a video and have an agent produce an on-brand draft in minutes, then iterate in Studio.

Our Take

HyperFrames is one of those tools that quietly changes what a small team can ship. Three months of production use has not changed our read; it has made the tool more stable and given it a cloud render path we no longer have to build ourselves. We use it to turn product updates into explainer clips, client demos into 30-second proofs, and podcast appearances into social cuts, without booking a motion designer for any of it. If you want help wiring it into your Claude Code or Codex workflow - or you just want a batch of branded videos built - that is exactly the kind of work we do. Book a free call and we will scope it to your team.

Sources

• HyperFrames - GitHub repository (HeyGen, Apache-2.0)
• HyperFrames - GitHub releases (v0.8.27, September 3, 2026)
• hyperframes - npm package
• HyperFrames Quickstart - official documentation
• HyperFrames vs Remotion - official guide
• HyperFrames Catalog - blocks and components
• hyperframes.dev - community playground and frame.md design templates
• HyperFrames x HeyGen - HeyGen Help Center
• Video as Code: A Deep Dive into HeyGen's HyperFrames (engine internals)