HyperFrames：HeyGen 的开源框架，将视频当作 HTML 来编写

HyperFrames 是 HeyGen 推出的开源视频渲染框架，让您使用标准的 HTML、CSS 和 JavaScript 编写视频，并将其渲染为 MP4、WebM 或 MOV 格式。其标语说得清楚明白：“写 HTML，渲染视频，为代理而生。”

版本 v0.4.11（2026 年 4 月），采用 Apache 2.0 许可。HyperFrames 代表了一种从根本上不同的程序化视频创作方式——从底层就是为 AI 编码代理而非人类视频编辑者所设计。

目录

1. HyperFrames 有何不同？
2. 工作原理
3. 快速入门
4. 专为 AI 代理打造
5. 设计系统预设
6. 预建组件
7. 渲染管线
8. 内置 TTS 与字幕
9. 网站捕获
10. 帧适配器模式
11. 确定性渲染
12. 当前限制
13. 开始使用

HyperFrames 有何不同？

在 HyperFrames 之前，程序驱动视频的标准方法是 Remotion，它需要 React（TSX）组件和完整的打包器管线。HyperFrames 完全去掉了这些：

核心洞察在于，AI 编码代理已经能流畅地"使用"HTML 和 CSS。通过移除 React 依赖和打包器，HyperFrames 让代理能够更轻松地自主编写视频。

工作原理

HyperFrames 的构成是一个带有特殊 data-* 属性的 HTML 文件，这些属性控制时间、图层和渲染行为。GSAP（GreenSock 动画平台）负责处理实际的动画。

<!-- 一个基本的 HyperFrames 构成 -->
<div data-duration="5" data-track-index="1">
  <h1>你好，视频世界</h1>
  <p class="slide-in">这段文字会动画进入画面</p>
</div>

核心属性

构成文件是纯 HTML 文件，您可以像任何网页一样在浏览器中预览，然后通过 CLI 渲染成视频。

快速入门

CLI 工作流程刻意保持简洁：

# 初始化新项目
npx hyperframes init my-video

# 在浏览器中实时重新加载预览
npx hyperframes preview

# 渲染为 MP4
npx hyperframes render

这就是整个工作流程。不需要打包器配置、构建步骤或框架样板。

专为 AI 代理打造

这是 HyperFrames 真正与众不同的地方。该框架附带一个安装程序，可教导您的 AI 编码代理如何编写视频：

npx skills add heygen-com/hyperframes

安装完成后，代理即可使用三个专用斜杠命令：

• /hyperframes — 从头开始编写新视频
• /hyperframes-cli — CLI 命令和项目设置的协助
• /gsap — GSAP 动画协助与语法参考

这些命令可跨 Claude Code、Cursor、Gemini CLI 和 OpenAI Codex 使用。AI 代理可以从"创建一个 30 秒的产品演示视频"这样的文本提示，直接生成渲染好的 MP4 文件，完全无需人工介入。

HeyGen 用他们自己的发布视频验证了这一点——整个 49.77 秒、1080p @ 30fps 的制作构成已在 GitHub 上开源，包含 17 个子构成，使用了 CSS 动画、GSAP、Lottie、Three.js 和着色器过渡。这个视频是由 AI 代理创作的。

设计系统预设

HyperFrames 附带八种视觉风格预设，为您的视频提供不同的美学方向：

1. Swiss Pulse — 干净、极简的瑞士设计，搭配大胆的排版
2. Velvet Standard — 温暖、高级的美学，使用丰富的渐变
3. Data Drift — 科技前卫风格，专为数据可视化优化
4. Shadow Cut — 戏剧性的高对比外观，搭配厚重的阴影
5. Neon Grid — 赛博朋克风格，带有发光元素
6. Paper Grain — 纹理模拟风格，带有细微的颗粒叠加
7. Glassmorphism — 毛玻璃效果，搭配模糊背景
8. Mono Chrome — 单色调色板，确保品牌一致性

每个预设都会全局调整色彩、排版、间距、过渡和叠加样式。

预建组件

HyperFrames 包含 50 多个立即可用的组件，可通过组件目录访问。这些涵盖了常见的视频制作需求：

