HyperFrames：写 HTML 就能渲染视频的 Agent 视频引擎

HyperFrames 由 HeyGen 开源，Apache-2.0 许可。它把 HTML、CSS、媒体和可逐帧定位的动画编译成确定性的 MP4：同一个输入得到同一段视频。仓库把它称为“为 agent 而生”的视频引擎，既能在本地用 CLI 跑，也能让 Claude Code、Codex、Cursor 这类 coding agent 通过技能包直接写片子。

HyperFrames 的界面或功能演示截图 — HyperFrames 设计模板中的 BlockFrame 版式（仓库素材）

HTML 就是工程文件

一个合成就是一个带 data- 属性的 HTML 文件：容器声明画布尺寸和 composition id，视频、标题和音频各自标注开始时间、持续时间和轨道号。动画可以用 GSAP、CSS、Lottie、Three.js、Anime.js、WAAPI，或者自己写帧适配器；渲染器在无头 Chrome 里逐帧 seek，再交给 FFmpeg 编码。

<div id="stage" data-composition-id="launch" data-start="0"
     data-width="1920" data-height="1080">
  <video class="clip" data-start="0" data-duration="6"
         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">Launch day</h1>
</div>

没有打包步骤，index.html 可以直接在浏览器里播放和预览。这一点对 agent 很关键：模型本来就会写 HTML，不需要先学会 React 组件树或某个私有时间线格式。

命令行三步

本地新建项目只需 Node.js 22 及以上和 FFmpeg：

npx hyperframes init my-video
cd my-video
npx hyperframes preview   # 浏览器预览，改动自动刷新
npx hyperframes render    # 输出 MP4

CLI 还负责 lint、查看单帧、编辑时间线、云端渲染和发布，命令默认非交互，适合放进 CI。渲染既可在本机跑，也可以部署 AWS Lambda 做分布式渲染；@hyperframes/* 这套包把解析、捕获、编码和混音拆开，需要嵌进自己的流水线时可以按包调用。对 CI 来说，确定性比峰值帧率更重要：同一份 HTML 和素材重复渲染应得到相同帧，方便做关键帧快照和视觉回归。

Agent 的技能包

npx hyperframes skills update 会装核心技能集，让 agent 按“策划、写 HTML、接可 seek 动画、加媒体、lint、预览、渲染”的流程工作。Claude Code 也可以走插件市场：

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

仓库发布七个技能，核心是 /hyperframes、/hyperframes-cli、/hyperframes-registry 和 /media-use；Figma、幻灯片、Remotion 迁移三个按需安装。Registry 里约有 450 个可编辑的区块和组件，npx hyperframes add data-chart 这类命令能把图表、转场、字幕直接装进项目，不必从空白 HTML 开始。

一个批量模板视频的场景

每周把同一套数据做成产品更新短片：用一份 HTML 模板接收 JSON，标题、数字和图表由脚本替换，render 输出 MP4 后交给发布流程。因为渲染是确定性的，可以在 CI 里对关键帧做回归对比；需要换风格时，复制一份 frame.md 或设计模板，而不是重写组件。产品发布、数据动画、带字幕的社交视频都属于这一类。

与 Remotion 的选择题

两者都用无头 Chrome 加 FFmpeg 渲染。Remotion 以 React 组件为作者模型，需要打包器；HyperFrames 以纯 HTML 加 data 属性为作者模型，没有构建步骤，agent 交接时给的就是 HTML 文件。Remotion 的 Lambda 渲染更成熟，HyperFrames 也提供本地与 Lambda 两条路径。许可证也不同：HyperFrames 是 Apache-2.0，Remotion 使用其源码可见的 Remotion License。团队已有 React 设计系统时，Remotion 更顺；更想让 agent 直接产出可读文件时，HyperFrames 的路径更短。已有 Remotion 工程可以走官方 /remotion-to-hyperframes 技能做逐帧核对迁移。

限制

HyperFrames 不是完整的非线性剪辑器，复杂剪辑、精细音频混合仍要交给专门工具；Studio 在 README 里标为“可用但仍在演进”。渲染依赖 Node、FFmpeg 和足够的 CPU/GPU 资源，长片子要预留时间。设计模板与 frame.md 只是起点，品牌规范仍要自己整理。渲染失败时 CLI 会给出 JSON 结构的错误信息，agent 可以据此判断是合成解析、捕获还是编码阶段出的问题。HTML 的 data 属性和可 seek 动画需要按规范写，普通网页动画不会自动变成逐帧确定的视频。开发仓库用 Git LFS 存了约 240 MB 的回归测试 MP4，完整克隆前先装 LFS，只读源码可以跳过 LFS 内容。本文按官方 README 与仓库元数据整理，未在本机完整实测。

适合谁

适合需要批量生成模板化视频、数据动画、产品演示的团队，以及希望让 coding agent 直接交付视频工程的开发者。日常剪辑、需要多轨精修的用户，仍应使用剪辑软件。

官方入口

仓库：heygen-com/hyperframes
在线体验：hyperframes.dev
文档：hyperframes.heygen.com/introduction
许可证：Apache-2.0