HeyGen 开源了一个"用 HTML 写视频"的框架，我研究了一下，发现事情没那么简单

掘金前端

作者 AIReadingHub

2026年4月27日 01:30

HeyGen 最近开源了一个叫 Hyperframes 的项目，GitHub 上已经拿到 11.2k Star。

一句话描述：用 HTML 写视频，专门为 AI Agent 设计。

听起来好像没什么新鲜的——Remotion 不是早就能用代码生成视频了吗？但仔细研究之后，我发现 Hyperframes 做的事情比"换个语法"要深得多。它的真正野心是：让 AI 自己拍视频。

今天这篇文章，我会从三个层面拆解：

Hyperframes 到底是什么，怎么用
和 Remotion 等竞品的核心差异
为什么说它可能代表了"程序化视频"的下一个范式

一、Hyperframes 是什么

Hyperframes 是 HeyGen（全球最大的 AI 数字人视频公司之一）开源的视频渲染框架。

核心逻辑非常直白：

你写一个 HTML 文件 → 框架用无头浏览器逐帧截图 → FFmpeg 编码成 MP4。

但它聪明的地方在于，它不只是一个"HTML 转视频"的工具，而是围绕 AI Agent 的工作流做了完整的设计。

技术栈一览

组件	技术
渲染引擎	Puppeteer（无头 Chrome）+ FFmpeg
动画系统	GSAP 为主，支持 Lottie、CSS、Three.js 等
CLI 工具	Node.js（需要 22+）
视频捕获	image2pipe 流式传输到 FFmpeg
特效系统	WebGL 着色器转场（@hyperframes/shader-transitions）
播放器	可嵌入的 `<hyperframes-player>` Web Component

架构设计

Hyperframes 拆成了 7 个包，各司其职：

hyperframes（CLI）：项目脚手架、预览服务器、渲染编排
@hyperframes/core：类型定义、解析器、Linter、运行时
@hyperframes/engine：Puppeteer-FFmpeg 可寻址的捕获引擎
@hyperframes/producer：完整流水线：捕获 + 编码 + 音频混合
@hyperframes/studio：浏览器端的可视化编辑器
@hyperframes/player：可嵌入的播放组件
@hyperframes/shader-transitions：WebGL 转场特效

这个模块拆分有讲究——每一层都可以独立使用，你可以只用 engine 做帧捕获，也可以用完整的 producer 走全流程。

二、5 分钟上手教程

前置条件

Node.js 22+
FFmpeg 7.x+（brew install ffmpeg 或 apt install ffmpeg）

方式一：AI Agent 驱动（推荐）

如果你用 Claude Code、Cursor 或 Gemini CLI：

npx skills add heygen-com/hyperframes

安装后你会获得几个 slash 命令：/hyperframes、/hyperframes-cli、/gsap。

然后你直接用自然语言描述你要什么视频：

"用 /hyperframes 做一个 10 秒的产品介绍，暗色背景，标题渐入，配上背景音乐。"

AI 会自动帮你写 HTML 组合，生成视频。这才是 Hyperframes 真正想推的工作流。

方式二：手动创建

第 1 步：初始化项目

npx hyperframes init my-video
cd my-video

生成的目录结构：

my-video/
├── meta.json           # 项目元数据
├── index.html          # 根组合文件（入口）
├── compositions/       # 子组合
│   ├── intro.html
│   └── captions.html
└── assets/             # 媒体文件

第 2 步：预览

npx hyperframes preview

在浏览器中打开 Studio，支持热重载——改 HTML 就能实时看到效果。

第 3 步：编写视频组合

一个最简示例：

<div id="root" data-composition-id="my-video"
     data-start="0" data-width="1920" data-height="1080">

  <h1 id="title" class="clip"
      data-start="0" data-duration="5" data-track-index="0"
      style="font-size: 72px; color: white; text-align: center;
             position: absolute; top: 50%; left: 50%;
             transform: translate(-50%, -50%);">
    Hello, Hyperframes!
  </h1>

  <script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js"></script>

  <script>
    const tl = gsap.timeline({ paused: true });
    tl.from("#title", { opacity: 0, y: -50, duration: 1 }, 0);
    window.__timelines = window.__timelines || {};
    window.__timelines["my-video"] = tl;
  </script>
