GitHub 地址：https://github.com/heygen-com/hyperframes

简介

HyperFrames​ 是 HeyGen 开源的一款“AI 原生”视频渲染框架。它的核心理念极其简单：Write HTML. Render video. Built for agents.（写 HTML，渲染视频，专为 AI 智能体设计）。

它彻底颠覆了传统视频制作流程。你不再需要学习 After Effects 或 Premiere 的复杂界面，而是直接编写熟悉的 HTML + CSS + JavaScript（配合 GSAP 动画），通过命令行将其确定性渲染为 MP4、WebM 或 MOV 文件。由于 AI 最擅长的就是生成结构化代码，HyperFrames 天然成为了 AI Agent（如 Claude Code、Cursor）制作视频的“母语”工具。

主要功能

1. HTML 即视频时间线

视频不再由轨道和关键帧定义，而是由HTML 元素和数据属性（data-）*控制：

• 时间控制：通过 data-start（开始时间）和 data-duration（持续时间）属性，精确控制每个元素在时间轴上的出现与消失。

• 轨道管理：利用 data-track-index管理图层层级（如背景层、文字层）。

• 零构建步骤：直接使用浏览器原生支持的 HTML/CSS/JS，无需编译 React 组件，AI 生成代码后立即可预览。

2. AI Agent 原生技能（Skills）

这是 HyperFrames 最核心的差异化能力。项目提供了一套完整的 Skills​ 系统，专门“教会”AI 如何编写正确的视频代码：

• 斜杠命令：在 Claude Code 等工具中，安装技能后可使用 /hyperframes命令，直接通过自然语言生成视频代码。

• 框架感知：AI 不仅生成 HTML，还懂得 HyperFrames 特有的 composition 结构、GSAP 动画注册和 CLI 渲染命令。

3. 确定性渲染引擎

基于 Puppeteer（Headless Chrome）和 FFmpeg 构建的渲染管线：

• 帧级精确：采用“寻址-捕获”模式，直接跳转到每一帧进行截图，不受系统负载影响。

• 结果一致：相同的 HTML 输入，在任何机器上渲染出的视频字节级一致，非常适合 CI/CD 自动化流水线。

4. 完整的开箱即用生态

• 组件库：提供 50+ 开箱即用的组件（如社交媒体叠加层、数据图表、电影级转场），可通过 npx hyperframes add一键添加。

• 内置工具：CLI 内置了 TTS（文本转语音）和音频转录（生成字幕）功能，无需依赖外部 API。

• 多格式输出：支持渲染 MP4、MOV、WebM，以及透明背景视频。

安装与配置

环境要求

• Node.js：版本 >= 22（这是硬性要求，低版本无法运行）。

• FFmpeg：需在系统环境变量中可用（用于视频编码）。

安装方式

方式一：AI Agent 优先（推荐）

如果你使用 Claude Code、Cursor、Gemini CLI 等 AI 编程助手，只需安装 Skills：

npx skills add heygen-com/hyperframes

安装后，你的 AI 助手就获得了 HyperFrames 的“知识”，可以直接通过自然语言指令生成视频代码。

方式二：手动开发模式

如果你想手动创建和编辑视频项目：

# 1. 初始化一个视频项目（会自动安装依赖）
npx hyperframes init my-video

# 2. 进入目录
cd my-video

# 3. 启动实时预览（浏览器热重载）
npx hyperframes preview

# 4. 渲染输出
npx hyperframes render

方式三：Docker 模式（解决环境差异）

对于团队部署或避免本地字体差异，可使用 Docker 渲染以确保环境一致性：

npx hyperframes render --docker

如何使用

基础工作流（AI 驱动）

1. 安装技能：在 AI 编码工具中运行 npx skills add heygen-com/hyperframes。

2. 描述视频：向 AI 发送指令，例如：

   “使用 /hyperframes，创建一个 10 秒的 9:16 竖版产品介绍视频，包含淡入标题、背景视频、背景音乐和弹跳字幕。”

3. 预览与迭代：AI 会生成 index.html和动画代码。使用 npx hyperframes preview在浏览器查看效果，然后像和剪辑师沟通一样告诉 AI：“把标题放大 2 倍，末尾加个淡出效果”。

4. 渲染交付：运行 npx hyperframes render --output final.mp4导出成品。

关键概念：HTML 结构

视频的根元素需要声明 composition 属性，子元素通过 data-start控制入场时间：

<div data-composition-id="demo" data-width="1920" data-height="1080">
  <video data-start="0" data-duration="10" src="bg.mp4"></video>
  <h1 data-start="1" data-duration="4" class="title">Hello HyperFrames</h1>
</div>

应用场景实例（无代码）

场景一：AI 自动生成产品更新视频

痛点：每次 App 发布新版本，开发团队需要手动录制屏幕、剪辑、加字幕，制作 Changelog 视频，耗时耗力。

HyperFrames 方案：

1. 在 CI/CD 流水线中，将 Release Notes（Markdown 格式）和截图丢给 Claude Code。

2. AI 利用 HyperFrames Skills 自动生成一个 30 秒的 HTML 视频模板，包含版本号、新功能列表和截图演示。

3. 流水线自动执行 hyperframes render生成 MP4，并发布到官网或社群。

4. 价值：实现了“提交代码即生成宣传视频”的全自动化流程，零人工干预。

场景二：数据报表转动态演示

痛点：每周的运营数据报表（CSV/Excel）是静态的，向管理层汇报时缺乏视觉冲击力。

HyperFrames 方案：

1. 将 CSV 数据文件上传给 AI，指令：“使用 /hyperframes，把这个 CSV 变成 20 秒的柱状图竞赛动画视频”。

2. AI 生成基于 D3.js 或 Chart.js 的动画图表 HTML，并嵌入到 HyperFrames 时间线中。

3. 渲染出的视频可以直接在会议大屏上播放，清晰展示数据变化趋势。

4. 价值：将枯燥的表格转化为引人入胜的动态可视化内容，提升汇报效率。

场景三：批量生产社交媒体素材

痛点：电商运营需要为 100 款商品制作抖音/TikTok 风格的“种草”短视频，人工剪辑成本极高。

HyperFrames 方案：

1. 制作一个通用的 9:16 HTML 模板（含产品图位置、标题样式、背景音乐槽位）。

2. 编写脚本，将商品列表（JSON）批量喂给 AI，AI 利用 Skills 为每个商品填充模板，生成 100 个 HTML 文件。

3. 通过脚本批量调用 hyperframes render渲染出 100 个 MP4 文件。

4. 价值：利用代码的“可复制性”，实现了视频内容的规模化、个性化生产，边际成本几乎为零。

总结

HyperFrames 不仅仅是又一个视频框架，它是AI 时代的内容生产基础设施。它通过将视频“代码化”，让开发者能用熟悉的工具链（HTML、Node.js、CLI）和 AI 助手，实现视频制作的自动化与规模化。对于需要频繁产出视频的内容团队、数据团队和开发者来说，它是降本增效的终极利器。

GitHub 地址：https://github.com/heygen-com/hyperframes

官方文档：https://hyperframes.heygen.com