HyperFrames: turn HTML into video

What HyperFrames is

HyperFrames is published by HeyGen at heygen-com/hyperframes under the Apache-2.0 licence. Its own tagline is "Write HTML. Render video. Built for agents." A video is an ordinary HTML file: text, images, video clips and audio laid out with CSS, moved with an animation library such as GSAP, CSS animations or Lottie. There is no React and no build step, so a page from a website or a design tool usually works close to as is.

How it works

Each element gets three attributes: data-start (when it appears, in seconds), data-duration(how long it stays) and data-track-index (which layer it is on). Animations are registered as a timeline the renderer can control.

To render, HyperFrames opens the page in headless Chrome, seeks the animation to the exact time of each frame, captures it, and hands the frames to FFmpeg. Because it asks for every frame instead of recording live playback, a slow computer doesn't drop moments, and the same input gives the same video every time.

The commands you'll use most:

• npx hyperframes init my-video starts a project, preview opens it in the browser with live reload.
• lint reads the HTML for common mistakes; check also opens a browser to test layout, motion and text contrast.
• snapshot --at 1,4,8 saves single frames as PNGs, so you can look before you render.
• render writes MP4, WebM, MOV, GIF or PNG frames (at 30 fps unless the page says otherwise).
• transcribe turns speech into word-level timestamps and tts makes a voice-over, both on your own computer.

HyperFrames also ships its own agent skills. In Claude Code: claude plugin marketplace add heygen-com/hyperframes, then claude plugin install hyperframes@hyperframes. For other agents: npx skills add heygen-com/hyperframes.

HyperFrames vs Remotion

HyperFrames' README says it is inspired by Remotion, and both render with headless Chrome and FFmpeg. The difference is how you write the video. Remotion uses React components that compute each frame from its number; HyperFrames uses plain HTML with a timeline it can seek. The licences differ too: HyperFrames is Apache-2.0 with no seat count, while Remotion is free for individuals and companies of up to three people and paid above that. Pick Remotion if your team already writes React; pick HyperFrames if you start from HTML or want an agent to write the video.

How Glidezo's skills use HyperFrames

Each of our code skills is a folder your agent reads (what is an agent skill?) with a small Node script. Your agent collects your text, screenshots or photos and writes them into a short JSON file. The script turns that JSON into a HyperFrames composition, and the agent runs check andsnapshot before the full render, so layout problems show up in seconds instead of after a minute of rendering.

Every skill pins HyperFrames 0.8.223, so a render today matches a render next month. On a 4-core computer, a 6-second title rendered in 13 seconds and a 23-second launch video in 79 seconds. The two image skills render a single frame to a PNG of the exact size each platform asks for.

All of them are free and MIT-licensed: download one from its page, or get every one from GitHub.