• 着色器过渡 — GPU 加速的交叉淡变、擦拭和效果
• 社交叠加 — Instagram、TikTok、YouTube 格式的叠加
• 数据图表 — 动画条形图、折线图和饼图
• 下方三分之一 — 专业的字幕和名称叠加
• 进度条 — 动画时间轴指示器
• 倒计时器 — 活动和发布倒计时
• 工具提示与标注 — 引导注意力的注解

渲染管线

技术管线简单但有效：

1. Puppeteer 启动无头 Chrome 实例
2. 构成的每个帧从浏览器中以屏幕截图方式捕获
3. FFmpeg 将帧序列编码为目标视频格式（MP4、WebM 或 MOV）

由于原始素材是在实际浏览器引擎中渲染的标准 HTML，网页上能运行的一切——CSS 动画、canvas、WebGL、Three.js、Lottie——都能在 HyperFrames 视频中使用。

内置 TTS 与字幕

HyperFrames 将文本转语音和字幕生成作为一级 CLI 命令：

# 从文本生成配音音频
npx hyperframes tts --text "您的脚本内容" --output voiceover.wav

# 从音频生成时间轴字幕
npx hyperframes transcribe --input voiceover.wav --output captions.srt

这意味着一个完整的视频，包含旁白和字幕，可以从单一文本输入生成。

网站捕获

一个意想不到但功能强大的特性：您可以将任何实时网站通过 HyperFrames 构成方式捕获为视频。

npx hyperframes capture https://example.com

这开启了创意的可能性——产品页面变成视频广告、文档导览、动态仪表板录制为屏幕录像——完全不需要手动编写 HTML。

帧适配器模式

HyperFrames 通过其帧适配器架构支持多种动画框架。您可以选择适合使用场景的动画引擎：

您可以在单个构成中混合使用不同的适配器——例如，Three.js 的 3D 开场、GSAP 动画的主段落，以及贯穿全片的 Lottie 图标。

确定性渲染

HyperFrames 被设计为确定性的：相同的输入总是产生相同的输出。没有 Math.random()、没有时钟漂移、没有帧时间抖动。这个特性对于以下方面至关重要：

• CI/CD 管线 — 在自动化构建中渲染视频，结果可预测
• AI 代理工作流程 — 代理可以反复精炼构成，知道每次渲染都是可重现的
• 回归测试 — 与先前的渲染进行逐帧比较

当前限制

作为一个早期项目（v0.4.x），HyperFrames 有一些重要的限制需要注意：

• 无分布式渲染 — 与 Remotion 的 Lambda 集成不同，HyperFrames 在单机上渲染。长片或复杂视频的实际渲染时间将与其长度成正比。
• 不建议 4K/60fps — 捕获再编码的管线是为 1080p @ 30fps 设计的。更高的分辨率和帧率会很慢。
• 需要 Node.js >= 22 — 不支持较旧的 Node.js 运行环境。
• 必须安装 FFmpeg — 它不随 npm 包一同打包。
• 生态系统较小 — 50 多个内置组件是不错的起点，但社区模板库与成熟工具相比仍然有限。

开始使用

系统要求：Node.js 22 或更高版本，FFmpeg 安装于 PATH 中。

# 创建新项目
npx hyperframes init my-first-video
cd my-first-video

# 在浏览器中预览
npx hyperframes preview

# 编辑构成（它只是 HTML）
# open src/composition.html

# 渲染为视频
npx hyperframes render

加入 AI 代理技能，让 Claude、Cursor 或 Gemini 为您创作：

npx skills add heygen-com/hyperframes

然后只需对您的代理说：“使用 Swiss Pulse 预设，创建一个 20 秒的产品发布视频，包含倒计时器和着色器过渡。”

总结

HyperFrames 将视频创作重新定义为一种编程活动，而非设计活动。通过使用 HTML 作为创作格式，并保持工具链极简（无打包器、无框架、无专有 DSL），它让程序化视频对任何能编写网页的人来说都触手可及——尤其是对那些越来越多为我们编写网页的 AI 代理而言。

它尚不能取代 Remotion 在生产级分布式渲染工作流程中的地位，但对于个人创作者、初创公司和 AI 代理管线而言，HyperFrames 提供了真正的新事物：用我们描述网页的同一种语言来描述视频，然后无缝地将其渲染出来。

源码可在 GitHub 获取，文档位于 hyperframes.heygen.com，而使用该工具本身创作的发布视频也在 hyperframes-launch-video 仓库中开源。