HeyGen 开源炸裂！HyperFrames：用 HTML 写视频，AI Agent 的下一代渲染框架

💡 写 HTML 就能生成视频？HeyGen 开源的 HyperFrames 框架让 AI Agent 也能当视频导演，纯 HTML + GSAP，无需 React，Apache 2.0 完全免费！

📌 先看效果

左边是 HTML 代码，右边是实时渲染的视频------这就是 HyperFrames 的核心体验。

你不需要学习 React，不需要写 TSX 组件，不需要配置打包工具。只要你会写 HTML，你就能做视频。更关键的是，AI Agent 天然就会写 HTML，这意味着视频创作可以直接交给 AI 来完成。

🎯 它能做什么？

特性	说明
🎬 HTML 原生创作	视频就是 HTML 文件 + data 属性，浏览器直接预览
🤖 AI Agent 一等公民	专为 Claude Code、Cursor、Gemini CLI 等 AI 编程工具设计
🔄 确定性渲染	相同输入 = 相同输出，适合自动化流水线
🧩 Frame Adapter 模式	自带 GSAP 支持，也可接入 Lottie、CSS、Three.js
📦 50+ 预制组件	社交 overlays、着色器转场、数据可视化、电影级特效
🆓 Apache 2.0 许可	完全开源，商用无限制，无按次收费

🆚 HyperFrames vs Remotion：选谁？

说到用代码生成视频，绕不开 Remotion。Hyperframes 团队直言不讳：他们曾是 Remotion 的生产用户，向 Remotion 学到了很多（Chrome 启动参数、image2pipe 流、帧缓冲等），并在源码中保留了致谢注释。

两者的核心分歧只有一个：创作者写什么？

维度	Hyperframes	Remotion
🖊️ 创作方式	HTML + CSS + GSAP	React 组件 (TSX)
🔨 构建步骤	无需构建，`index.html` 直接播放	需要打包工具
🎞️ 库时钟动画 (GSAP 等)	可 seek、帧精度	仅实时播放
📐 HTML/CSS 穿透	直接粘贴即可	需改写为 JSX
☁️ 分布式渲染	目前单机	Lambda 生产就绪
💰 许可证	Apache 2.0 完全开源	源码可用，商业需付费
💲 费用	零费用，无上限	超出小团队门槛需购买公司许可

⚠️ 注意：如果你在意 OSI 合规、再分发权利、或不想被按次收费，这是第一优先级的决策点。

🚀 5 分钟快速上手

环境要求

Node.js >= 22
FFmpeg

方式一：让 AI Agent 帮你写（推荐 🔥）

bash 复制代码

# 安装 HyperFrames Skills，教你的 AI Agent 框架知识
npx skills add heygen-com/hyperframes

安装后，你的 AI 编程助手（Claude Code、Cursor、Gemini CLI、Codex）就学会了如何编写正确的 compositions 和 GSAP 动画。

直接用自然语言描述你想要的视频：

复制代码

使用 /hyperframes，创建一个 10 秒的产品介绍视频，
包含淡入标题、背景视频和背景音乐。

把现有内容变成视频：

复制代码

把这个 CSV 转成动态柱状图竞赛视频，使用 /hyperframes。

帮我把这份 PDF 总结成 45 秒的推介视频，使用 /hyperframes。

像剪辑师一样迭代调整：

复制代码

把标题放大 2 倍，切换深色模式，末尾加一个淡出效果。

Agent 会自动处理脚手架搭建、动画编写和视频渲染。是不是很魔幻？

方式二：手动创建项目

bash 复制代码

# 第一步：初始化项目
npx hyperframes init my-video
cd my-video

# 第二步：浏览器实时预览（支持热重载）
npx hyperframes preview

# 第三步：渲染为 MP4
npx hyperframes render

💡 hyperframes init 会自动安装 Skills，所以你随时可以切换到 AI Agent 模式。

🔍 核心原理揭秘

HyperFrames 的核心思想非常优雅：HTML 就是视频时间线。

HTML data 属性定义时间线

html 复制代码

