Language: 日本語English

hyperframes Plugin

Author
HeyGen
Category
Design
Topics
Design & Media Production · Web & App Development
First seen
2026-07-09
Last confirmed
2026-07-13
Explanation last updated
2026-07-12

The explanation below is AI-generated. Please verify it against the sources.

HyperFrames is an open-source framework by HeyGen for turning HTML, CSS, media, and seekable animations into deterministic MP4 videos. It can be used locally via a CLI, driven by AI coding agents through installable "skills," or embedded as the rendering core behind hosted authoring workflows. Compositions are plain HTML files with data attributes for timing and tracks, and animation is handled through adapters such as GSAP, CSS, Lottie, Three.js, Anime.js, or WAAPI. Rendering seeks each frame in headless Chrome and encodes the result with FFmpeg, so the same input always produces the same output. The project is licensed under Apache 2.0 and, per the README, is used in production at HeyGen with community examples from teams like tldraw and TanStack.

Overview

HyperFrames is an open-source (Apache 2.0) video-rendering framework/CLI from HeyGen. According to the README, it parses HTML/CSS compositions with timing data attributes, drives headless Chrome to capture frames, and encodes deterministic MP4 output with FFmpeg; it also ships 20 agent "skills" so AI coding agents (e.g., Claude Code, Cursor, Gemini CLI, Codex) can compose and render videos.

What you can do with hyperframes

  • Author video compositions as plain HTML/CSS files with data-* timing attributes, tracks, and sub-compositions, previewable in a browser with no build step
  • Animate elements using GSAP, CSS animations, Lottie, Three.js, Anime.js, WAAPI, or a custom frame adapter
  • Add captions/subtitles, voiceovers, background music, and audio-reactive visuals via the media handling in the toolchain
  • Capture an existing website and turn it into a video (website-to-video)
  • Install and use catalog blocks/components (e.g., shader transitions, social overlays, animated charts) via npx hyperframes add
  • Render locally, in Docker, or on AWS Lambda for distributed rendering, and lint/inspect/preview projects via the CLI
  • Install AI agent skills (e.g., product-launch-video, PR-to-video, faceless-explainer, slideshow, music-to-video) so coding agents can plan, write, and render compositions
  • Port existing Remotion (React) compositions to HyperFrames HTML via the /remotion-to-hyperframes skill

Sources

Original description (English)

HyperFrames by HeyGen. Write HTML, render video. Compositions, GSAP and runtime adapter animations, captions, voiceovers, audio-reactive visuals, and website-to-video capture for HyperFrames.

History of hyperframes

Back to list