HyperFrames

HyperFrames官网

HyperFrames 是 AI 视频公司 HeyGen 推出的开源视频渲染框架，让 Agent 直接通过写代码生成视频。它把产品介绍、数据可视化、动画、字幕、社交媒体视频等原本需要在专业视频软件中完成的工作，转化为 Agent 可理解和执行的代码任务：一个 HTML 文件就是一个视频，开发者与 AI Agent 用熟悉的 HTML、CSS、JavaScript 即可完成视频创作，渲染引擎在无头 Chrome 中逐帧捕获画面，再由 FFmpeg 合成输出 MP4。整个渲染过程完全确定性，同样的输入永远产出同样的视频，非常适合自动化批量生产与版本管理。

HyperFrames官网：让 AI Agent 通过写代码来编排视频

HyperFrames 采用 Apache 2.0 开源协议，无按次渲染费用，也不设商用门槛，项目在 GitHub 上已获得数千 Star。除开源渲染引擎外，HeyGen 还围绕 HTML 原生视频构建了配套工具链，包括 CLI 命令行工具、浏览器端 Studio 编辑器、可复用素材目录、云端渲染与 HeyGen 自有 Video Agent 的深度集成，同时提供网站转视频、PR 转视频、Figma 转视频等能力，让 AI 同时完成脚本、配音、数字人、字幕和动态视觉的生成。

HyperFrames的主要功能：

1. HTML 原生视频创作：视频组合就是带 data 属性的 HTML 文件，用属性定义每个元素的出现时间、持续时长与轨道，无需 React、无需构建步骤，index.html 在浏览器中可直接播放预览。
2. 确定性渲染引擎：基于无头 Chrome 逐帧寻址捕获，配合 FFmpeg 编码与音频混流，同一输入输出完全一致，适合 CI 回归测试和无人值守的自动化渲染。
3. CLI 命令行工具：通过 npx hyperframes 即可完成项目脚手架创建、实时预览、语法检查、结构检查与本地渲染，默认非交互式运行，天然适配 Agent 调用。
4. Agent Skills 系统：内置十余个面向编码 Agent 的 Skills，通过 npx skills add heygen-com/hyperframes 安装后，Agent 可掌握视频制作的领域模式，直接听懂”帮我做一个产品介绍视频”这类指令。
5. 可复用素材目录（Catalog）：提供、社交浮层、字幕、动画图表、地图、特效等现成组件，例如 npx hyperframes add data-chart 即可插入一个动画数据图表。
6. 灵活的动画适配器：支持 GSAP、CSS 动画、Lottie、Three.js、Anime.js、WAAPI 等主流动画运行时，通过适配器实现逐帧精确寻址，保证库时钟动画可被逐帧渲染。
7. Studio 可视化编辑器：浏览器端的组合预览与编辑界面，方便人工检查和微调 Agent 生成的视频项目。
8. 分布式云端渲染：除本地与 Docker 渲染外，还提供 AWS Lambda 渲染方案，可部署分布式渲染集群，从笔记本或 CI 直接驱动大规模渲染任务。

如何使用HyperFrames？

HyperFrames 的使用流程围绕”写 HTML、渲染视频”展开，开发者或 AI Agent 可按以下步骤操作：

官网提供 Get started 入口，一行命令即可为 Agent 安装 HyperFrames Skills

1. 准备环境：安装 Node.js（要求 22 及以上版本）和 FFmpeg，这是渲染与编码的基础依赖。
2. 创建项目：使用 npx hyperframes CLI 创建项目脚手架，或直接编写一个含 data 属性的 index.html 组合文件；也可以让 Agent 安装官方 Skills 后自动完成。
3. 编写组合：在 HTML 中用 data 属性标记每个元素的时间、时长与轨道，用 GSAP 或 CSS 动画控制，并可从 Catalog 添加、图表、字幕等现成组件。
4. 实时预览：组合文件可直接在浏览器中播放预览，或通过 CLI 启动预览，快速迭代调整画面与节奏。
5. 渲染输出：运行 CLI 渲染命令，引擎在无头 Chrome 中逐帧捕获、FFmpeg 编码混流，输出 MP4；也可选择 Docker 或 AWS Lambda 云端渲染。
6. 接入 Agent 流水线：将 HyperFrames 接入 Claude Code、Codex 等 Coding Agent，或接入 HeyGen Video Agent，实现从脚本到成片的全自动视频生产。