<!-- 📄 composition.html -->
<div id="stage"
     data-composition-id="my-video"
     data-start="0"
     data-width="1920"
     data-height="1080">

  <!-- 背景视频：0-5秒 -->
  <video id="clip-1"
         data-start="0"
         data-duration="5"
         data-track-index="0"
         src="intro.mp4"
         muted playsinline></video>

  <!-- Logo 叠加：2-5秒 -->
  <img id="overlay"
       class="clip"
       data-start="2"
       data-duration="3"
       data-track-index="1"
       src="logo.png" />

  <!-- 背景音乐：0-9秒 -->
  <audio id="bg-music"
         data-start="0"
         data-duration="9"
         data-track-index="2"
         data-volume="0.5"
         src="music.wav"></audio>
</div>

每个元素通过 data-start 和 data-duration 声明自己在时间线上的位置。data-track-index 表示轨道层级。这就是全部------没有 DSL，没有配置文件，就是 HTML。

渲染引擎工作流

Parser 解析 HTML，提取所有带 data-* 属性的元素
Frame Adapter 接管动画时钟（GSAP Timeline 等），实现帧级 seek
Engine 启动 Puppeteer + Headless Chrome，逐帧截图
Producer 将帧流通过 image2pipe 管道喂给 FFmpeg，编码为 MP4

HTML Composition → Parser → Frame Adapter → Puppeteer 逐帧截图 → FFmpeg 编码 → MP4

Frame Adapter：关键创新

传统方案中，GSAP、Anime.js 等动画库走的是"实时时钟"，无法 seek 到任意帧。HyperFrames 的 Frame Adapter 把库时钟映射到帧时钟上：

javascript 复制代码

// 核心思路（伪代码）
adapter.seek(frameNumber, fps) {
  const timeInSeconds = frameNumber / fps;
  gsap.timeline().time(timeInSeconds);  // 帧精度 seek
}

这实现了可回溯、帧精准的动画渲染------同样的代码，浏览器里播放和离线渲染结果完全一致。

📦 丰富的组件生态

HyperFrames 内置 50+ 预制组件，一行命令即可使用：

bash 复制代码

# 着色器转场效果
npx hyperframes add flash-through-white

# Instagram 风格关注按钮
npx hyperframes add instagram-follow

# 动态数据图表
npx hyperframes add data-chart

完整的组件目录在这里：hyperframes.heygen.com/catalog

支持的 AI Agent 平台

平台	集成方式
Claude Code	Skills 自动注册为斜杠命令
Cursor	Cursor Marketplace 插件
Gemini CLI	Skills 安装
OpenAI Codex	Codex Plugin
Claude Design	下载 Guide 文件附加到对话

⚖️ 客观评价

✅ 优点

零学习成本：会 HTML 就能用，没有新概念
AI 友好：Agent 天然会说 HTML，无缝衔接
真正开源：Apache 2.0，无隐藏费用
热重载预览：改代码即时看到效果
GSAP 生态：成熟的动画库，资源丰富

❌ 不足

分布式渲染未就绪：目前仅支持单机渲染，Remotion 的 Lambda 方案更成熟
项目较新：生态和社区还在成长中
Node.js >= 22：对版本要求较高

维度	评分
易用性	⭐⭐⭐⭐⭐
创新性	⭐⭐⭐⭐⭐
文档质量	⭐⭐⭐⭐
生产就绪度	⭐⭐⭐⭐
社区活跃度	⭐⭐⭐

📚 总结

HyperFrames 是视频渲染领域的一次思路革新。它没有发明新的 DSL，没有绑定 React，而是做了一件更聪明的事------让 HTML 成为视频的通用语言。

对于 AI Agent 时代，这个选择意义重大。AI 已经精通 HTML 和 CSS，HyperFrames 直接复用了这层能力，让"用 AI 生成视频"这件事变得自然且可靠。

如果你在做自动化视频生成、数据可视化视频、或任何需要程序化创建视频的场景，HyperFrames 值得认真试试。

一句话：用你已有的技能（HTML），做你以前不会做的事（视频）。

📢 原文链接 ：https://github.com/heygen-com/hyperframes

📖 官方文档 ：hyperframes.heygen.com

标签：#HyperFrames #视频渲染 #AI Agent #GSAP #HeyGen

HeyGen 开源炸裂！HyperFrames：用 HTML 写视频，AI Agent 的下一代渲染框架