hyperframes 是 HeyGen 开源的”把 HTML 变成视频”的引擎。你写一个带时序属性的纯 HTML 文件,它渲染出确定性的 MP4。标语 “Write HTML. Render video. Built for agents.” 就是全部论点:AI 编码 agent 本就会 HTML 和 CSS,所以通往编程化视频最快的路,是让它们直接写 HTML,而不是去学一套视频 API。这个框架,加上 HeyGen(一家 AI 视频公司)维护它并在内部使用,使它比一个普通渲染库更值得细看。

它怎么运作

模型异常直接。你的 HTML 在浏览器里作为普通网页运行,用 data-start、data-duration、data-track-index 属性控制元素何时、在哪条轨道出现。渲染时,hyperframes 用 Puppeteer 打开页面,用 Chrome 的 HeadlessExperimental.beginFrame API 逐帧寻位,捕获每一帧,再用 FFmpeg 编码。音频元素被单独提取并混音。因为它确定性地寻帧而非录制墙钟时间,同样的输入每次渲染都产出同样的帧。

它适配多种动画运行时(GSAP、Lottie、Three.js、CSS 动画、Web Animations API),带一个现成转场和覆盖层的 Catalog,支持透明输出(WebM、ProRes、PNG 序列),并能在 AWS Lambda 或 GCP Cloud Run 上分布式渲染。

安装与最小示例

npm install -g hyperframes
npx hyperframes init my-video
cd my-video
npx hyperframes preview   # 浏览器实时预览,热重载
npx hyperframes render    # 本地 MP4

要求是 Node >= 22、FFmpeg 和 Chrome(Puppeteer 自动下载)。一个 composition 就是 HTML:

<div id="stage" data-composition-id="launch" data-width="1920" data-height="1080">
  <h1 class="clip" data-start="1" data-duration="4" data-track-index="1">Launch day</h1>
  <audio data-start="0" data-duration="6" data-track-index="2" src="music.wav"></audio>
</div>

对 agent,npx skills add heygen-com/hyperframes 把它接入 Claude Code、Cursor 和 Gemini CLI。

值得一提的 frame.md 思路

一个真正巧妙的部件是 frame.md:它把 web 设计系统反演成一份视频友好的 DESIGN.md,让 agent 不必猜尺度和比例。设计 token 是为任意尺寸的浏览器而建的;视频有固定的尺寸和帧率。frame.md 弥合这个鸿沟,正是这种细节显示项目在认真解决”agent 撰写”问题,而非只是包装一个渲染器。

横向对比

项目撰写模型Stars(2026-06)
heygen-com/hyperframes纯 HTML,agent 优先~27k
remotion-dev/remotionReact 组件~50k
redotvideo/revideo动画驱动库~4k
OpenCut-app/OpenCutGUI 时间线编辑器~55k

Remotion 是重量级同类,但它用 React 组件、许可有商业条款;hyperframes 用纯 HTML、是 Apache-2.0、开箱本地渲染。revideo 聚焦动画库且更小。OpenCut 是完全相反的哲学:给人用的 GUI 编辑器,而 hyperframes 是给 agent 的代码路径。按”撰写者是人还是 agent”来选。

issue 里的坑

发版近乎每日(v0.6.x 线),开放 issue 集中在渲染稳定性:

  • 当某 clip 的 data-start 对齐帧网格时出现重复帧或跳帧,源于帧查找缺少 epsilon(#1317)。
  • Three.js/WebGL 内容在 v0.6.x 消失而 v0.5.5 正常(#1260),GSAP 方法在无 stub 时被静默丢弃(#1285)。
  • 渲染器在低内存硬件上卡死(#1236)、大 composition 超时(#1219),资源限制会咬人。
  • 一个游离的 v1.0.x tag 破坏了 npx skills 的版本解析(#1282)。

规律是:核心的 HTML 转视频路径稳固,而动画库兼容性和低内存渲染是你会撞墙的地方。投入管线前先测你具体的动画栈。

FAQ

hyperframes 免费吗? 是。hyperframes 是 Apache-2.0 许可的开源项目,无按帧收费、无商业限制,且开箱本地渲染。

hyperframes 和 Remotion 有什么区别? hyperframes 用纯 HTML 撰写视频、是 Apache-2.0;Remotion 用 React 组件、带商业许可条款。hyperframes 面向本就会 HTML 的 AI agent。

怎么用 hyperframes 渲染视频? 跑 npx hyperframes init 脚手架一个项目,用 data-start、data-duration 时序属性写 HTML,再 npx hyperframes render 出 MP4。

hyperframes 运行需要什么? Node 22 或更新、FFmpeg 和 Chrome(Puppeteer 自动下载)。渲染用无头 Chrome 寻帧、用 FFmpeg 编码。

谁在用 hyperframes? HeyGen 构建它并在内部用于视频合成,其采纳者名单含 tldraw、TanStack 等用它做发布和代码演示视频的项目——这是 HTML 转视频路径在真实管线里、而非只在 demo 里立得住的有用信号。

相关阅读

面向人的对应物(给人用的 GUI 视频编辑器,而非 agent 代码路径)见 OpenCut-app/OpenCut。