它是一个开源的视频渲染框架——你写 HTML，它渲染成 MP4。不需要 Premiere，不需要 After Effects，不需要学任何专有的时间轴操作。更关键的是：AI Agent 可以直接帮你写这个 HTML，你用自然语言描述想要什么，它帮你生成视频。
由 HeyGen 团队开发，Apache 2.0 许可证，完全免费商用。2026 年 4 月开源，GitHub 已超 19,000 星标。
一句话总结 HyperFrames
用 HTML/CSS/JS 写视频，让 AI 帮你写 HTML。
展开说就是：
- 视频就是一个 HTML 文件——在里面写什么元素、什么时候出现、持续多久，直接在浏览器里预览效果
- AI 编码工具（Claude Code、Cursor、Gemini CLI、Codex）通过专用 Skills 理解视频创作，用自然语言就能驱动
- 渲染结果是确定的——同样的描述永远产出同样的 MP4，适合自动化和批量生产
一个最简的视频组合长这样：
<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>几个关键属性一眼看懂：
data-composition-id— 视频场景的 IDdata-start/data-duration— 什么时候出现，持续多久data-track-index— 多轨道叠加（视频、图片、音频各占一层）data-volume— 音量
这个文件直接在浏览器里预览。不打包、不编译、不装依赖。改一行 CSS，刷新就看到变化。
先搞清楚它不是什么
知道它是什么之后，再排除三个常见误解，免得带着错误预期进来：
它不是视频编辑器。 没有 Premiere 那种拖拽时间轴的界面。你写 HTML 代码，它帮你渲染成视频。这是给开发者和会用 AI 工具的人用的，不是给设计师在时间轴上精调的。
它不是 No-Code 工具。 底层是代码。虽然可以通过 AI Agent 用自然语言驱动，但你至少需要在终端里跑命令。
它不是 HeyGen 主产品的一部分。 HyperFrames 是完全独立的开发者工具。不需要 HeyGen 账号，不依赖 HeyGen 云端服务，渲染在本地进行。
5 分钟上手：真的能这么快吗
能。前提是装好两个东西：Node.js（版本 >= 22）和 FFmpeg。
环境安装（还没装的看这里）
Node.js——去 nodejs.org 下载安装，或者用包管理器：
# macOS
brew install node
# Windows（推荐用 winget）
winget install OpenJS.NodeJS
# 装完后确认版本
node --version # 需要 >= 22FFmpeg——视频编码工具，HyperFrames 渲染 MP4 靠它：
# macOS
brew install ffmpeg
# Windows
winget install Gyan.FFmpeg
# Ubuntu / Debian
sudo apt install ffmpeg
# 装完后确认
ffmpeg -version两个都装好，往下走。
路线一：让 AI 帮你做（推荐）
npx skills add heygen-com/hyperframes这一条命令把 HyperFrames 的完整知识装进你的 AI Agent。然后在 Claude Code（或 Cursor、Codex）里直接说：
用 /hyperframes 做一个 10 秒的产品介绍视频：
- 深色背景
- 标题从左边淡入
- 底部加背景音乐AI 会自动创建 HTML 组合文件、配置动画、处理素材。你只需要 npx hyperframes render 就能拿到 MP4。
修改也用自然语言：
标题放大两倍，背景换成深蓝色，最后加一个淡出效果。在 0:03 的位置加一个字幕条，显示"张三，产品经理"。AI 理解 lower third、fade-out、dark mode 这些视频编辑概念，直接修改对应的 HTML 和 CSS。你不需要打开任何视频编辑软件。
路线二：自己动手
npx hyperframes init my-video
cd my-video
npx hyperframes preview # 浏览器预览，支持热刷新
npx hyperframes render # 渲染为 MP4init 会自动创建项目结构和示例文件，同时安装 AI Skills。你可以自己写 HTML，也可以随时交给 AI Agent 继续。
让画面动起来
HyperFrames 默认用 GSAP 做动画。如果你用 AI Agent 模式，动画代码 AI 全自动写好，你不需要手动碰这些。
如果你想自己写，逻辑也很简单——用 GSAP 创建一个动画时间线，告诉 HyperFrames "这个动画交给你控制"就行：
<script>
const tl = gsap.timeline({ paused: true });
tl.from("#bento", {
opacity: 0,
y: 40,
duration: 1.2,
});
window.__timelines["spotify-bento"] = tl;
</script>这段代码的意思是：创建一个动画（从透明到不透明、从下往上滑入），设为"暂停"状态，交给 HyperFrames 渲染引擎来逐帧控制。这样渲染引擎可以在任意一帧精确捕捉动画状态，保证每次渲染结果一致。
AI Agent 做视频——真实场景长什么样
装好 Skills 后，以下场景都是真实的对话式操作：
场景一：做 TikTok 短视频
做一个 9:16 竖版 TikTok 视频，主题是机器学习入门。
要求：弹跳字幕跟着 TTS 配音节奏走。AI 处理全部环节：创建 9:16 画幅组合、生成 TTS 配音（Kokoro 引擎）、逐句同步字幕、设置弹跳动画。你只管提需求。
场景二：把内容变成视频
把这个 PDF 做成 45 秒的演示视频。把这个 CSV 数据做成动态柱状图竞赛视频。把这个网页做成带动画的演示视频。这三个场景分别对应 HyperFrames 内置的三个能力：文档转视频、数据转可视化视频、网页转视频。不是概念功能，是装了 Skill 就能直接用的。
场景三：批量做重复性视频工作
你需要给 5 个发言人各加一条字幕条，传统做法是手动拖 5 次。用 HyperFrames：
给以下时间点各加一个发言人标签：
- 0:12 — "张三，CEO"
- 1:45 — "李四，工程负责人"
- 3:20 — "王五，销售总监"
样式统一：白色文字、半透明深色底条、从左滑入、停留 3 秒。AI 循环处理所有时间点，一次输出。20 分钟的手动操作变成一条指令。
这些能力来自 HyperFrames 的 12 个专用 Skills：
| Skill | 它做什么 |
|---|---|
hyperframes |
核心：HTML 组合、字幕、TTS、音频响应动画、转场 |
hyperframes-cli |
命令：init、lint、preview、render |
hyperframes-media |
素材：TTS（Kokoro）、语音转录（Whisper）、背景移除 |
hyperframes-registry |
组件安装：hyperframes add <block-name> |
website-to-hyperframes |
网页转视频：捕获 URL → 动画组合 → 渲染 MP4 |
remotion-to-hyperframes |
Remotion 迁移：React 组合 → HTML 组合 |
加上 GSAP、Anime.js、CSS Animations、Lottie、Three.js、Web Animations API 六个动画适配器——你的 AI Agent 基本掌握了视频创作的全套技能。
音频怎么适配——背景音乐、配音、节奏同步
视频不只有画面。HyperFrames 对音频的处理方式是：视频里的 <video> 元素必须静音，所有音频走单独的 <audio> 标签。这样渲染引擎才能独立控制画面和声音的混流。
加背景音乐
在 HTML 组合里加一个 <audio> 标签，设定开始时间、持续时长和音量：
<audio
id="bg-music"
data-start="0"
data-duration="30"
data-track-index="2"
data-volume="0.3"
src="music.wav"
></audio>data-volume="0.3" 表示 30% 音量，不会盖过人声。多段音频放在不同 data-track-index 上，渲染时自动混流到同一个 MP4。
想换音乐？跟 AI 说：
把背景音乐换成 assets/track.mp3。TTS 配音——本地生成，不需要 API Key
HyperFrames 内置 Kokoro TTS 引擎，完全本地运行，不需要注册任何服务或申请 API Key。Kokoro 是一个 82M 参数的轻量语音合成模型，效果好、体积小。
生成配音的命令：
npx hyperframes tts SCRIPT.md --voice af_nova --output narration.wav用自然语言也行——跟 AI Agent 说"给这段脚本加配音"，它自动调用 /hyperframes-media Skill 处理。
可选的语音角色（根据内容类型官方推荐）：
| 内容类型 | 推荐语音 | 风格 |
|---|---|---|
| 产品演示 | af_heart、af_nova |
专业、温暖 |
| 教程视频 | am_adam、bf_emma |
清晰、稳重 |
| 营销视频 | af_sky、am_michael |
有活力 |
你也可以直接描述想要的风格：
给这个视频加配音，用专业女声。用英式男声配音，1.1 倍语速。生成配音后，运行转录命令拿到逐词时间戳：
npx hyperframes transcribe narration.wav输出的 transcript.json 包含每个词的精确起止时间，字幕同步全靠它。后续所有画面的时长都跟着这个时间戳走，不用自己估算。
补充：除了 Kokoro，HyperFrames 也支持 ElevenLabs 和 HeyGen 的 TTS 适配器。如果你有这些服务的 API Key，可以用它们的声音库。
音频响应式动画——让画面跟着节奏动
这是 HyperFrames 的一个亮点功能：把音频的频段映射到视觉属性上，让画面"跟着音乐跳舞"。
具体的映射关系：
| 音频频段 | 影响的视觉属性 | 效果 |
|---|---|---|
| 低音（Bass） | scale（缩放） |
跟着鼓点脉动 |
| 高音（Treble） | glow（发光） |
闪烁强度跟着旋律走 |
| 振幅（Amplitude） | opacity（透明度） |
呼吸感 |
| 中音（Mids） | shape（变形） |
形态变化 |
用自然语言触发：
让文字跟着节拍脉动。给 Logo 加上低音驱动的缩放效果。让发光效果跟着高音走。AI Agent 会自动做音频频段分析，把对应的动画关键帧映射好。效果类似 TikTok 上那种跟着节拍弹跳的字幕，但你可以精确控制哪些元素响应哪些频段。
50+ 现成组件——别从零开始
HyperFrames 有一个组件目录（Catalog），50+ 即装即用的 Block：
npx hyperframes add flash-through-white # 电影白闪转场
npx hyperframes add instagram-follow # Instagram 关注按钮叠加
npx hyperframes add data-chart # 动态数据图表四个大类：
- 社交叠加：Instagram 关注、Twitter 互动、TikTok 点赞——做社交媒体视频必备
- 转场特效：白闪过场、Shader 溶解、淡入淡出——不用自己写动画
- 数据可视化：动态柱状图、折线图、图表竞赛——做数据类视频直接用
- 电影效果：镜头光晕、景深模糊、色差——给产品视频加质感
完整目录：hyperframes.heygen.com/catalog
底层怎么工作的——给想深挖的人
简单说，渲染过程就是：HTML 文件 → 无头浏览器逐帧截图 → FFmpeg 编码混流 → 输出 MP4。
逐帧渲染意味着确定性——同样的 HTML，今天渲染和明天渲染，输出一模一样。这对批量生产和 CI/CD 自动化来说是刚需。
如果你想深入了解，HyperFrames 提供了完整的包生态：CLI 命令行工具、核心解析库、Puppeteer+FFmpeg 渲染引擎、浏览器端编辑器 Studio、可嵌入的播放器组件、WebGL 转场特效等。完整文档见 hyperframes.heygen.com。
和 Remotion 比，怎么选
Remotion 是这个领域的前辈，HyperFrames 团队也坦承从 Remotion 学到了很多（Chrome 启动参数、FFmpeg 流式处理等）。两套工具都能做程序化视频，分歧在一个核心决策上：你主要写什么。
| 维度 | HyperFrames | Remotion |
|---|---|---|
| 创作语言 | HTML + CSS | React (TSX) |
| 构建步骤 | 无 | 需要打包器 |
| AI 生成友好度 | 高（AI 写 HTML 很强） | 中（React 动画架构更复杂） |
| 动画库帧控制 | 可寻帧、帧精确 | 渲染时按实时播放 |
| 许可证 | Apache 2.0，完全开源 | 自定义许可证，商业使用受限 |
| 分布式渲染 | AWS Lambda 支持 | Lambda，更成熟 |
选 HyperFrames： 你想让 AI Agent 大量参与、偏好 HTML/CSS、需要完全开源无商业限制、做自动化视频流水线。
选 Remotion： 团队已经是 React 技术栈、需要成熟的分布式渲染、视频项目复杂度高。
这不是"谁更好"的问题。是 HTML 还是 React 的选择——而 HyperFrames 选 HTML，很大程度上是因为 AI 生成 HTML 的能力远超 React 动画架构。这个选型是面向 AI 原生创作的赌注。
适合你吗——能做什么，不能做什么
它擅长的事
- 产品介绍视频：从素材到带动画的成品，快的话几分钟搞定
- 社交媒体短视频：9:16 竖版、字幕同步、转场特效，全流程自动化
- 数据可视化视频：CSV 直接变动态图表竞赛
- 内容格式转换：博客 → 视频、PDF → 演示视频、网页 → 演示视频
- 批量重复性视频：多条视频的片头、字幕、叠加层，一次指令搞定
- 自动化视频流水线：配合 CI/CD，推送代码自动渲染视频
它不擅长的事
- 逐帧精调：需要精确到像素级的视觉调整，还是用 After Effects
- 实时视频：离线渲染框架，不是直播工具
- 长片剪辑：适合几十秒到几分钟，不是电影后期工具
- 零技术背景使用：虽然 AI 降低了门槛，但终究需要在终端操作
FAQ
我完全不会代码，能用吗？
需要能在终端里跑命令。如果你用 AI Agent 模式，AI 帮你写代码，你负责审核和迭代。但完全零技术背景的人操作起来会有门槛。
必须买 HeyGen 的服务吗？
不需要。HyperFrames 完全独立，不需要 HeyGen 账号，渲染在本地，不依赖云端。
渲染要多长时间？
简单组合（图片 + 文字动画）通常几十秒到两分钟。3D 场景或大量 Shader 特效会更久。可以在 Docker 里跑渲染来统一环境。
输出什么格式？
MP4。通过 FFmpeg 可以转其他格式。
能商用吗？
Apache 2.0 许可证，任意规模商业使用，无渲染费用、无席位限制。
支持哪些 AI 工具？
Claude Code、Cursor、Gemini CLI、Codex 都有插件或 Skill。Claude Design（网页版）也可以通过上传指南文件使用。
音频怎么处理？
支持背景音乐、TTS 配音、音频响应式动画。具体用法见上文"音频怎么适配"章节。
能做直播吗？
不能。这是离线渲染框架。
下一步
- 直接上手：
npx hyperframes init my-video→ 5 分钟出第一个视频 - 让 AI 帮你做：
npx skills add heygen-com/hyperframes→ 在 Claude Code 里对话式创作 - 找现成组件：hyperframes.heygen.com/catalog
- 完整文档：hyperframes.heygen.com
如果你在评估从 Remotion 迁移，看官方对比指南：HyperFrames vs Remotion
