HyperFrames 入门：5 分钟让 AI Agent 帮你写出第一个视频-ZXCV Hub

你有没有经历过这种场景——产品上线要一条 30 秒的介绍视频。你打开了 Premiere，拖了两个素材进去，然后花了三个小时调字幕时间轴、做片头动画、加转场、对齐音频。最后导出，发现 Logo 位置偏了 2 像素，再来一遍。或者你是内容团队负责人，每周要出 5 条 TikTok 视频。每条都要字幕、片头、转场、配音。团队成员不是不会做，是做了太多遍重复劳动，做到想吐。

HyperFrames 就是冲着这些问题来的。

它是一个开源的视频渲染框架——你写 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 — 视频场景的 ID
data-start / data-duration — 什么时候出现，持续多久
data-track-index — 多轨道叠加（视频、图片、音频各占一层）
data-volume — 音量

这个文件直接在浏览器里预览。不打包、不编译、不装依赖。改一行 CSS，刷新就看到变化。

HyperFrames 工作流程：HTML → 逐帧渲染 → MP4

先搞清楚它不是什么

知道它是什么之后，再排除三个常见误解，免得带着错误预期进来：

它不是视频编辑器。 没有 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   # 需要 >= 22

FFmpeg——视频编码工具，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    # 渲染为 MP4

init 会自动创建项目结构和示例文件，同时安装 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 原生创作的赌注。

HyperFrames vs Remotion 核心差异对比

适合你吗——能做什么，不能做什么

它擅长的事

产品介绍视频：从素材到带动画的成品，快的话几分钟搞定
社交媒体短视频：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

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。

HyperFrames 入门：5 分钟让 AI Agent 帮你写出第一个视频