🎬
写 HTML，就出视频
HyperFrames：HeyGen 官方开源的视频渲染框架——把 HTML/CSS/动画变成确定性 MP4，专为 AI Agent 自动化生成视频而设计，"Agent 时代的视频生产线"
Apache-2.0
HeyGen 官方
6.6万 Star
📖 它是什么
HyperFrames（仓库 heygen-com/hyperframes）是 HeyGen 官方开源的视频渲染框架。官方一句话——"Write HTML. Render video. Built for agents."：写 HTML，渲染出视频，为 agent 而生。核心是把 HTML、CSS、媒体和可 seek 的动画转成确定性（deterministic）的 MP4 视频——同样的输入永远产出同样的画面，天然适配 CI、回归测试和自动化渲染。
它专为 AI Agent 自动化生成视频设计：开发者只需编写 HTML 页面就能渲染成视频；AI 编程助手（Claude Code、Codex、Cursor、Gemini CLI 等）通过 21 个按需加载的 skills 学会整套"规划→写 HTML→布动画→预览→渲染"的视频生产流程。被称作 "Agent 时代的视频生产线"。
关键特性：HTML-native（无 React 依赖、无专有时间线格式、无构建步骤，index.html 直接浏览器预览）；adapter 式动画（GSAP / CSS / Lottie / Three.js / Anime.js / WAAPI 都能用）；Apache 2.0 开源，无按渲染计费、无商用门槛。HeyGen 自己在生产中使用，tldraw、TanStack 等团队也在用。TypeScript 写成，需要 Node.js 22+ 和 FFmpeg，GitHub 已 66,409 Star（单日新增数千，正是当下最火的视频 agent 工具之一）。
📎 GitHub：github.com/heygen-com/hyperframes ｜ Playground：hyperframes.dev ｜ 文档：hyperframes.heygen.com
✨ 核心亮点
🧬
HTML 原生
无 React 依赖、无专有格式、无构建步骤，index.html 直接浏览器预览
🤖
Agent 原生
21 个 skills 教 AI 助手整套视频生产流程，一句话出片
🎯
确定性渲染
同样输入同样画面，天然适配 CI / 回归测试 / 自动化流水线
🔀
任意动画引擎
GSAP / CSS / Lottie / Three.js / Anime.js / WAAPI 都能用
🖥️ 环境要求
| 运行时 | Node.js 22+，依赖 npm/npx |
| 渲染依赖 | FFmpeg（视频编码）+ headless Chrome（逐帧 seek） |
| 操作系统 | Windows / macOS / Linux 均可；也可 Docker / AWS Lambda 上渲染 |
| AI 接入 | Claude Code / Codex / Cursor / Gemini CLI / Copilot / OpenCode 等支持 skills 的助手 |
| 在线体验 | hyperframes.dev 在线 Playground，无需安装即可试 |
🚀 上手步骤
① 接入 Claude Code / 独立 skills
# Claude Code（推荐，装插件）
claude plugin marketplace add heygen-com/hyperframes
claude plugin install hyperframes@hyperframes
# 然后对话里用 /hyperframes:hyperframes
# 其他 agent（Codex / Cursor / Gemini CLI / OpenCode 等）装独立 skills
npx skills add heygen-com/hyperframes
然后直接吩咐："Using /hyperframes, create a 10-second product intro with a fade-in title, a background video, and subtle background music."
② 纯 CLI 本地跑
# 初始化一个视频项目
npx hyperframes init my-video
cd my-video
npx hyperframes preview # 浏览器实时预览（热重载）
npx hyperframes render # 渲染成 MP4需求：Node.js 22+、FFmpeg。一个 index.html 就是完整作品，无构建步骤。
③ 一段视频就是一页 HTML
<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" src="intro.mp4" muted playsinline></video>
<h1 class="clip" data-start="1" data-duration="4">Launch day</h1>
<audio data-start="0" data-duration="6" data-volume="0.5" src="music.wav"></audio>
</div>用 data-* 属性定义时间、轨道和剪辑；渲染器在 headless Chrome 里逐帧 seek 再用 FFmpeg 编码——所以确定、可回归。
④ 安装现成组件（Catalog）
npx hyperframes add flash-through-white # 转场效果
npx hyperframes add instagram-follow # 社媒贴片
npx hyperframes add data-chart # 动态图表关键信息速查
| 接入 agent | claude plugin install hyperframes@hyperframes ｜ npx skills add heygen-com/hyperframes |
| 本地 CLI | npx hyperframes init 项目名 → preview → render |
| 运行环境 | Node.js 22+、FFmpeg |
| 渲染路径 | 本地 / Docker / HeyGen 云端（cloud render）/ AWS Lambda（lambda render） |
| 动画 | GSAP / CSS / Lottie / Three.js / Anime.js / WAAPI / 自定义 adapter |
| 协议 | Apache 2.0，无按渲染计费，可商用 |
🖼️ 效果图与演示
Biennale Yellow · frame.md 设计模板：
BlockFrame · frame.md 设计模板：
Bold Poster · frame.md 设计模板：
Cobalt Grid · frame.md 设计模板：
这些都是"写 HTML → 出视频"产出的画面风格，来自 frame.md：把你的品牌 design.md 倒转成"给镜头"的设计规范，AI agent 照着就能生成风格统一的视频。
🎯 典型玩法
🚀 产品发布视频：从官网 URL / 文案 / 脚本生成上市宣传片（30–90s 最佳）
📜 PR 转视频：把 GitHub PR 变成带代码 diff 动画+旁白+字幕的讲解视频
💡 无脸讲解视频：从任意文字生成科普/概念讲解，全部视觉由 LLM 设计
🎵 音乐转视频：输入一首歌，生成节拍同步的歌词/幻灯片/动态宣传片
📊 数据可视化：图表竞速、地图动画、动态数据视频，用于内容流水线
🏭 批量内容流水线：可复用动效组件 + 确定性渲染，CI 里自动出片
📊 和同类做法比
| Remotion | 用 React 组件写视频，需 bundler 构建；云渲染成熟，但许可证为 source-available |
| 传统视频编辑（PR/剪映） | GUI 手动剪，无法被 AI agent 程序化驱动、无法确定性回归 |
| HyperFrames | 纯 HTML 写视频、无构建步骤、21 个 agent skills、确定性渲染、Apache 2.0 无按渲染计费 |
原理一句话：HyperFrames 把"视频"定义成一页 HTML——用 data-* 属性标好每个元素的时间、轨道和时长，动画引擎（GSAP/CSS/Lottie/Three.js…）提供可 seek 的帧序列；渲染器在 headless Chrome 里逐帧 seek 页面、截帧，再交给 FFmpeg 编码成 MP4。因为每帧都是确定性地重放，所以同样的 HTML 永远渲染出同样的视频——这正是 agent 和 CI 流水线需要的。
❓ 常见问题
Q：需要装很多依赖吗？
需要 Node.js 22+ 和 FFmpeg；如果只想体验，直接用 hyperframes.dev 在线 Playground，无需本地安装。
Q：一定要用 HeyGen 的 API 吗？
不用。HyperFrames 是完全开源的开源渲染引擎，本地就能渲染成 MP4，无按渲染计费；HeyGen 云端渲染是可选加速项。
Q：我不会写代码能用吗？
能，这正是它的卖点——让 AI agent（Claude Code / Codex / Cursor 等）帮你写 HTML 并渲染，你只管一句话描述想要什么视频。
Q：支持哪些动画库？
GSAP、CSS 动画、Lottie、Three.js、Anime.js、WAAPI，或你自己的自定义 frame adapter。
Q：和 Remotion 比有什么区别？
Remotion 用 React 组件、需要构建步骤；HyperFrames 用纯 HTML、无构建、index.html 直接预览，且 license 是 Apache 2.0（Remotion 为 source-available）。两者都用 headless Chrome + FFmpeg 渲染。
Q：视频能用于商用吗？
能。Apache 2.0 开源协议，无商用门槛，无按渲染费用；HeyGen 自己就在生产中使用。
Q：能批量自动化生成视频吗？
能。确定性渲染天然适合 CI / 回归测试 / 批量内容流水线，也可部署到 AWS Lambda 做分布式渲染。
Q：输出格式只有 MP4 吗？
主要输出 MP4；动效类（/motion-graphics）还支持透明叠加层输出，供叠加在其他画面上。
🎬 GitHub 搜索 heygen-com/hyperframes ｜ Playground：hyperframes.dev
关注「AI工具匠」，获取更多 AI 工具实操教程