HyperFrames v0.8.107: Writing videos in HTML, HeyGen's official rendering plugin for agentsHyperFrames v0.8.107：用 HTML 写视频，HeyGen 官方给智能体的渲染插件

In the traditional practice, "make a video with code" means that you have to learn the React component system of Remotion, and the threshold is not low. HyperFrames takes this back to what web developers already know: an HTML file with CSS, SVG, images, audio, and an addressable animated timeline. You write the page, it renders MP4.

The official positioning of it is "deterministic" rendering - the same HTML renders exactly the same frame every time, which is critical for scenes that need to be batched out or connected to an automated pipeline. The above image is the official demo in its README: on the left is the HTML code, and on the right is the rendered video screen.

It's not just for your handwriting. At the same time, the project released 21 skills and a list of plug-ins for clients such as Claude Code/Codex/Cursor/Gemini CLI. After the agent is installed, it can receive the requirements of "making a 10-second product lead", and complete the complete process of planning, writing HTML, receiving animations, adding materials, linting, previewing, and rendering by itself.

We downloaded the official release v0.8.107 of hyperframes-agent-plugin.zip, unzipped 1153 entries, which also comes with multiple client plugin list directories: .claude-plugin/, .codex-plugin/, .cursor-plugin/, etc., which client is installed to see which directory.

There are three layers of skills: first, the "router"/hyperframes, which is responsible for reading your needs and confirming the creative points before deciding which specific workflow to call; then, the creative workflow (short video, slideshow, general video, Remotion migration, etc.); and finally, the domain skills that are loaded on demand, covering key frames, creative direction, media assets, audio mixes, registry components, Figma imports, etc.

Regarding media materials, the/media-use in the package is worth mentioning: it unifies the needs of BGM, sound effects, images, icons, logos, dubbing, and coloring to resolve local files or code blocks that can be directly pasted, while maintaining a list record to avoid duplicate downloads of the same material in multiple projects.

The pure CLI route (no agent required) requires Node.js 22 + and FFmpeg: npx hyperframes init my-video to build the project. After entering the directory, the npx hyperframes preview is previewed in the browser in real time, and the npx hyperframes render outputs MP4.

If you connect the agent, Claude Code uses the official plug-in marketplace: claude plugin marketplace add heygen-com/hyperframes, and then claude plugin install hyperframes @ hyperframes; other clients that support skills use npx skills add heygen-com/hyperframes, or directly npx hyperframes skills update to install the core skill set.

Note a point that is easy to step on: the interactive selector does not preselect anything by default, you only need to check the "Core Skills" group, the missing authoring workflow will be automatically installed when used; and running npx skills add in a scripted or unattended environment without parameters will load 21 skills. To keep your skills up to date, use npx hyperframes skills update instead of skills add, which takes registry snapshots that may be delayed.

This site provides the original file of the official v0.8.107 plug-in package, about 11.87 MB, including a full set of plug-in lists and skill files, which are decompressed and ready to use. The accompanying drawings are taken from the official demo animation and official template preview of the project warehouse.

Reminder: It is the rendering core of HeyGen open source, local rendering will eat CPU, long video is recommended to use the official cloud render (cloud render) or AWS Lambda package.

This article is compiled from public sources and ships with the matching resource. Product features and pricing are subject to the official page. Resources are for learning and exchange only — please respect the original license.