用写网页的方式「码」出视频：HyperFrames 深度实战指南

你有没有遇到过这种场景：产品上线需要一个 30 秒的宣传片，运营找你要一个 PR 功能解读视频，或者你想把一个 GitHub PR 的改动做成动画 changelog。你打开 After Effects，面对密密麻麻的时间轴和关键帧，大脑一片空白；你试试 Remotion，发现还得先学一轮 React 和它的 Composition API；你转向 AI 视频生成工具，结果每次生成的画面都不一样，没法精确控制某一帧的文案位置和动画节奏。

做视频这件事，对程序员来说一直有个尴尬的断层——你会写代码，但视频制作工具的交互逻辑和代码世界完全不搭界。你习惯了用 Git 管理版本、用 CI 跑自动化、用代码控制一切，但视频制作却把你拉回了一个需要鼠标拖拽、手动调参的黑箱世界。

今天介绍的这个开源项目，打算把这个断层彻底抹平。

项目名片

HyperFrames 是 HeyGen 开源的一套视频生成框架——你用写 HTML/CSS/JS 的方式定义视频，它负责把网页逐帧渲染成确定性的 MP4。不需要时间轴编辑器，不需要专有格式，更不需要 React。

#开源 #HTML转视频 #AI-Agent友好 #确定性渲染 #CLI驱动 #TypeScript

一句话总结：如果你会写网页，你就会做视频。

核心亮点

1. 用你已经会的技能栈做视频

这是 HyperFrames 最降维的一点。视频的「合成」就是一个普通的 HTML 文件，你用 data-* 属性控制每个片段的开始时间、持续时间和轨道层级，用 GSAP、CSS、Lottie、Three.js 做动画——全是你做前端时已经在用的东西。

看这段代码，如果你做过网页开发，三秒就能看懂：

<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 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>
</div>

data-start 控制出场时间，data-duration 控制持续时长，data-track-index 控制轨道层级。没有自定义 DSL，没有专有组件系统，也没有 React 依赖。你甚至可以用 Tailwind v4 来写样式——这玩意儿本质上就是一个会动的网页。

2. 确定性渲染：同输入永远同输出

这是 HyperFrames 架构上最硬核的设计。整个渲染管线是 seek-driven（逐帧驱动） 的，不依赖任何墙上时钟。每一帧的计算公式就是：

frame = floor(time * fps)

每一帧都通过 Chrome 的 beginFrame API 独立捕获，再用 FFmpeg 编码成 MP4。这意味着：同样的输入永远产生完全一致的输出。

为什么这很重要？因为你可以把视频渲染放进 CI/CD 流水线里做自动化测试，可以做批量渲染而不用担心结果漂移，可以精确复现某一帧的画面。这对自动化内容管线来说是刚需——Remotion 虽然也号称确定性，但它的渲染依赖 React 的组件生命周期，在某些异步场景下并不总是能保证逐帧一致。

3. 为 AI Agent 而生：19 个 Skills 让 AI 替你做视频

这是 HyperFrames 区别于所有竞品的杀手级特性。它内置了 19 个 Skills（技能包），AI 编码 Agent 加载后就能自动完成从策划到渲染的全流程。

安装只需一行命令：

npx skills add heygen-com/hyperframes --full-depth

装完后，你在 Claude Code、Cursor、Gemini CLI、Codex 等 Agent 里直接用自然语言描述需求就行：

Using /hyperframes, create a 10-second product intro
with a fade-in title, a background video, and subtle background music.

Agent 会自动走完「规划视频 → 写合法 HTML → 接入可 seek 的动画 → 添加媒体 → lint 检查 → 预览 → 渲染」整个生产闭环。/hyperframes 是路由技能，它会根据你的请求类型自动分发到对应的工作流：

• /product-launch-video — 产品发布视频
• /pr-to-video — 把 GitHub PR 变成动画 changelog
• /faceless-explainer — 无需产品的纯讲解视频
• /motion-graphics — 10 秒以内的动效短片
• /music-to-video — 音乐驱动的卡点视频

