HyperFrames explained

HyperFrames is free, open-source software by HeyGen that turns a web page into a video file. You, or an AI agent such as Claude Code, describe the video as HTML and CSS with a timed animation, and HyperFrames renders it to an MP4 one exact frame at a time. It is released under the Apache-2.0 license and lives at github.com/heygen-com/hyperframes.

For a creator, that means a Reel can be written instead of edited: the words, colors, timings and sounds are lines in a file, and changing them is a matter of changing text.

What HyperFrames is, and what it is not

HyperFrames is a framework plus a command-line tool, npx hyperframes. It is not a video editor app with a timeline you drag clips on, and it is not a generative AI model. It does not invent pictures. It draws exactly what the page describes: type, shapes, images, video clips and sound, positioned and animated by code.

It needs Node.js 22 or newer and FFmpeg on the computer that renders. For rendering it uses its own copy of Chrome, so your normal browser is not touched.

How a page becomes frames

A HyperFrames video is called a composition. It is an ordinary HTML file with a few extra attributes:

<div id="root" data-composition-id="hello" data-start="0"
     data-duration="4" data-width="1080" data-height="1920">
  <h1 id="title" class="clip" data-start="0.4" data-duration="3.4">HELLO</h1>
  <audio id="pop" src="sfx/pop.wav" data-start="0.4" data-volume="0.7"></audio>
</div>
<script>
  const tl = gsap.timeline({ paused: true });
  tl.from("#title", { scale: 0.4, duration: 0.35, ease: "back.out(2.2)" }, 0.4);
  window.__timelines["hello"] = tl;
</script>

Read it as three layers. The root says the canvas size and the length. data-start and data-duration say when each element is on screen and when each sound plays. The GSAP timeline says how things move; it is created paused, because HyperFrames, not the browser, decides which moment is shown.

When you render, HyperFrames never plays the page in real time. It asks for frame 0, then frame 1, and so on. For each frame it works out the time (frame number divided by the frame rate, 30 fps by default), moves every animation to exactly that moment, captures the pixels in Chrome and hands the frames to FFmpeg. FFmpeg encodes the video and mixes in every sound at its start time.

Why this suits short-form video

• Deterministic. The same file always renders the same frames. A slow computer does not drop moments; it just takes longer.
• Editable. The video is text. Change a word or a color and render again, without rebuilding anything.
• Reusable. Text, numbers, colors and images can be declared as variables. One design can then render ten headlines, or one video per row of a spreadsheet with --batch.
• Transparent output. Render a WebM or MOV with an alpha channel and lay captions, stickers or lower thirds over footage in any editor.
• Agent-friendly. Because it is plain HTML, coding agents can write it, check it and fix it.

The commands you will see

You rarely type these yourself when you work with Claude Code, but you will see them in its progress, and knowing them makes its reports easy to follow.

HyperFrames and Claude Code

HyperFrames ships skills for AI coding agents, installed with npx hyperframes skills. They teach the agent the composition contract, the animation rules and the command-line loop: plan, write valid HTML, lint, preview, check and render. With the skills installed, a prompt like "make a 6-second vertical hook with three words that slam in" is enough for Claude Code to produce a project that renders.

What the skills do not give you is taste and a kit: tested timings, sound placement, safe zones for Reels, fonts and finished designs. That is the layer a pack like Motion Cheat Code adds on top.

Limits worth knowing

• Every asset (fonts, images, sounds) must be local and loaded before the first frame; fetching during the render breaks it.
• Date.now() and unseeded Math.random() make frames differ between renders. Use a seeded random for confetti and particles.
• Heavy pages render slower than real time. Use draft quality while you iterate and full quality once.
• Small differences between computers (fonts, Chrome versions) can shift a pixel. HyperFrames can render in Docker when exact repeatability matters.

Where Motion Cheat Code fits

Motion Cheat Code is an independent pack built on top of HyperFrames: 60 finished templates as HyperFrames projects, 250 prompts and 6 Claude Code skills that know the kit. It is not affiliated with or endorsed by HeyGen. To see a HyperFrames project from the inside, the free starter kit includes one complete template.