</div>

三条核心规则：

根元素必须有 data-composition-id、data-width、data-height
有时间轴的元素需要 data-start、data-duration、data-track-index 和 class="clip"
GSAP 动画必须用 { paused: true } 创建，并注册到 window.__timelines

第 4 步：渲染输出

npx hyperframes render --output output.mp4

✔ Capturing frames... 150/150
✔ Encoding MP4...
✔ output.mp4 (1920×1080, 5.0s, 30fps)

一个更实际的示例

带视频素材、音频和叠加文字的组合：

<div id="stage" data-composition-id="product-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>

  <img id="overlay" class="clip" data-start="2"
       data-duration="3" data-track-index="1" src="logo.png" />

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

视频、图片、音频，全部用 data 属性控制时间轴，就像在写网页一样。

组件市场：50+ 现成模块

Hyperframes 还提供了一个组件注册表，可以直接安装预制模块：

npx hyperframes add flash-through-white    # 闪白转场
npx hyperframes add instagram-follow       # 社交媒体关注弹窗
npx hyperframes add data-chart             # 动画数据图表

这些组件就像视频版的 npm 包，可以直接插入你的 composition 中使用。

三、竞品对比：Hyperframes 的真正优势在哪

核心竞品一览

工具	方式	开源	价格	定位
Hyperframes	HTML/CSS/GSAP → 视频	Apache 2.0	完全免费	AI Agent 优先
Remotion	React → 视频	源码可用（非开源）	个人免费，企业 $100-500/月	React 团队
Revideo	TypeScript → 视频	MIT	免费	服务端批量渲染
Shotstack	JSON API → 视频	否	$49-309/月	零运维云端
Creatomate	模板 + API → 视频	否	$41-249/月	营销自动化
FFCreator	Node.js → 视频	MIT	免费	轻量级幻灯片

Hyperframes vs Remotion：核心差异

这是最常被拿来比较的一组，也是理解 Hyperframes 定位的关键。

维度	Hyperframes	Remotion
编写语言	HTML + CSS + GSAP	React/TSX
构建步骤	无——HTML 文件直接跑	需要打包工具
动画精度	逐帧可寻址，帧级精确	GSAP 按真实时间播放，会"跑偏"
HTML 复用	直接粘贴复用	必须改写成 JSX
分布式渲染	暂不支持	Lambda 已成熟
HDR	支持	不支持
协议	Apache 2.0（真开源）	商用需付费

重点说一下动画精度的问题。

这是 Hyperframes 技术层面最硬的差异化。

GSAP 是业界最流行的 Web 动画库，但它的时间系统基于 performance.now()——也就是说动画按"墙钟时间"运行。在 Remotion 的渲染模式下，GSAP 会把 4 秒的动画在 1 秒内全部播完，后面的帧全是空的。

Hyperframes 的解决方案是：暂停动画，然后精确跳到每一帧对应的时间点截图。这意味着 GSAP、Anime.js、Motion One 等动画库的效果在 Hyperframes 里是帧级精确的。

这个技术点不容易被感知，但它直接决定了最终视频的动画质量。

许可证：真正的开源 vs "源码可见"

Remotion 的代码虽然在 GitHub 上公开，但它用的是自定义商业许可（BSL），不是开源协议。超过 3 人的团队商用必须付费。

Hyperframes 用的是 Apache 2.0——真正的 OSI 认证开源协议。没有渲染次数限制，没有座位数上限，没有公司规模门槛。可以自由商用、修改、再分发。

对于创业团队和高频视频生产场景来说，这不是细节差异，而是成本模型的根本不同。

Hyperframes 的短板

说优势也要说不足，目前 Hyperframes 的几个明显短板：

