HyperFrames

HyperFrames

HyperFrames

HyperFrames是由HeyGen开源的代码驱动视频生成框架，核心理念是"Write HTML. Render video. Built for agents."。它将HTML作为视频描述语言，通过带时间属性的DOM结构定义视频内容，利用headless Chrome的确定性渲染技术生成MP4或WebM视频。

核心设计

  • HTML-native视频描述：使用data-composition-id、data-start、data-duration、data-track-index等数据属性，将视频抽象为具有时间维度的DOM结构。没有专有DSL，没有React强依赖，没有封闭格式。
  • 确定性渲染（Deterministic Rendering）：通过Chrome的HeadlessExperimental.beginFrame API逐帧seek和capture，无墙钟时间依赖，不丢帧，相同输入保证相同输出。
  • AI-first / Agent-native：CLI默认非交互式，输出纯文本，适合Claude Code、Cursor、Gemini CLI、Codex等Agent直接调用。

包体系

包名 功能
@hyperframes/core 类型系统、HTML解析与生成、linter、runtime、Frame Adapter
@hyperframes/engine 底层渲染引擎，使用headless Chrome逐帧捕获
@hyperframes/producer 编码、音频混音、Docker支持，完整的HTML-to-video流水线
@hyperframes/studio 浏览器内的可视化编辑与预览界面
@hyperframes/player 轻量级Web Component（3KB gzipped），用于嵌入生成的视频

使用方式

  1. 作为Agent技能：运行npx skills add heygen-com/hyperframes，在Claude Code中通过/hyperframes、/hyperframes-cli、/gsap等命令调用。
  2. 手动CLI：运行npx hyperframes init my-video初始化项目，通过preview预览、render输出MP4。

环境要求

  • Node.js 22+
  • FFmpeg
  • Headless Chrome

项目状态

截至2026年4月，GitHub上约1.2k stars、93 forks、31个releases，最新版本v0.4.2（2026年4月16日），采用Apache-2.0许可证。仓库语言以HTML（64.6%）和TypeScript（34.5%）为主。

适用场景

  • 产品介绍视频
  • 社交媒体视频
  • PDF摘要视频
  • 数据可视化视频
  • 带TTS的竖屏hook视频
  • 信息密集型、模板化、数据驱动型、可编排型视频

局限性

  • 代码优先系统，对纯运营人员有学习门槛
  • 依赖Node.js 22+、FFmpeg和headless Chrome，更适合工程环境
  • 对依赖人工审美和复杂剪辑的创意性内容适用性有限
分享到