HeyGen 开源了 HyperFrames：写 HTML 就能生成视频，22K Star 不是白给的
视频生成一直有个尴尬的地方——AI 生成的视频你没法精确控制。你要一个产品展示视频，AI 给你一堆随机的画面，改 prompt 改到吐血也调不出想要的效果。
HeyGen（就是那个做 AI 数字人视频的公司）最近开源了一个叫 HyperFrames 的项目，思路完全不一样：用 HTML 写视频。GitHub 上火箭式涨到了 22,000+ Star，发布才两个多月。
HTML 写视频？听着离谱，试了下还真行
HyperFrames 的核心逻辑很简单：你用 HTML + CSS + JS 写好每一帧的样子，它用 headless Chrome 逐帧截图，FFmpeg 拼成 MP4。
看个例子：
<div data-start="0" data-width="1920" data-height="1080">
<h1 id="title" data-start="1" data-duration="4">Launch day</h1>
<video data-start="0" data-duration="6" src="intro.mp4"></video>
<script src="gsap.min.js"></script>
<script>
gsap.from("#title", { opacity: 0, y: 40, duration: 0.8 }, 1);
</script>
</div>
data-start 和 data-duration 控制每个元素在时间轴上的位置。动画库用 GSAP、CSS 动画、Lottie、Three.js 都行，甚至可以自己写适配器。预览直接在浏览器里看，渲染结果是确定性的——同一份 HTML 每次渲染出来的视频一模一样。
最骚的一点：不需要构建步骤。HTML 文件直接双击就能在浏览器预览，和渲染出来的视频一帧不差。
和 Remotion 比一下
说到 HTML 渲染视频，绕不开 Remotion。HyperFrames 官方也放了对比：
| 对比项 | HyperFrames | Remotion |
|---|
| 编写方式 | 纯 HTML + CSS | React 组件 |
| 构建步骤 | 不需要 | 需要打包 |
| AI Agent 友好 | 直接写 HTML | 得写 JSX |
| 动画方式 | 可逐帧定位 | 壁钟时间 |
| 分布式渲染 | 本地 + AWS Lambda | Lambda 方案成熟 |
| 许可证 | Apache 2.0 | 受限制 |
核心差异就一句话：HyperFrames 赌的是纯 HTML——人和 AI 都能轻松写。Remotion 赌的是 React——生态成熟但门槛高。我自己的感受：如果你的 AI Agent 要做视频生成，用纯 HTML 的 HyperFrames 确实顺滑很多。
现在就能用起来
安装就一行命令：
npx hyperframes init my-video
cd my-video
npx hyperframes preview # 浏览器预览
npx hyperframes render # 导出 MP4
要求：Node.js 22+，加上 FFmpeg。
如果用 AI coding agent（Claude Code、Cursor、Codex），直接装 skill：
npx skills add heygen-com/hyperframes
然后跟 agent 说：用 HyperFrames 做一个 10 秒的产品介绍视频，带渐入标题、背景视频和轻音乐。它就能全自动搞定。
功能亮点
- Catalog 组件库：预设的转场、字幕、图表、地图等组件，
npx hyperframes add data-chart 就能装
- 多轨音频/视频：支持叠加视频轨道、背景音乐、调节音量
- Shader 转场：WebGL 着色器实现高级转场效果
- Studio 编辑器：基于浏览器的可视化编辑器
- 玩家组件：嵌入到网页中的
<hyperframes-player>
- AWS Lambda：分布式渲染，适合大规模生产
几个问题
- Pre 1.0，API 还在调整，生产环境升级可能要改代码
- 本地渲染依赖 headless Chrome + FFmpeg，资源消耗不小
- 相比 Remotion 生态还没那么成熟，社区组件少
- GSAP 商业许可要注意（个人用没事，商用需要 GSAP 的 business license）
我的看法
HyperFrames 是我最近看到的思路最清晰的视频生成工具。它没有去跟 Sora 们卷 AI 生成画面，而是解决了"如何精确控制视频"这个更实在的问题。写 HTML 做视频这个概念对有前端背景的人来说几乎零学习成本，对 AI Agent 来说更是天然适配。
如果你在做自动化视频 pipeline、产品演示视频生成、或者社交媒体内容批量生产，这个项目值得花一个下午试试。Apache 2.0 许可证，商业随便用，HeyGen 团队还在持续维护，没什么好犹豫的。
项目地址：github.com/heygen-com/hyperframes
文档：hyperframes.heygen.com
在线体验：hyperframes.dev