每个工作流都会按需加载，不会一次性把 19 个技能全塞给 Agent，保持了上下文精简。

4. frame.md：专为视频设计的设计系统

每个品牌都有 design.md，但没有一个是「为镜头写的」。HyperFrames 提出了 frame.md 的概念——它是你的设计规范面向视频场景的翻译层，把 Web 上下文的设计 token 翻译成 AI Agent 能直接用来组合视频的格式。

官方已经提供了多套现成的 frame.md 设计方案（Biennale Yellow、BlockFrame、Blue Professional、Bold Poster 等），你可以直接在 hyperframes.dev/design 浏览和 remix。

竞品横向对比

HyperFrames 不是这个赛道唯一的玩家。我们把它和几个主流方案放一起比一比。

维度	HyperFrames	Remotion	Motion Canvas	After Effects
技术栈	HTML + CSS + JS	React + TS	TypeScript	GUI 专有格式
AI Agent 友好度	⭐⭐⭐⭐⭐ 内置 19 个 Skills	⭐⭐ 需手写 Prompt	⭐⭐ 需手写代码	❌ 无法自动化
确定性渲染	✅ seek-driven 逐帧	✅ 但依赖 React 生命周期	✅ 帧驱动	❌ 手动操作
学习成本	低（会网页就行）	中（需学 React + Composition API）	中（需学 TS + 节点系统）	高（专业软件）
生态/社区	🌱 早期，增长快	🌳 成熟，生态丰富	🌱 早期，偏学术	🌳 非常成熟
自动化管线	✅ CLI 非交互 + CI 友好	✅ 但配置复杂	✅ 但偏手动	❌
云渲染	✅ HeyGen 云 + AWS Lambda	✅ Lambda	❌ 需自建	❌

降维打击点：HyperFrames 真正的杀手锏不是渲染能力本身，而是它把视频制作变成了 AI Agent 能直接操作的纯文本任务。Remotion 虽然也是代码驱动，但它的 React 组件模型对 LLM 来说并不是最自然的生成格式——HTML 文档才是 LLM 最擅长产出的东西。加上 19 个 Skills 构成的完整知识体系，Agent 不需要猜怎么写，技能包会一步步教它。

缺点与局限性

客观地说，HyperFrames 目前并非完美无缺。

⚠️ 环境门槛不低。 要求 Node.js 22+（这不是所有项目都满足的版本）和 FFmpeg。对于不熟悉音视频工具链的开发者，FFmpeg 的安装和配置本身就是一个门槛。虽然官方提供了 hyperframes doctor 命令来诊断环境，但初次配置仍可能踩坑。

⚠️ 项目处于快速迭代期。 截至撰文时，仓库已有 3161 次提交、756 个分支，Issues 和 PR 非常活跃。这意味着 API 和技能包可能频繁变动，文档偶尔会滞后于代码。你在教程里看到的命令，下个月可能就换了参数。

⚠️ 渲染速度受限于浏览器。 底层是 Chrome 逐帧捕获，渲染速度取决于你的 CPU 和视频复杂度。一段 30 秒的 1080p 视频可能需要几分钟渲染。虽然有云渲染选项（HeyGen 云和 AWS Lambda），但免费额度有限，大规模生产需要付费。

⚠️ 不适合实时编辑场景。 如果你的需求是「实时预览、即时调整、所见即所得」的交互式视频编辑器，HyperFrames 不是为你设计的。它是渲染管线，不是编辑器。

保姆级实战演练

方式一：AI Agent 驱动（推荐）

这是最省心的方式，适合不想手动写 HTML 的同学。

Step 1：安装技能包

npx skills add heygen-com/hyperframes --full-depth

--full-depth 参数很重要——它会完整克隆仓库当前的 main 分支。不加这个参数的话，skills add 会拉取 skills.sh 的 registry blob，可能滞后 main 几个小时，你拿到的是旧版技能。

💡 明灯提示：如果你在非交互环境（CI、Agent 自动运行）中使用，不要直接跑 skills add——它默认会弹出交互式选择器，非交互模式下会安装全部 19 个技能，上下文会很臃肿。正确做法是用 npx hyperframes skills update，它只安装核心技能集。

