HyperFrames开源：HeyGen的HTML视频渲染引擎，写好网页就能出片，专为AI Agent而生

先说个熟悉的场景。给产品做个 30 秒介绍视频，打开时间轴编辑器，拖素材、打关键帧、对字幕、垫音乐，折腾一下午。渲染完一看：标题进场时机差了半秒。改一个字，重新导出，又是十分钟。你盯着进度条忍不住问自己：我到底是在做创意，还是在当人形渲染队列？

团队协作更灾难。设计改到第七稿，文件名变成 宣传片_final_真的final_打死不改了.mp4；谁也说不出最后一版和上一版差在哪；想回滚到三天前的版本，导出文件早就被覆盖了。视频行业至今没解决"版本控制"这个软件开发里五十年前就解决了的问题。

换 AI 视频模型？抽卡更痛苦。同一个提示词跑两遍出两个片子；想让系列视频保持统一的品牌色和字体，基本没戏；想让"把标题往左移 20 像素"精确发生，模型听不懂。不可复现，是 AI 视频的死穴——不能复现的东西，进不了生产线。程序员的答案是把视频当代码写：git 管理、code review、CI 自动出片、改一行重新渲染。Remotion 算是把这个想法做火了，但它赌的是 React 组件——写视频得先建个 JSX 工程、配打包器。让 AI Agent 写 HTML 它很在行，让它维护一整套 bundler 配置就是另一个故事了。

这时候，HeyGen——那家做 AI 数字人视频的公司——把自己生产环境在用的工具开源了出来：HyperFrames。口号只有一句：Write HTML. Render video. Built for agents.

它到底是什么

一句话：HyperFrames 是一个把 HTML、CSS、媒体素材和"可寻址动画"转换成确定性 MP4 的开源框架。

关键词是确定性——同一份输入，渲染一百遍，得到一百个一模一样的视频。没有随机种子，没有模型抽卡，帧帧对得上。视频终于可以进 CI、做回归测试、放进自动化管道批量生产：改一个文案重新渲染，其他地方逐帧不动。

项目采用 Apache 2.0 协议，官方明确没有按次渲染费，也没有商用门槛。按 README 的说法，它已经在 HeyGen 的生产环境使用，采用者名单（ADOPTERS.md）里还有 tldraw、TanStack 这些团队——不是实验室玩具。

HyperFrames 原生桌面应用（官方 README 截图）

核心功能拆开看

1. 一条视频，就是一个 index.html

组合模型朴素得可爱：视频就是一个 HTML 文件，时间信息全部写在 data-* 属性里。

<div id="stage" data-composition-id="launch" data-width="1920" data-height="1080">
  <video class="clip" data-start="0" data-duration="6" data-track-index="0" src="intro.mp4"></video>
  <h1 id="title" class="clip" data-start="1" data-duration="4" data-track-index="1">Launch day</h1>
</div>

data-start 是第几秒出现，data-duration 持续多久，data-track-index 在第几条轨道——一段背景视频、一个标题，就是时间轴上的两个标签；再加一条 data-volume 0.5 的音频放到轨道 2，三段素材各演各的。复杂片子可以用变量、子组合层层组织，但底层永远是这一套契约。没有专有时间轴格式，没有工程文件，作品本身就是一个浏览器能直接打开的网页。

2. 确定性渲染：无头 Chrome 逐帧"跳转"，FFmpeg 编码

渲染器把页面加载进无头 Chrome，按时间戳逐帧跳转、逐帧截图，再把帧序列交给 FFmpeg 编码成 MP4。

注意"逐帧跳转"这四个字。它不是在实时播放中录屏，而是Seek 到每一个时间戳拍一张——同一份输入，必然得到同一串帧。渲染管线由 @hyperframes/producer 统一负责采集、编码和音频混合，本地或 Docker 里都能跑；@hyperframes/engine（Puppeteer 加 FFmpeg 采集）、@hyperframes/shader-transitions（WebGL 转场）和 @hyperframes/player（可嵌入网页的播放器组件）各司其职。

这个设计的下游影响很有意思。官方仓库用 Git LFS 存了大约 240MB 的"黄金回归测试基准视频"，每次改动都跟基准逐帧比对——一个视频项目，把视觉回归测试做得比很多前端项目还狠。

3. 动画不锁死：GSAP、Lottie、Three.js、WAAPI 随你挑

HyperFrames 没有发明新的动画 DSL，而是做了个帧适配器（frame adapter）机制：GSAP、CSS keyframes、Lottie、Three.js、Anime.js、WAAPI，或你自己写的运行时，都能接进来。

但有个硬约束：动画必须可寻址（seekable）——能在任意时间点取出确定的状态，而不是依赖"从打开页面起算了多少墙上时钟"。网页动画大量靠实时播放驱动，录屏式渲染会累积误差；HyperFrames 从机制上把这条路堵死了。"可寻址"是它和所有"录屏做视频"方案的本质分界线。

4. 21 个 Agent 技能：教 AI 学会做片的完整流程

