HeyGen 开源 HyperFrames：用 HTML 写视频，为 AI Agent 量身定制的视频渲染框架

AI Agent 已经会写 HTML 了——那为什么不直接让它写视频？

2026 年 4 月 17 日，AI 视频公司 HeyGen 开源了一个视频渲染框架——HyperFrames。它的核心理念极其简洁：用 HTML 定义视频，用浏览器预览，用 Puppeteer 渲染成 MP4。

不学新 DSL，不依赖 React，不安装 After Effects。只要你会写 HTML，就能做视频。

更有意思的是它的定位——"Built for agents"，从设计之初就为 AI Agent 驱动的工作流优化。这不是一个给人用的视频编辑器，而是一个给 Claude Code、Cursor、Gemini CLI 这类 AI 编程工具用的视频生成 SDK。

项目概览

• GitHub: https://github.com/heygen-com/hyperframes
• 协议: Apache 2.0
• 版本: 0.4.3（2026-04-17 发布）
• npm 包: 7 个（hyperframes + 6 个 @hyperframes/* 子包）
• 要求: Node.js >= 22、FFmpeg

Tagline 很有态度：

Write HTML. Render video. Built for agents.

为什么值得关注

在分析这个项目之前，先理解它要解决的核心问题。

传统视频制作工具（Premiere、After Effects、剪映）都是 GUI 驱动的，需要手动操作。现有的 AI 视频工具（Runway、Pika、Sora）是"文生视频"路线，用户给一段文字描述，AI 生成视频内容。

HyperFrames 走的是第三条路：让 AI Agent 直接用代码生成视频。

这条路的优势：

• 精确控制：每个元素的位置、时间、动画都可以精确到帧
• 确定性输出：相同输入 = 完全相同的视频，适合自动化流水线
• 可复现：代码即配置，版本控制即资产管理
• 低成本：不需要 GPU 训练模型，纯渲染

快速上手

npx hyperframes init my-video
cd my-video
npx hyperframes preview   # 浏览器实时预览（热重载）
npx hyperframes render    # 渲染为 MP4

三步完成：初始化项目、预览效果、渲染出片。

核心设计：HTML 原生视频合成

HyperFrames 用 HTML 的 data-* 属性来定义视频的时间轴和元素：

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

  <video id="clip-1"
         data-start="0"
         data-duration="5"
         data-track-index="0"
         src="intro.mp4"
         muted playsinline></video>

  <img id="overlay"
       class="clip"
       data-start="2"
       data-duration="3"
       data-track-index="1"
       src="logo.png" />

  <audio id="bg-music"
         data-start="0"
         data-duration="9"
         data-track-index="2"
         data-volume="0.5"
         src="music.wav"></audio>
</div>

这段 HTML 定义了一个 1920x1080 的视频合成：

• 0-5 秒：播放 intro.mp4 背景视频
• 2-5 秒：叠加显示 logo.png
• 0-9 秒：背景音乐，音量 50%

设计哲学很关键：没有发明新语言，没有自建 DSL。HTML 就是你定义视频的全部语法。

AI Agent 原生集成

这是 HyperFrames 最独特的地方。

npx skills add heygen-com/hyperframes

这条命令安装了一套 Skills，教会 AI Agent 如何正确编写 HyperFrames 合成和 GSAP 动画。

在 Claude Code 中，这些 Skill 会注册为斜杠命令：

• /hyperframes — 生成视频合成代码
• /hyperframes-cli — CLI 命令操作
• /gsap — GSAP 动画 API 帮助

实际使用方式——直接跟 AI 对话：

Using /hyperframes, create a 10-second product intro
with a fade-in title, a background video, and background music.

或者更高级：

Summarize the attached PDF into a 45-second pitch video
using /hyperframes.

甚至像跟视频剪辑师对话一样：

Make the title 2x bigger, swap to dark mode, and add a fade-out at the end.
Add a lower third at 0:03 with my name and title.

AI Agent 会自动处理脚手架搭建、动画编写和渲染输出。

为什么这条路可行？ 因为 AI Agent（尤其是 Claude Code、GPT-4、Gemini）本身就很擅长写 HTML 和 CSS。HyperFrames 把视频制作的门槛降到了 HTML 层面——而 HTML 恰好是 AI 最擅长输出的格式之一。

架构拆解

HyperFrames 采用 monorepo 结构，7 个 npm 包各司其职：

渲染原理

渲染流程分为三步：

1. 捕获：使用 Puppeteer 启动 Headless Chrome，按时间轴逐帧截图
2. 编码：使用 FFmpeg 将帧序列编码为 MP4
3. 混音：将音频轨道（背景音乐、TTS 旁白、音效）混入最终视频

这个方案的优势是：完全复用浏览器渲染引擎的能力。CSS 动画、WebGL、Canvas、SVG——只要是浏览器能渲染的东西，HyperFrames 都能录制成视频。

Frame Adapter 模式

HyperFrames 不绑定任何特定的动画库，通过 Frame Adapter 模式支持多种运行时：

• GSAP — 专业级动画库，时间轴控制精确
• CSS Animations — 原生 CSS 动画，零依赖
• Lottie — After Effects 动画导出格式
• Three.js — 3D 场景渲染

这意味着你可以用你最熟悉的工具写动画，HyperFrames 负责把它变成视频。

50+ 预制组件

HyperFrames 提供了一个组件目录，覆盖常见的视频制作需求：

npx hyperframes add flash-through-white  # shader 转场效果
npx hyperframes add instagram-follow      # 社交媒体关注按钮
npx hyperframes add data-chart           # 动态数据图表

组件类型包括：

• 社交媒体覆盖层：关注按钮、评论气泡、点赞动画
• Shader 转场：白场闪过、模糊渐变、3D 翻转
• 数据可视化：动态柱状图、折线图、饼图
• 电影效果：胶片噪点、光晕、色彩分级

完整目录：https://hyperframes.heygen.com/catalog

实际应用场景

1. 批量生成营销视频

Take this CSV of products and create a 15-second promo video
for each row using /hyperframes.

AI Agent 读取 CSV，为每个产品生成独立的视频合成，批量渲染。

2. 数据报告可视化

Turn this quarterly report into a 60-second animated infographic
using /hyperframes, with charts that animate in sequence.

3. 短视频内容生产

Make a 9:16 TikTok-style hook video about [topic]
using /hyperframes, with bouncy captions synced to TTS narration.

4. 程序化广告

广告投放需要大量不同尺寸、不同文案的素材变体。用 HyperFrames 可以模板化生成：一个 HTML 模板 × 100 组文案数据 = 100 条差异化视频。

与同类工具对比

Remotion 是目前最成熟的 React 视频框架，但它要求你用 React 写视频，这对 AI Agent 来说多了一层抽象。HyperFrames 的优势在于：HTML 是 AI 最擅长输出的格式，不需要 React 这层间接层。

技术要求与限制

• Node.js >= 22：要求较高，因为底层依赖最新的 Puppeteer API
• FFmpeg：需要系统安装，负责最终的编码和混音
• 渲染性能：基于 Puppeteer 逐帧截图，长视频渲染耗时较长
• GPU 加速：通过 @hyperframes/producer 的 Chrome BeginFrame API 可以实现 GPU 加速渲染

总结

HyperFrames 代表了一种新思路：不教人学新工具，而是让 AI 用它已经擅长的语言（HTML）来做视频。

它的价值不在于取代 After Effects 或 Premiere——专业视频编辑器在复杂特效、精细调色、非线性编辑方面仍然不可替代。HyperFrames 的场景是：程序化、批量化、Agent 驱动的视频生成。

对于以下人群特别有价值：

• 需要批量生成视频素材的营销团队
• 想要自动化数据可视化视频的数据团队
• 构建 AI Agent 工作流的开发者
• 做短视频矩阵的内容创作者

HeyGen 选择开源这个框架，战略意图也很明确：用开源生态建立标准。如果"HTML 定义视频"成为 AI Agent 视频生成的事实标准，HeyGen 作为标准的制定者，将在 AI 视频产业链中占据关键位置。

项目地址: https://github.com/heygen-com/hyperframes

npm: https://www.npmjs.com/package/hyperframes

文档: https://hyperframes.heygen.com/introduction

相关项目:

• Remotion — React 视频框架
• Motion Canvas — TypeScript 视频引擎
• Puppeteer — Headless Chrome 控制库