Hyperframes by HeyGen：写 HTML 就能生成视频，专为 AI Agent 设计

> 一句话版本： HeyGen（那个做 AI 数字人的公司）开源了一个视频渲染框架 —— 你写的 HTML 直接渲染成 MP4，浏览器预览即在，完全确定性的帧级输出。而且整个 CLI 是非交互式的，专门给 AI Agent 用。

• 来源： https://github.com/heygen-com/hyperframes
• 文档： https://hyperframes.heygen.com
• 日期： 2026 年 4 月发布，持续活跃
• 作者： HeyGen（AI 视频公司，数字人/虚拟主播领域知名）
• 许可： Apache-2.0（完全开源，OSI 批准）
• 安装： npx hyperframes init my-video
• 安装 Agent Skills： npx skills add heygen-com/hyperframes

项目背景

Hyperframes 是 HeyGen 开源的一个视频渲染框架。HeyGen 自己的产品就重度依赖程序化视频生成，所以内部开发了这套工具，然后把它开源了。

核心定位："Write HTML. Render video. Built for agents."

就是三个要点：

1. 写 HTML — 不需要学新的 DSL，视频就是 HTML 文件加 data 属性

2. 渲染视频 — 浏览器 + FFmpeg，确定性帧输出

3. 为 AI Agent 设计 — CLI 默认非交互，Agent 可以直接驱动

和 Remotion 的直接竞争

Hyperframes 的 README 大大方方承认灵感来自 Remotion，甚至保留了 attribution comments。但两者有三点根本性差异：

许可差异是核心： Remotion 的源码在 GitHub 上，但不是在 OSI 定义下的"开源"（Remotion License 要求公司付费）。Hyperframes 是真正的 Apache 2.0，商用无限制、无需按渲染次数付费、无座位数限制。

核心架构

定义视频：HTML + data 属性

<div id="stage" data-composition-id="demo"
     data-start="0" data-width="1920" data-height="1080">

  <video id="clip-1" data-start="0" data-duration="5"
         data-track-index="0" src="intro.mp4" muted playsinline></video>

  <h1 id="title" class="clip"
      data-start="1" data-duration="4" data-track-index="1"
      style="font-size: 72px; color: white;">
    Welcome to Hyperframes
  </h1>

  <audio id="bg-music" data-start="0" data-duration="5"
         data-track-index="2" data-volume="0.5" src="music.wav"></audio>
</div>

• data-start：起始时间（秒）
• data-duration：持续时长（秒）
• data-track-index：轨道层级（类似 Photoshop 图层顺序）
• class="clip"：标记为可动画元素

渲染流程

npx hyperframes preview   # 浏览器即时预览，HTML 修改热更新
npx hyperframes render    # 渲染为 MP4

渲染引擎：

1. 在 headless Chrome 中加载 HTML

2. 通过 beginFrame API 逐帧捕获（frame = floor(time * fps)）

3. FFmpeg 管道编码为最终视频

确定性： 相同的输入永远产生相同的输出。Date.now()、Math.random() 等非确定性源被禁止。CI 测试和批量渲染不需要担心不一致问题。

Frame Adapter 模式

动画运行时通过 Frame Adapter 可插拔，不是锁定一个动画库：

每个 Adapter 通过 seek-to-frame 接口工作——渲染引擎说"给我第 300 帧"，Adapter 把动画跳转到 300 帧位置画出来。

目录结构

packages/
├── cli/                    # CLI 工具
├── core/                   # 类型、解析器、lint、运行时
├── engine/                 # 捕获引擎（Puppeteer + FFmpeg）
├── producer/               # 完整渲染管线
├── player/                 # <hyperframes-player> Web Component
├── studio/                 # 可视化编辑器 UI
└── shader-transitions/     # WebGL shader 过渡效果
registry/
├── blocks/                 # 50+ 可安装合成组件
├── components/             # 效果和片段
└── examples/               # 项目模板
skills/                     # Agent Skill 定义
docs/                       # Mintlify 文档站

AI Agent 集成

这块是 Hyperframes 与其他视频框架最大的不同。

Agent Skills

npx skills add heygen-com/hyperframes

安装后的技能有：

支持的工具

非交互式 CLI

npx hyperframes init        # 只接受标志参数
npx hyperframes lint        # 静态 HTML 检查
npx hyperframes validate    # 运行时检查（Chrome 执行）
npx hyperframes render      # 渲染 — 所有参数通过 flag

没有任何提示界面。Agent 可以直接 --output demo.mp4 调用，不需要模拟键盘输入或解析交互式菜单。

对比 HeyGen 产品线

Hyperframes 是 HeyGen 体系中技术控制粒度最大、最 Agent 友好的一层。

使用场景

1. AI 自动生成营销视频 — Agent 看需不需要宣传视频，直接生成

2. 数据可视化动画 — 渲染 CSV 到动画条形图比赛

3. 社交媒体内容 — 9:16 TikTok 风格钩子视频 + TTS 同步字幕

4. GitHub 仓库介绍视频 — 读取 README，自动生成 45 秒演示视频

5. PDF 转视频 — 把报告变成视频简报

6. CI 测试 — 视频输出作为功能测试的截图基线

评分

值得关注的细节

1. 许可选择的意义 — HeyGen 作为一家商业公司，开放出自己的渲染框架并选 Apache 2.0，对 Remotion 的专有许可形成了直接竞争压力。这对于在乎开源定义的项目很重要。

2. "Agent 最先"的设计理念 — 不是"支持 AI Agent"，而是为 AI Agent 从底层设计。CLI 非交互、输出纯文本、错误快速失败 —— 这些看似简单的设计决策，决定了 Agent 能不能流畅使用。

3. GSAP 作为主要动画引擎 — GSAP 在 Web 动画领域是老牌工具了，Hyperframes 押注 GSAP 的 seek-by-frame 能力比 CSS/Web Animations API 的 seek 更稳定。这也意味着如果要深度使用需要学 GSAP。

4. HeyGen 的产品布局 — 从 Studio（可视化）→ API（模板化）→ Hyperframes（代码级），逐步开放了不同粒度的视频控制能力。Hyperframes 是技术最开放但使用门槛最高的一层。

一句话总结

> HeyGen 把自家的视频渲染引擎开源了，用 HTML 写 composition、直接渲染 MP4、完全确定性输出 —— 而且整个工具链是从底层为 AI Agent 设计的。和 Remotion 相比最大的优势是真正的开源（Apache 2.0）和无构建步骤。