HeyGen 开源 HyperFrames：写 HTML 就能渲染视频，AI Agent 的视频生产工具
先收藏，回头一定用得上。
HeyGen（就是那个做 AI 数字人的公司）开源了一个项目叫 HyperFrames，口号很直白：Write HTML. Render video. Built for agents.
26700 Star，2500 Fork，3 个月从零到这个数字。它做的事情也直白：你写一个 HTML 文件，加上时间轴和动画，它帮你渲染成 MP4。没有 React 依赖，没有私有格式，没有按次收费。Apache 2.0 协议。
本文提纲
- 核心原理：HTML 怎么变成视频
- 一个完整的例子
- 专为 AI Agent 设计
- frame.md：设计系统到视频的翻译层
- 和 Remotion 对比
- Catalog：即插即用的组件库
- 谁在用、适合什么场景
核心原理：HTML 怎么变成视频
HyperFrames 的渲染流程很清晰：
- 你写一个
index.html，用data-*属性标注每个元素的时间轴（开始时间、持续时间、轨道编号） - 渲染器在 headless Chrome 里逐帧 seek 这个 HTML 页面
- 每一帧截图，FFmpeg 编码成视频
- 最后混入音轨
因为是逐帧 seek（不是实时录制），所以同样的输入永远产出同样的视频——这对 CI/CD 和自动化渲染来说至关重要。
MERMAID_BLOCK_0
动画方面，你可以用 GSAP、CSS Animation、Lottie、Three.js、Anime.js、WAAPI——或者自己写 Frame Adapter。HyperFrames 不绑定任何动画库。
一个完整的例子
<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><script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js"></script><script>
const tl = gsap.timeline({ paused: true });
tl.from("#title", { opacity: 0, y: 40, duration: 0.8 }, 1);
window.__timelines = window.__timelines || {};
window.__timelines.launch = tl;
</script>
</div>
核心就是 data-start、data-duration、data-track-index 这三个属性。加上 GSAP timeline 控制动画。浏览器里直接预览，命令行渲染成 MP4：
npx hyperframes init my-video
cd my-video
npx hyperframes preview # 浏览器预览，支持热重载
npx hyperframes render # 渲染成 MP4
要求：Node.js 22+ 和 FFmpeg。
专为 AI Agent 设计
这是 HyperFrames 和其他视频框架最大的不同。
它不是只给人用的工具——它把视频生产的完整流程编码成了 AI Agent 可以理解和执行的 Skill。安装方式：
npx skills add heygen-com/hyperframes
装好之后，你直接跟 Agent 说：
"用 HyperFrames 创建一个 10 秒的产品介绍视频，带淡入标题、背景视频和轻柔的背景音乐。"
Agent 会自动执行完整的视频生产循环：规划视频结构 → 写 HTML → 添加动画 → Lint 校验 → 预览 → 渲染。支持 Claude Code、Cursor、Gemini CLI、Codex 等主流编码 Agent。
这个设计思路很聪明：Agent 已经会写 HTML 了，不需要学新的领域特定语言。你只需要告诉它 data-* 属性的规则和时间轴的约定。
frame.md：设计系统到视频的翻译层
HyperFrames 还搞了一个有意思的东西叫 frame.md。
问题是这样的：每个品牌都有 design.md（颜色、字体、间距），但这些规范是给网页写的，不是给视频写的。视频有它自己的规则——画幅比例、安全区域、字幕位置、过渡节奏。
frame.md 就是这个翻译层：它把你的 web 设计规范"翻转"成视频语境下的规范，AI Agent 可以直接基于它来组合视频。
目前有十几个预设主题（Biennale Yellow、BlockFrame、Blue Professional、Bold Poster 等），可以直接在 hyperframes.dev/design 浏览和混搭。
和 Remotion 对比
HyperFrames 明确说了它受 Remotion 启发。两者都用 headless Chrome + FFmpeg 渲染视频，但设计哲学不同：
| 维度 | HyperFrames | Remotion |
|---|---|---|
| 创作方式 | 纯 HTML + CSS | React 组件 |
| 构建步骤 | 无，index.html 直接跑 | 需要 Bundler |
| Agent 友好度 | HTML 文件，Agent 直接写 | JSX/React 项目 |
| 动画模型 | 可 seek，帧精确 | Wall-clock 模式需额外处理 |
| 分布式渲染 | 本地 + AWS Lambda | Remotion Lambda（更成熟） |
| 许可证 | Apache 2.0 | Source-available |
一句话概括：Remotion 的赌注是 React 组件，HyperFrames 的赌注是人和 Agent 都能轻松写的纯 HTML。
Catalog：即插即用的组件库
不想从零写？有现成的：
npx hyperframes add flash-through-white # Shader 过渡
npx hyperframes add instagram-follow # 社交媒体叠加层
npx hyperframes add data-chart # 动画图表
包括转场效果、社交叠加、字幕、图表、地图动画等。在 Catalog 浏览全部。
谁在用
HeyGen 自己内部生产环境在用。社区用户包括 tldraw、TanStack 等团队。适合的场景：
- 产品发布视频和功能介绍
- PR 演示视频（带代码 diff 动画、旁白、字幕）
- 数据可视化和图表竞赛
- 社交媒体短视频（动态字幕、叠加层、音乐）
- 文档转视频 / PDF 转视频
- 自动化内容流水线的可复用动效模板
AWS Lambda 渲染方案也有，适合 CI/CD 集成和批量渲染。
试过了？评论区说说你拿它做了什么视频。还没试？收藏起来周末折腾。
作者: itech001
来源: 公众号：AI人工智能时代
网站: https://www.theaiera.cn/
每日分享最前沿的AI新闻资讯和技术研究。
本文首发于 AI人工智能时代，转载请注明出处。