HyperFrames的使用场景：

1. Agent 自动化视频生产：让编码 Agent 批量生成产品介绍、功能演示视频，纯文本输出与确定性渲染天然适合无人值守流水线和版本管理。
2. 数据可视化视频：用动画图表、地图组件把 CSV 数据、报表结果渲染成动态讲解视频，适合数据团队做内容传播。
3. 网站与设计稿转视频：借助 HeyGen 提供的网站转视频、Figma 转视频能力，把网页或设计稿快速变成宣传短片。
4. 社交媒体短视频：利用社交浮层、特效组件快速产出符合平台风格的短视频，用于营销与运营。
5. 带字幕与配音的成片：结合 HeyGen Video Agent 的配音、数字人与字幕能力，一步生成可直接发布的完整视频。
6. CI 自动渲染与回归测试：确定性渲染保证相同输入产出相同视频，可在持续集成中做视觉回归校验与定时批量出片。

HyperFrames：产品价格与版本

HyperFrames 本身是完全开源的项目，采用 Apache 2.0 协议发布，托管在 GitHub（github.com/heygen-com/hyperframes），任何人都可以免费下载、使用、修改和商用，没有按次渲染收费，也没有商用规模门槛。其 npm 包持续高频更新，社区已有来自 tldraw、TanStack 等团队的生产实践。围绕框架的增值能力由 HeyGen 提供：网站转视频、Figma 转视频、云端渲染、素材库以及集成配音与数字人的 Video Agent 等，这部分与 HeyGen 平台的订阅套餐相关，具体价格以 HeyGen 官网公示为准。

HyperFrames的常见问题解答：

HyperFrames 和 Remotion 有什么区别？

两者都用无头 Chrome 和 FFmpeg 渲染视频，核心差异在创作模型：Remotion 基于 React 组件、需要打包构建，授权为源码可用许可；HyperFrames 押注纯 HTML，无需构建步骤，index.html 可直接播放，采用宽松的 Apache 2.0 开源协议，对 Agent 编写和交接更友好。

使用 HyperFrames 需要会视频剪辑吗？

不需要。它没有传统剪辑软件的时间轴拖拽操作，开发者与 AI 已经熟悉的 HTML、CSS、JavaScript 就是创作语言；即使不懂前端，也可以让 Coding Agent 安装官方 Skills 后用自然语言下达指令，由 Agent 完成编写与迭代。

渲染一段视频需要什么硬件和网络条件？

本地渲染只需要满足 Node.js 22+ 与 FFmpeg 环境的普通电脑，渲染在无头 Chrome 中逐帧完成；视频量大或硬件有限时，可改用 Docker 或官方提供的 AWS Lambda 分布式渲染方案，把渲染压力放到云端。

HyperFrames官网网址：

HyperFrames官网入口网址：https://hyperframes.heygen.com/

GitHub 开源仓库：https://github.com/heygen-com/hyperframes

Codex 生态同系列收录：AIsa、OpenDesign、Monid、ego lite，均来自同一篇 Agent 生态盘点，可对照阅读。

OpenI AI时代点评

在 AI 视频工具普遍走”提示词一键成片”路线的当下，HyperFrames 选择了另一条路：把视频变成代码问题。对 Agent 而言，HTML 组合加确定性渲染意味着可迭代、可版本管理、可批量复现，这正是传统图形界面剪辑软件难以自动化的痛点。它与 HeyGen 的配音、数字人和 Video Agent 能力互补，从脚本到成片的链路相当完整；Apache 2.0 的宽松协议也降低了团队自建视频生产管线的门槛。对于开发者、数据团队和需要规模化产出视频的运营团队来说，这是目前对 Coding Agent 最友好的开源视频框架之一；如果你更熟悉类似的代码驱动视频方案，也可以看看 Wan 2.1 AI视频生成 等模型侧工具，或像 n8n 这样的工作流平台搭配使用，构建端到端的自动化内容流水线。