返回 Blip 流 BLIP FILE No.01

HyperFrames

用 HTML 写动画，渲染成逐帧不丢帧的 MP4，HeyGen 把自家产线开源了。能调 agent 的开发者等于多了条视频产线，不会写代码的绕行。

heygen-com/hyperframes TypeScript 59.4k★ Apache-2.0 活跃收录 10-08

01它是什么

官方定位就一句话：Write HTML. Render video. Built for agents. 你用 HTML、CSS、JS 写动画，它起一个 Headless Puppeteer 逐帧捕获画面，FFmpeg 负责编码，出来的是逐帧渲染、像素级确定性的 MP4。

2026 年 3 月开源至今热度不减。这项目最硬的一点是把视频渲染还原成了前端问题——GSAP、Three.js 的动画生态原样继承，你写了多少年网页，就有多少年的视频功底。内置 MCP，Claude Code、Cursor 里的 agent 可以直接调它出片。

02仓库健康度

STAR 数59.4k2026-10-09 核实快照

语言TypeScriptNode 环境，CLI 一键出 MP4

协议Apache-2.0商用友好

状态活跃2026-03 开源至今高频更新

渲染方式逐帧捕获Headless Puppeteer + FFmpeg，像素级确定性

动画生态GSAP · Three.js前端动画库直接继承

开源大半年冲到这个量级，靠的不是营销——仓库里跑的就是 HeyGen 自己的产线配置，demo 即生产。

让 AI「生成视频」的工具不少，但多数产出的是模型想象出的画面，你改不了第三个镜头里那个字的字号。录屏方案能保真，可丢帧和时间轴漂移是家常便饭。

HyperFrames 反着来：画面就是一个网页，每个元素都听你的 CSS 的话，渲染是逐帧确定的。说句实在的，这意味着视频的上限就是你的前端水平——天花板取决于人，不取决于工具。

第一用户是 HeyGen 自己，这是它和其他「视频生成」仓库最大的不同。外面真正用起来的是：给产品做演示视频的前端团队、批量出数据讲解片的开发者、以及把渲染任务挂给 agent 自动跑的技术自媒体。

说句实在的：它的产出质量和你写的 HTML 质量严格成正比。把它当「一键生成爆款」的，装完就会卸载；把它当「多了条视频产线」的，会越用越顺。

前置：Node 环境，会写 HTML 就够。

$ git clone https://github.com/heygen-com/hyperframes
$ cd hyperframes
$ npm install
# 写一个 animation.html，CLI 一键渲染成 MP4

不想装环境，先去官网 hyperframes.dev 的在线 Playground 试手；agent 用户用 npx skills add 把它装进 Claude Code / Cursor。

08注意事项

这是纯开发者工具：要自己写 HTML/CSS/JS，或者手里有一个能调 MCP 的 agent。纯小白没有上车路径，绕行。另外，商务视频要的是稳定产线——时长、帧率、分辨率这些渲染参数得自己调校到位，它给你引擎，不替你做导演。

适合

会前端、需要批量出视频的开发者；用 Claude Code / Cursor、想让 agent 自己出片的团队；做产品演示和数据可视化的技术博主。

不适合

不会写代码、想要「一句话出片」的小白；期待开箱即用模板、不想调渲染参数的商务场景。

不会写代码能用吗？不能。官方定位 Built for agents——要么自己写 HTML，要么让 agent 替你写。

渲染会丢帧吗？不会。逐帧捕获加 FFmpeg 编码，像素级确定性，这是它和录屏方案的本质区别。

能用 GSAP、Three.js 吗？能。动画生态直接继承，网页里怎么写，视频里就怎么动。

先去哪试？官网 hyperframes.dev 有在线 Playground，不装环境就能看效果。