HyperFrames is an open-source tool that turns an HTML page into a video, for developers and coding agents who already write pages.
You mark a page, then it becomes frames
HyperFrames is HeyGen's name for a plain idea: the video is an HTML file. You say when a picture, a line of text, or a sound appears, how long it stays, and which layer it sits on. The program does not press play and hope. It asks the page for one exact moment, photographs that moment, then asks for the next. The same file comes back as the same video.
Their own quickstart is a six-second piece called launch, drawn at 1920 by 1080. A muted clip named intro.mp4 covers the whole six seconds on the bottom layer. The words "Launch day" come in at second 1 and stay for four seconds on the next layer. A music file runs the full six seconds at half volume on a third layer. A paused GSAP timeline fades that title up, and the page stores the timeline under the name launch so the renderer can jump to any moment without starting from zero.
- Timing lives on the element itself: data-start, data-duration, and data-track-index. There is no separate timeline file.
- Motion can come from GSAP, CSS, Lottie, Three.js, Anime.js, or the browser's own animation API. The timeline has to be paused and seekable. A normal animation that only runs on a wall clock will not land on the right frame.
- There is no build step. An index.html plays in the browser as it is. The command line is non-interactive, so a coding agent can scaffold, preview, and render without a person clicking through prompts.
What one render can be
On your own machine the output list is wider than the hosted API. The docs name five deliveries.
- MP4 for a normal file you can post.
- WebM when you need a transparent overlay on the web. GIF is the short preview, and the docs say a GIF has no audio.
- MOV when an editor wants a ProRes intermediate, including a transparent one.
- A PNG sequence when another program will composite the frames by hand.
HeyGen's cloud render is narrower. You zip the project and send it to POST /v3/hyperframes/renders. Frames per second run from 1 to 240, and the default is 30. Quality is draft, standard, or high. Shape is 16:9, 9:16, or 1:1. Format is MP4, WebM, or MOV. WebM and MOV can carry transparency, and that path does not do 4K. 4K is MP4 only, and the cloud page says 4K is billed at 1.5 times. One zip can make many videos: a variables object overrides the values marked in the page, so the same layout can swap a name or a number.
Four places the same file can render
- On the laptop: npx hyperframes render. Nothing to deploy. This is the free path.
- On HeyGen's cloud: hyperframes cloud render. They run Chrome and FFmpeg. You pay for the finished minutes.
- On your own AWS: hyperframes lambda render. Worth it only if you already run AWS. The repo ships an AWS Lambda package for chunked renders.
- On your own Google Cloud: hyperframes cloudrun render, through Cloud Run and Workflows. The docs say to use it only when the Google Cloud account is already yours.
There is also a browser surface called Studio for previewing and editing, and a site at hyperframes.dev for trying compositions. The files on disk stay the files. Studio, the command line, and the player are not three copies of the video.
What a minute costs, and what costs nothing
Local rendering is Apache 2.0. The README says there is no per-render fee and no commercial-use threshold. The cloud is a different bill. HeyGen's self-serve price page charges by the minute of output:
- 1080p at 30 fps: $0.10 a minute.
- 1080p at 60 fps: $0.20 a minute.
- 4K at 30 fps: $0.15 a minute.
- 4K at 60 fps: $0.30 a minute.
The enterprise page uses the same four numbers, but in credits per minute: 0.10, 0.20, 0.15, and 0.30. A credit is not labeled as a dollar there. The 4K rows are 1.5 times the matching 1080p rows, which matches the "4K is billed at 1.5 times" line on the cloud page.
Who has put a name on it
The repo keeps an adopters list with a person who can be asked. These are their words, not a review site.
- HeyGen, contact @jrusso1020: it powers composition and rendering across HeyGen's own video product.
- tldraw, contact @steveruizok: automated pull-request walkthroughs, with GSAP-animated code diffs, narration, and captions.
- Typeframe, contact @kiyeonjeon21: speech videos exported to MP4 with word-timed typing captions.
- Skyflo, contact @KaranJagtiani: product launch films written from script through soundtrack by agents.
- TanStack, contact @AlemTuzlak: the row says they are exploring it for short code-demo videos. That is not the same as shipping it.
The README also publishes ready-made blocks you add by name: flash-through-white for a shader transition, instagram-follow for a social overlay, and data-chart for an animated chart. One of the design templates, Coral, is a 1920 by 1080 poster frame. The picture on this page is that frame.
Where it sits next to Remotion
HyperFrames says it is inspired by Remotion, and that both render with headless Chrome and FFmpeg. The difference they claim is the authoring model. Remotion asks for React components and a bundler. HyperFrames asks for an HTML file that plays without a build. Their comparison table also contrasts the license: Apache 2.0 on their side, and a source-available Remotion license on the other. That table is HyperFrames' own comparison, not an independent test.