没有分布式渲染：Remotion 有 Lambda 级别的云端渲染方案，适合大规模视频工厂。Hyperframes 目前只能单机渲染，这是生产环境中最大的瓶颈。
项目还年轻：v0.4.x 阶段，迭代很快但也意味着 API 可能还在变化。Remotion 已经经过多年生产验证。
平台要求较窄：需要 Node.js 22+，确定性渲染需要 Linux + Chrome Headless Shell，macOS/Windows 走降级方案。
没有类似 Remotion Player 的交互式播放器：不能在 React 应用中嵌入交互式视频预览。

四、为什么说它代表了下一个范式

Hyperframes 的核心洞察不在技术层面，而在用户层面。

传统的程序化视频工具，用户是开发者。Remotion 假设你会 React，Shotstack 假设你能写 JSON Schema。

Hyperframes 假设的用户是 AI Agent。

这个区别很关键。LLM 最擅长生成什么代码？HTML + CSS。全球互联网上最多的训练数据就是网页代码。让 AI 用 React 写视频，等于加了一层不必要的认知负担。让 AI 用 HTML 写视频，则是在它最擅长的领域发挥。

所以 Hyperframes 的 Skill 系统不是锦上添花，而是核心设计：

npx skills add heygen-com/hyperframes

安装后，Claude Code / Cursor / Gemini CLI 就能直接"拍视频"。你说"做一个 TikTok 风格的产品演示"，AI 就生成 HTML composition + GSAP 动画 + 音频混合，一键渲染成 MP4。

这不再是"开发者写代码生成视频"，而是"AI Agent 自主生产视频内容"。

HeyGen 自己就是这套框架的最大用户——他们内部之前用 Remotion，但发现 React 的框架开销和 GSAP 的时间精度问题在 Agent 驱动的工作流中太痛了，所以重新造了轮子。

五、实操建议：什么场景该用 Hyperframes

根据我的分析，给大家一个选型参考：

适合用 Hyperframes 的场景：

你已经在用 Claude Code / Cursor 等 AI 编码工具，想让 AI 直接帮你做视频
你需要大量用 HTML/CSS 做动画的经验（比如 Web 开发者转做视频）
你的视频生产不需要大规模分布式渲染（几十条/天以内）
你不想被商业许可证绑定，需要完全自由的开源方案
你想把 GSAP 动画精确还原到视频中

更适合用 Remotion 的场景：

团队是 React 技术栈，有成熟的 React 组件库
需要 Lambda 级别的分布式云端渲染（日产千条以上）
需要在 Web 应用中嵌入交互式视频预览
看重成熟度和稳定性，不想踩新项目的坑

更适合用 SaaS 平台（Shotstack / Creatomate）的场景：

不想维护任何基础设施
视频内容是模板化的（广告、社交媒体批量生产）
团队没有前端开发能力

六、快速上手 Cheat Sheet

# 安装（AI Agent 方式）
npx skills add heygen-com/hyperframes

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

# 预览
npx hyperframes preview

# 检查组合文件是否有问题
npx hyperframes lint

# 渲染为 MP4
npx hyperframes render --output video.mp4

# 从视频中提取字幕
npx hyperframes transcribe input.mp4

# 生成 TTS 语音
npx hyperframes tts "要说的文字" --output speech.wav

# 添加预制组件
npx hyperframes add data-chart
npx hyperframes add flash-through-white

# 系统环境检查
npx hyperframes doctor

七、我的判断

Hyperframes 不是"又一个视频生成工具"。它的出现代表了一个信号：视频制作的门槛正在从"会剪辑"降到"会说话"。

当 AI Agent 能用 HTML 直接"写"出视频时，视频内容的供给端会发生根本性的变化。以前一条精编视频需要编导+拍摄+剪辑+后期，未来可能一句 prompt 就搞定了。

当然，目前 Hyperframes 还有明显的不成熟之处——没有分布式渲染、项目还在快速迭代、生态还没建立起来。但方向是对的。

如果你是做视频自动化、内容工厂或 AI 应用的，我建议现在就开始关注甚至上手试试。Apache 2.0 的许可证意味着你可以没有任何顾虑地用在商业项目中。

这可能是目前"让 AI 自己做视频"最优雅的方案。

项目地址：github.com/heygen-com/hyperframes

文档地址：hyperframes.heygen.com

普通视图