HyperFrames 是什么：让 Agent 用 HTML 做视频的开源框架
HeyGen 开源的 HyperFrames 把视频写成一个 HTML 文件：画面用 HTML/CSS 排版，时间轴靠 data-* 属性，动画用 GSAP 等可逐帧定位的库，最后由无头 Chrome 逐帧截图、FFmpeg 编码成 MP4。它自带 9 个 Agent Skill，让 Claude Code、Codex、Cursor 直接「写一段视频」。截至 2026-11-04（北京时间），最新版 v0.9.10，Apache-2.0，GitHub 78,510 星；skills.sh 累计安装榜前 12 名里有 4 个是它的 Skill。
它是什么
HyperFrames 是一个「HTML 进、视频出」的渲染框架。README 自己说受 Remotion 启发：两者都用无头 Chrome 加 FFmpeg 出片，差别在写法——Remotion 要写 React 组件、要打包；HyperFrames 只要一份普通 HTML，人和 Agent 都容易写。同样的输入渲出同样的帧，所以也能放进 CI 做回归。
| 仓库 | github.com/heygen-com/hyperframes |
|---|---|
| 作者 | HeyGen（README 称已在 HeyGen 生产环境使用） |
| 许可证 | Apache-2.0，无按次渲染费、无商用门槛 |
| 热度 | GitHub 78,510 星（GitHub API，2026-11-04 北京时间约 15:12，比前一天多 619）；npm 包 hyperframes 2026-10-27 至 11-02 周下载 1,546,850；skills.sh 累计安装 hyperframes-cli 约 140 万（第 3）、hyperframes 约 140 万（第 4）、media-use 约 130 万（第 6） |
| 运行要求 | Node.js 22+、FFmpeg/FFprobe、Chrome（系统自带或缓存版）；要逐字节一致的输出可加 Docker |
| 最新版本 | v0.9.10（GitHub 发布于 2026-11-04 10:50，北京时间；npm 同日 0.9.10） |
解决什么问题
让 Agent 做短视频，以前大致两条路：调生成式视频模型，结果不可控、改一个字要重抽；或者写 Remotion 工程，Agent 要处理 React、打包和一堆依赖。HyperFrames 的做法是：标题、图表、字幕、转场都是网页元素，Agent 本来就会写；改文案就是改 HTML，再渲一遍，画面不会跑偏。
一段 6 秒片头大概长这样（摘自官方 README，有删减）：
<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>
<audio data-start="0" data-duration="6" data-track-index="2"
data-volume="0.5" src="music.wav"></audio>
</div>data-start、data-duration 管出场时间和时长，data-track-index 管图层。动画写成暂停状态的 GSAP 时间线挂到 window.__timelines，渲染器逐帧拨到对应时间点截图。CSS 动画、Lottie、Three.js、Anime.js、WAAPI 也有适配器。
怎么用
最省事的是让 Agent 自己装。官方快速上手给的做法：在一个空文件夹里打开编程 Agent，先装核心 Skill，再提需求。
npx hyperframes skills update
# Claude Code 也可以装带版本的插件：
claude plugin marketplace add heygen-com/hyperframes
claude plugin install hyperframes@hyperframes然后对 Agent 说：
Using /hyperframes, make a 10-second product intro for https://example.com.Agent 会建项目文件夹、写 HTML、打开浏览器预览。想自己动手，CLI 常用的几条：
npx hyperframes init my-video # 新建项目
npx hyperframes add data-chart # 从约 450 个现成块里加一个动画图表
npx hyperframes preview # 浏览器实时预览
npx hyperframes check # lint + 版面溢出、遮挡、WCAG 对比度检查
npx hyperframes render --output out.mp4
npx hyperframes render --format webm --output overlay.webm # 透明底叠加层
npx hyperframes doctor # 查 Node、FFmpeg、Chrome 是否齐9 个 Skill 分两组。核心 4 个默认装，剩下的按需装（npx hyperframes skills update <name>）：
| Skill | 干什么 |
|---|---|
| /hyperframes | 入口，先读：渲染约定和工作流，再指向字幕、动效、镜头等参考 |
| /hyperframes-cli | 脚手架、检查、看帧、预览、本地或云端渲染，以及出错时怎么读 JSON 恢复 |
| /hyperframes-registry | 约 450 个可编辑的现成块：转场、字幕、图表、地图、3D、运镜 |
| /media-use | 找或做素材：音乐、音效、配音、抠图、调色；可用 HeyGen 或本地免费工具 |
| 按需：/slideshow、/figma、/remotion-to-hyperframes 等 | 做可翻页演示稿、导入 Figma、把 Remotion 工程迁过来 |
改一句文案，只要改一行 HTML 再渲一遍，其余画面原样不动。
要注意的地方
Skill 版本要跟 CLI 对齐。README 提醒：npx skills add heygen-com/hyperframes 走 skills.sh 注册表，可能比主分支晚几个小时；npx hyperframes skills update 按当前 CLI 版本的发布标签装，两边对得上。另外非交互地跑 skills add 且不带 --skill，会一次装上全部 9 个。
遥测默认开。官方 CLI 文档列得很细：命令名、渲染性能、错误名、系统信息，以及检测到的 Agent 名（如 claude_code、cursor）。项目名、视频内容不收；一旦 hyperframes auth login 登录 HeyGen 账号，数据就和账号绑定、不再匿名。关闭方法：HYPERFRAMES_NO_TELEMETRY=1、DO_NOT_TRACK 或 telemetry disable。
机器要够。每个渲染 worker 是一个独立 Chrome，约占 256 MB；内存 8 GB 及以下自动切到单 worker 的低内存模式。要严格可复现就用 --docker。
付费入口在 CLI 里。v0.9.10 加了 hyperframes billing，回车即可付费充值 HeyGen 额度。只用本地渲染和免费素材，用不到它。
适合谁，不适合谁
适合：要批量做 10–20 秒的产品介绍、数据图表动画、带字幕的讲解片；希望 Agent 写、人来改，且每次修改可追溯。站内的 FFmpeg Skill 管剪辑和转码，HyperFrames 管「从无到有画出来」，两者可以搭配。--batch 加一份变量 JSON，就能按行批量出多条同模板视频。
不适合：想要真人实拍质感、全靠模型生成画面的需求，它只负责排版和动效。已有成熟 Remotion 工程、团队熟 React 的，不一定要迁；README 也承认 Remotion 的云端分布式渲染更成熟。另外 Remotion 用的是源码可见的 Remotion License，HyperFrames 是 Apache-2.0，商用前按自己的情况看清许可证。
最后
想让 Agent 帮你做短视频，在空文件夹里跑 npx hyperframes skills update，再让 Agent「用 /hyperframes 做一段 10 秒介绍」，渲出来先跑一遍 check 再交付。
