HeyGen 开源 HyperFrames：写 HTML 就能渲染视频，AI Agent 的视频生产工具

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 协议。

本文提纲

1. 核心原理：HTML 怎么变成视频
2. 一个完整的例子
3. 专为 AI Agent 设计
4. frame.md：设计系统到视频的翻译层
5. 和 Remotion 对比
6. Catalog：即插即用的组件库
7. 谁在用、适合什么场景

核心原理：HTML 怎么变成视频

HyperFrames 的渲染流程很清晰：

1. 你写一个 index.html，用 data-* 属性标注每个元素的时间轴（开始时间、持续时间、轨道编号）
2. 渲染器在 headless Chrome 里逐帧 seek 这个 HTML 页面
3. 每一帧截图，FFmpeg 编码成视频
4. 最后混入音轨

因为是逐帧 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人工智能时代，转载请注明出处。