HeadsUpAI

HeyGen Adds HTML-in-Canvas Effects to HyperFrames for Programmable 3D Video

· Updated

HeyGen, an AI video generation platform specializing in realistic digital twins, updated its open-source HyperFrames framework to support native HTML-in-canvas rendering. This allows live web content to be mapped onto GLTF (a standard 3D file format) objects. These effects are now part of a centralized catalog for one-command installation.

The update bridges the gap between raw code and cinematic production by providing a registry of assets that the HyperFrames skill for AI coding agents can discover. It ensures product screens remain sharp and animated, positioning the framework as a modular alternative to Remotion's React-based workflow.

You can add these effects using npx hyperframes add followed by the block name. The framework is Apache 2.0 licensed, enabling professional motion graphics rendering locally. HeyGen's original agent skills have been updated to help assistants like Claude Code navigate the new catalog.

View the full update on github.com
HeyGen
HeyGen
@HeyGen
X

Amazed by HTML-in-canvas demos? it's natively supported by @HyperFrames_ and we built a catalog of effects anyone can use with one command $ npx hyperframes add html-in-canvas take your videos to the next level https://t.co/v2uyXjQS0i

64retweets459likes
View on X

Still wondering? A few quick answers below.

HyperFrames is an open-source video rendering framework from HeyGen that allows developers and AI agents to create video compositions using HTML, CSS, and GSAP. Unlike traditional video editors, it treats video as code, enabling deterministic rendering where the same input always produces an identical MP4 file locally without requiring external API keys or cloud processing.

The HTML-in-canvas capability allows live web content to be rendered directly inside a canvas element, which can then be mapped onto 3D objects like iPhones or MacBooks. This enables the creation of realistic product showcases where the device screens display functional, animated HTML that responds to the framework's central animation timeline and deterministic camera choreography.

Yes, HyperFrames is completely open source under the Apache 2.0 license. This allows individuals and organizations to use the framework commercially at any scale without per-render fees, seat caps, or company-size thresholds. Users can download the source code from GitHub and run the rendering engine locally on their own hardware using Node.js and FFmpeg.

Users can add cinematic effects, shader transitions, and social overlays to their projects using a single terminal command: npx hyperframes add followed by the effect name. This system uses a registry pattern similar to shadcn, allowing developers and AI agents to quickly install pre-built visual blocks from the official HyperFrames catalog into their local video compositions.

While both tools drive headless Chrome for deterministic video rendering, HyperFrames focuses on plain HTML, CSS, and GSAP rather than React components. This approach is designed to be more accessible for AI agents that already understand HTML. Additionally, HyperFrames is fully open source under Apache 2.0, whereas Remotion uses a source-available license that requires payment for certain commercial tiers.

Share this update