HyperFrames：当 AI Agent 学会写 HTML，视频生成就变得像说话一样简单

HeyGen 在 2026 年 3 月开源了 HyperFrames，一个用 HTML 定义视频的渲染框架。上线不到两个月，GitHub 星标已突破 12,700。它的核心主张只有一句话：Write HTML. Render video. Built for agents.

这不是又一个"用代码生成视频"的工具。它的设计哲学比这更激进——它赌的是：AI Agent 最擅长写的格式就是 HTML，所以视频的定义格式就应该是 HTML。

为什么这很重要

传统的 AI 视频生成走的是两条路：

生成式模型（Sora、Kling）——直接从文本生成像素，创意无限但不可控、不可编辑、不可复现。
模板驱动（Canva API、Remotion）——用代码或模板控制视频，精确可控但需要 React/TSX，Agent 写起来很吃力。

HyperFrames 走了第三条路：HTML 原生 + 确定性渲染 + Agent 优先设计。

它的核心洞察是：LLM 在海量 HTML 数据上训练，天生就"会写" HTML。不需要教 Agent 学 React 组件、不需要自定义 DSL、不需要复杂的 API 调用序列。Agent 只需要像写网页一样写 HTML，框架把它变成视频。

一个视频就是一段 HTML

这是 HyperFrames 的核心数据结构——一个完整的视频定义：

<div id="root" data-composition-id="intro"
     data-start="0" data-width="1920" data-height="1080">

  <h1 id="title" class="clip"
      data-start="0" data-duration="5" data-track-index="0"
      style="font-size: 72px; color: white;">
    Hello, HyperFrames!
  </h1>

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

<script>
  const tl = gsap.timeline({ paused: true });
  tl.from("#title", { opacity: 0, y: -50, duration: 1 }, 0);
  window.__timelines["intro"] = tl;
</script>

就这么简单。data-start 控制出场时间，data-duration 控制持续时长，data-track-index 控制轨道层级，GSAP 控制动画。浏览器能预览，npx hyperframes render 能输出 MP4。

AI Agent 集成的简洁性

这是 HyperFrames 真正的杀手锏。对比一下 Agent 生成同样效果需要的"认知负担"：

操作	Remotion (React)	HyperFrames (HTML)
定义一个标题动画	写 TSX 组件 + React state + useCurrentFrame()	写一个 `<h1>` + `data-*` 属性
添加背景音乐	`<Audio>` 组件 + import + src 路径	`<audio>` 标签
动画控制	interpolate() + spring()	GSAP timeline (Agent 大量训练数据)
构建步骤	需要 bundler (Webpack/Vite)	无，index.html 直接可预览
输出视频	npx remotion render	npx hyperframes render

关键区别：Agent 生成 HTML 的能力已经通过预训练内置了。不需要 few-shot 示例、不需要微调、不需要复杂的 system prompt 来教它"如何写 Remotion 组件"。你告诉 Agent "做一个 10 秒的产品介绍视频"，它直接输出一段 HTML，框架直接渲染。

HyperFrames 团队甚至为此设计了完整的 Skills 系统——一套可安装的 Agent 技能文档，教 Agent 如何写正确的 composition：

npx skills add heygen-com/hyperframes

安装后，Claude Code、Cursor、Codex 等 Agent 就能通过 /hyperframes 命令直接创作视频。这不是"Agent 调用视频 API"——这是 Agent 直接写视频源代码。

渲染管线：确定性是关键

HyperFrames 的渲染引擎做了一件很重要的事：完全消除时间依赖。

frame = floor(time × fps)

每一帧都是独立捕获的。引擎用 Puppeteer 启动 headless Chrome，通过 beginFrame API 逐帧截图，然后用 FFmpeg 编码成 MP4。没有 wall-clock 依赖、没有动画"卡顿"导致的帧差异。同样的输入永远产生同样的输出。

这对 Agent 工作流至关重要——你不能接受"每次运行结果略有不同"的视频输出。

本地试跑演示

我用 HyperFrames 做了一个 16 秒的演示视频，4 个场景，每个场景都有 GSAP 入场动画：

整个过程只用了一个 HTML 文件。从 npx hyperframes init 到渲染完成，不到 3 分钟。代码量：一个 200 行的 index.html，其中 CSS 和 GSAP 动画占了大部分。

核心结构就四步：

定义场景——<div class="clip" data-start="0" data-duration="4">
写样式——标准 CSS，渐变、Flexbox、字体
加动画——gsap.from("#title", { y: 60, opacity: 0 })
渲染——npx hyperframes render --output demo.mp4

与 Remotion 的对比

HyperFrames 在设计上明显受 Remotion 启发（源码中保留了致谢注释），两者都用 headless Chrome 做确定性渲染。核心区别在于"作者写什么"：

	HyperFrames	Remotion
编写格式	HTML + CSS + GSAP	React 组件 (TSX)
构建步骤	无，index.html 直接可用	需要 bundler
动画库时钟	可逐帧 seek	按 wall-clock 播放
HTML/CSS 透传	直接粘贴	需要改写为 JSX
分布式渲染	目前单机	Lambda，生产就绪
协议	Apache 2.0 (完全开源)	源码可用，有付费门槛

对于 Agent 驱动的工作流，HTML 原生是一个决定性优势。React 组件需要理解组件生命周期、hooks、import 路径——这些都是 Agent 容易出错的地方。HTML 的容错性要高得多。

生态系统

HyperFrames 不只是一个渲染引擎，它构建了一个完整的生态：

50+ 可复用组件——社交叠加层、着色器转场、数据可视化、电影效果，npx hyperframes add <name> 一键安装
Studio 编辑器——浏览器端可视化编辑器，热重载预览
Player Web Component——可嵌入的 <hyperframes-player> 标签
Skills 系统——6 个 Agent 技能，覆盖 composition 编写、CLI 操作、GSAP 动画、Remotion 迁移等
MCP 集成——通过 Model Context Protocol 暴露工具给 Agent

适合什么场景

HyperFrames 特别适合：

Agent 自动生成的视频——GitHub repo 演示、数据可视化、产品介绍
程序化批量视频——同一模板不同数据，确定性渲染保证一致性
HTML 内容转视频——网页、邮件、报告直接变成视频
快速原型——不需要 After Effects，几分钟出一个可用的视频

不太适合的场景：需要分布式大规模渲染的生产环境（目前仅单机）、需要精细像素级控制的影视制作。

开始使用

# 最快方式：让 Agent 帮你做
npx skills add heygen-com/hyperframes
# 然后描述你想要的视频

# 手动方式
npx hyperframes init my-video
cd my-video
npx hyperframes preview      # 浏览器预览
npx hyperframes render       # 渲染 MP4

要求：Node.js >= 22，FFmpeg。协议是 Apache 2.0，完全开源可商用。

HyperFrames 代表了一个有趣的趋势：AI 工具正在围绕 LLM 的原生能力重新设计。 与其教 Agent 学新 API，不如让工具适配 Agent 已经擅长的格式。HTML 只是开始——下一个可能是 SQL、SVG、或者任何 LLM 已经"理解"的结构化语言。