这才是它名字里 "Built for agents" 的实处。仓库自带 21 个技能（skills），按需加载。入口是 /hyperframes 路由器——任何"给我做个视频"的请求先过它，确认创作需求后再分发给具体工作流：/product-launch-video（给网址或文档产出 30-90 秒宣传片）、/pr-to-video（给个 GitHub PR 生成讲解片）、/faceless-explainer（一段文本变成讲解视频）、/music-to-video（一首歌生成卡点视频）等，产品发布、PR 讲解、口播包装都能覆盖。

底下还有一层领域技能随叫随到：hyperframes-core（组合契约）、hyperframes-animation（动画知识库）、hyperframes-audio（人声闪避与混音总线）、media-use（素材解析与生成）、/figma（Figma 资产导入）。插件层面支持 Claude Code、Codex、Cursor、Gemini CLI 等主流编码 Agent。

说人话：它把"做一条片子"拆成了规划、写 HTML、接动画、加素材、检查、预览、渲染一整套流程，每一步都有技能兜底——Agent 不是在瞎撞，是按剧本演。

5. 组件市场与 frame.md：让输出别那么"AI 味"

组件市场（Catalog）：一行命令装现成的块——npx hyperframes add data-chart（动画图表）、flash-through-white（着色器转场）、instagram-follow（社交浮层）。目录覆盖转场、浮层、字幕、图表、地图、特效各类，不用从零画每个转场，也不用求 Agent"发挥想象力"。

frame.md：很多品牌都有给 AI 读的 design.md，但那是给网页写的。frame.md 把它"翻转"成面向帧的规范：同样的设计 token，按视频尺度重写，防止 Agent 伸手就用网页字号、网页导航栏去做视频。它的输出是 DESIGN.md 的超集，官网放了一批 frame 系统可以直接浏览和 remix：

frame.md 设计系统示例（官方 README 图）

另一种 frame 系统风格（官方 README 图）

几个值得玩味的设计取舍

第一，为什么赌 HTML 而不是 React。 README 里直接放了和 Remotion 的对比表，态度很坦白：灵感来自 Remotion，HeyGen 生产环境用过。分歧只有一个——作者到底写什么。对比表里几行字很说明问题：Remotion 需要打包器，HyperFrames 的 index.html 即播；移交给 Agent 时，一边是 JSX 工程，一边是纯 HTML 文件；连动画都分"library-clock"和"可寻址"两种世界观。背后的算盘是：Agent 早就熟读全世界 HTML，纯 HTML 没有构建步骤，交给它的就是普通文本文件。少一层抽象，少一类错误。用 Remotion 的团队也有 /remotion-to-hyperframes 技能可以移植旧作品。

第二，"无构建步骤"不是懒，是刻意。 index.html 本身就是成品，浏览器打开即预览，不需要 bundler、不需要 npm run build。对 Agent 驱动的工作流来说，每少一个构建环节，就少一片会出错的沼泽。

第三，Apache 2.0，但不绑死云。 引擎、CLI、21 个技能、组件市场全部 Apache 2.0，明说没有按次渲染费、没有商用阈值。分布式的路也留着：官方提供 AWS Lambda 渲染的部署与调度（lambda deploy / render / progress），CLI 里也内置了 HeyGen 托管的云渲染入口。需要说明的是，README 里 Studio（浏览器里的编辑器）标注的是 "Available, evolving"，还在演进中，别当成熟品用。

上手试试

要求很简单：Node.js 22 或更高版本，加一个 FFmpeg。

手动路线，三条命令：

npx hyperframes init my-video
cd my-video
npx hyperframes preview   # 浏览器里实时预览
npx hyperframes render    # 渲染出 MP4

Agent 路线（以 Claude Code 为例）：

claude plugin marketplace add heygen-com/hyperframes
claude plugin install hyperframes@hyperframes

然后在对话里说："用 /hyperframes 做个 10 秒产品介绍：淡入标题、背景视频、再来点轻音乐。"剩下的交给 Agent。其他 Agent 用 npx skills add heygen-com/hyperframes 装独立技能。开发循环里还有 lint、check、snapshot、doctor 兜底，片子出问题先自己诊断。

适合谁

  • 受够时间轴编辑器的开发者、设计师与技术内容创作者：PR 讲解、产品发布、数据可视化视频，你的素材就是代码，改需求就是改文件；HTML/CSS/GSAP 手艺直接平移，frame.md 给品牌规范铺了一条通往视频的路。
  • AI Agent 重度用户：把"做片"压缩成一句话，HTML 产物还能过一遍你的眼睛再渲染——可控的自动化，才是真自动化。
  • 要搭自动化视频管道的团队：CI 里渲染、回归测试兜底、批量生成，官方明确说这就是为自动化管线设计的。

写在最后

HyperFrames 真正有意思的地方，不是"又出了一个视频工具"，而是它把视频从抽卡艺术拉回了工程制品：可 diff、可测试、可复现、可审计。AI 视频模型负责想象力，代码负责确定性，各干各擅长的。

HeyGen 肯把生产级引擎整个开源（Apache 2.0、不收渲染费），本身也说明了一件事：渲染引擎从来不是护城河，生态才是。 当"做视频"退化成"写 HTML"，生产瓶颈就从软件操作回到了创意本身——脚本、节奏、审美，这些本该由人把关的东西。工具负责确定性地实现意图，你负责想清楚要表达什么。这个分工，比任何一键生成都靠谱。

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

相关资源：