Back to the pack

Glossary

HyperFrames

Open-source software by HeyGen that renders a web page into a video file, one exact frame at a time.

Updated

HyperFrames is free, open-source software by HeyGen that turns a web page into a video. A HyperFrames video, called a composition, is an HTML file: HTML and CSS for the look, timing attributes that say when each element is on screen, a paused animation timeline for the motion and audio tags for sound. HyperFrames renders that page to MP4 (or another format) one frame at a time. The code is at github.com/heygen-com/hyperframes under the Apache-2.0 license.

How it works

When you render, HyperFrames does not play the page in real time. It asks for frame 0, then frame 1, and so on. For each frame it computes the exact time (the frame number divided by the frame rate, 30 fps by default), moves every animation to that moment, captures the pixels in its own copy of Chrome and passes the frames to FFmpeg, which encodes the video and mixes in the sound at each element's start time.

Because the page is asked for exact moments instead of being played, the same file always gives the same frames. A slow computer takes longer, but it never drops a frame.

What you use it for

  • Motion graphics: kinetic type, counters, charts, title cards and logo stings.
  • Social video: Reels, TikToks and Shorts at 1080 x 1920.
  • Overlays with transparency: captions, lower thirds and stickers rendered as WebM or MOV with an alpha channel.
  • Many versions of one design: variables plus batch rendering from a data file.

The command line

HyperFrames is used through npx hyperframes: init creates a project, preview opens the Studio to play and scrub it, lint and check look for problems, snapshot saves still frames, and render produces the file. It also ships skills for AI coding agents, so an agent such as Claude Code can write and render compositions from a plain-language request.

A composition's motion usually lives in a GSAP timeline, and turning it into a file is called a render. For a longer walkthrough, see HyperFrames explained. Motion Cheat Code is an independent pack of HyperFrames templates and prompts; it is not affiliated with HeyGen.

To look inside a finished composition, the free starter kit includes one complete HyperFrames template to open and render.

Questions

Who makes HyperFrames?

HeyGen. It is open source under the Apache-2.0 license, with the code at github.com/heygen-com/hyperframes.

What does HyperFrames need to run?

Node.js 22 or newer and FFmpeg. It downloads its own copy of Chrome for rendering.

Is HyperFrames an AI video generator?

No. It renders exactly what the page describes. An AI agent such as Claude Code can write that page, but HyperFrames itself does not invent images or motion.