HyperFrames: make videos from an HTML file, with your AI agent writing it

What it does and who it is for

HyperFrames, from the HeyGen team, turns a web page into a video. You (or your AI agent) describe the video as an HTML file: text, images, clips, music and animation, each with a start time and a length. HyperFrames then plays that page frame by frame in a hidden Chrome browser and records it as an MP4. Same file in, same video out, every time.

That matters for a small business because agents already write HTML well. Instead of learning a video editor, you ask Claude Code or Codex for "a 15-second clip announcing our Sunday opening hours", read the plan it proposes, and get a file you can post, change and render again next month with new prices.

It suits owners and staff who make short promo clips, explainers, captioned videos or animated slides, and builders who want repeatable video from data. The HyperFrames skills are installed on my machine for both Claude Code and Codex.

What you need first

• Node.js 22 or newer and FFmpeg. On a Mac: brew install node ffmpeg.
• Claude Code or Codex (other agents that read skills also work, per the README).
• About 20 minutes for install and a first draft render.
• The skill is free, but it runs inside a coding agent such as Claude Code or Codex, which may need a paid plan.

Install (checked 30 Sep 2026)

Pick one route. These commands are from the upstream README as of 30 Sep 2026.

Claude Code plugin:

claude plugin marketplace add heygen-com/hyperframes
claude plugin install hyperframes@hyperframes

Then start with /hyperframes:hyperframes in Claude Code.

Skills only (Claude Code, Codex and others):

npx skills add heygen-com/hyperframes

The picker opens with nothing ticked. Choose the "Core Skills" group; the main /hyperframes skill installs the specific workflows (product video, captions, slides and so on) when a job needs them. If an agent is running the install for you, the README says to use npx hyperframes skills update instead, which installs the same core set without the picker.

CLI only, no agent:

npx hyperframes init my-video
cd my-video
npx hyperframes preview
npx hyperframes render

preview opens the video in your browser and reloads when the file changes. render writes the MP4.

What I checked: in a throwaway folder, npx hyperframes init my-video --non-interactive (version 0.8.92) created the starter project, npx hyperframes lint reported 0 errors and 0 warnings, and npx hyperframes render -q draft produced a 10-second 1920×1080 MP4 in the renders/ folder. I did not run the plugin install for this guide, because that changes your real Claude Code setup.

First use

Open Claude Code in an empty folder with a few photos in ./photos and try:

What the README describes (I tested the CLI render above, not this agent run): the agent confirms the brief with you first (length, size, text, music), then writes an index.html composition, runs the linter, opens a preview and renders an MP4 into renders/. Watch the preview before you render the final version. Change the text in the HTML or ask the agent, and render again.

For vertical social video, init also takes --resolution portrait (1080×1920).

HyperFrames or Remotion?

Remotion is the older, well-known tool for code-made video. Both record a browser with FFmpeg. The honest differences:

• How you write it. Remotion videos are React components and need a build step. HyperFrames videos are plain HTML files that play as they are. For an agent, or for you reading the file later, plain HTML is easier to check.
• Licence. HyperFrames is Apache-2.0: free for any company size. Remotion uses its own licence. I read it on 30 Sep 2026: it is free for individuals, for-profit companies with up to 3 employees, non-profits, and for evaluation before commercial use. A bigger for-profit company needs a paid Company License from remotion.pro. The licence file also notes the terms will change slightly in Remotion 5.0, so read the current LICENSE.md yourself.
• Maturity. HyperFrames' own comparison credits Remotion with a mature cloud renderer. If you already run Remotion at scale, that is a real reason to stay.

If you have old Remotion projects, HyperFrames ships a remotion-to-hyperframes skill that ports a composition across.

How it chains with other entries

• video-use edits real footage: it cuts the ums, adds captions and can call HyperFrames to build animated overlays.
• AI-assisted visual QA shows how to check screen output with screenshots before calling it done; the same habit applies to a video preview.

Watch-outs

• Rendering uses your computer. Long or 4K videos take time and CPU. Start with -q draft.
• Telemetry. The CLI's help text says renders send anonymous telemetry. Read the HyperFrames docs if that matters for your work.
• Rights. Only use photos, music and fonts you own or have a licence for. HyperFrames makes the video; it does not clear the rights.
• Music and media services. Asking the agent for music it does not have can lead it to generate or fetch media through outside services, some paid. Give it a licensed local file, and require your OK before any paid generation or upload.
• Posting is yours. Nothing here posts to social media. Watch the final file before it goes out, especially prices, dates and phone numbers.

Link and credit

Repo: heygen-com/hyperframes, Apache-2.0, by HeyGen. Docs: hyperframes.heygen.com. All credit for the tool goes to its authors; this page is my own walkthrough.