Step 2：在 Agent 中描述需求

在 Claude Code 或 Cursor 中输入：

Using /hyperframes, create a 10-second product intro
with a fade-in title, a background video, and subtle background music.

Agent 会自动完成脚手架搭建、动画编写、渲染全流程。

Step 3：手动渲染（如果 Agent 没自动跑）

npx hyperframes preview   # 浏览器实时预览
npx hyperframes render    # 渲染为 MP4

方式二：手动 CLI 驱动

适合想完全掌控每个细节的同学。

Step 1：环境准备

# 检查 Node.js 版本（需要 22+）
node -v

# 安装 FFmpeg（macOS）
brew install ffmpeg

# 诊断环境是否就绪
npx hyperframes doctor

Step 2：创建项目

npx hyperframes init my-video
cd my-video

init 会启动一个交互式向导，引导你选择示例和导入媒体。如果你在 CI 或 Agent 中运行，加 --non-interactive 跳过交互：

npx hyperframes init my-video --non-interactive

如果你有一段源视频，可以用 --video 参数传入，会自动转录并生成字幕：

npx hyperframes init my-video --video ./source.mp4

生成的项目结构：

my-video/
├── meta.json          # 项目元数据
├── index.html         # 根合成文件（视频入口）
├── compositions/      # 子合成（通过 data-composition-src 加载）
│   ├── intro.html
│   └── captions.html
└── assets/            # 媒体文件（视频、音频、图片）
    └── video.mp4

Step 3：编写你的第一个视频

编辑 index.html，按 HyperFrames 的合成契约写 HTML：

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js"></script>
  <style>
    body { margin: 0; }
    #stage { width: 1920px; height: 1080px;
             background: #0a0a1a; position: relative; }
    #title { color: #fff; font-size: 96px; font-weight: 900;
             font-family: sans-serif; text-align: center;
             top: 420px; position: relative; }
  </style>
</head>
<body>
  <div id="stage" data-composition-id="demo"
       data-start="0" data-width="1920" data-height="1080">

    <h1 id="title" class="clip"
        data-start="0.5" data-duration="5"
        data-track-index="0">Hello, HyperFrames</h1>
  </div>

  <script>
    const tl = gsap.timeline({ paused: true });
    tl.from("#title", {
      opacity: 0, y: 60, duration: 1, ease: "power2.out"
    });
  </script>
</body>
</html>

Step 4：预览与渲染

npx hyperframes preview   # 浏览器实时预览（支持热重载）
npx hyperframes render    # 渲染为 MP4
npx hyperframes lint      # 检查合成是否合法

💡 明灯提示：如果你用 GSAP 做动画，一定要加 paused: true。HyperFrames 的 seek-driven 渲染机制需要通过手动 seek 时间轴来捕获每一帧，如果 timeline 是自动播放的，渲染时帧捕获会错位，导致动画跳帧或丢失。这是新手最常踩的坑。

💡 明灯提示：hyperframes render 默认输出 30fps。如果你需要更高帧率，用 --fps 60 参数。但注意帧率翻倍渲染时间也接近翻倍，对于 CI 场景建议先用低帧率验证再出最终版。

写在最后

HyperFrames 做了一件很优雅的事——它没有发明新的视频制作范式，而是把视频制作拉回了程序员已经熟悉的 Web 技术栈。HTML 是结构，CSS 是样式，GSAP/CSS/Lottie 是动画引擎，FFmpeg 是编码器，CLI 是自动化入口，Skills 是 AI Agent 的知识注入。每一个环节你都已经会了，组合起来就是一个完整的视频生产管线。

它现在还年轻，生态远不如 Remotion 成熟，文档偶尔滞后，渲染速度也有提升空间。但如果你是一个想用代码和 AI 做视频的开发者，它是目前最值得上手试一试的方案——因为上手成本，几乎为零。

---

📎 项目地址：github.com/heygen-com/hyperframes

📎 官方文档：hyperframes.heygen.com

📎 在线体验：hyperframes.dev