HyperFrames 用 HTML 写视频：HeyGen 开源的 AI 视频生成框架

你还在用 Premiere 剪宣传片？

这不是一个”又一个视频工具”。这是一个让你用 HTML 写视频、让 AI Agent 帮你出片的框架。

我知道你在想什么：“又来一个轮子？“先别急着关页面。看完这篇，你会发现——以前那些视频制作流程，可能真的该淘汰了。

错误用法：别这样开始

大部分人看到 HyperFrames 的第一反应是：下载 → 装依赖 → 写个 Hello World → 渲染 → 卡住 → 放弃。

这是错的。

正确的打开方式是先理解它的核心概念，再动手。否则你会在 compositions、tracks、clips 这些术语里迷路。

先搞懂这些概念再动手

HyperFrames 的架构很简单，但有几个术语必须先理清：

概念	一句话解释	类比
Composition	一个完整的视频项目	相当于 Premiere 的”序列”
Track	时间轴上的一条轨道	视频轨、音频轨、字幕轨
Clip	轨道上的一个片段	一段视频、一张图片、一段文字
Animation	片段的动效	入场、出场、强调动画
Render	最终输出视频	导出 MP4

关键认知：每个 Composition 就是一个 HTML 文件。你用 HTML/CSS 写布局，用 JS 写交互逻辑，HyperFrames 帮你渲染成视频。

<!-- 一个最简单的 composition -->
<html>
  <body>
    <div class="title">Hello HyperFrames</div>
  </body>
</html>

就这么简单。不需要学 FFmpeg 命令，不需要学 After Effects 表达式。你会写 HTML 就能做视频。

5 分钟安装：别踩这些坑

正确姿势

# 初始化项目
npx hyperframes init my-video
cd my-video

# 本地预览
npx hyperframes preview

# 渲染成视频
npx hyperframes render compositions/index.html -o output.mp4

# 验证输出
ls -la output.mp4

踩坑清单

你可能遇到的问题	解决方案
`command not found: npx`	先装 Node.js 18+，推荐用 nvm
渲染报错 `FFmpeg not found`	`apt install ffmpeg` 或 `brew install ffmpeg`
Puppeteer 启动失败	Linux 服务器需要装 `chromium-browser` 和相关依赖
渲染出来的视频是黑屏	检查 CSS 里的 `width` 和 `height`，必须是固定值

血泪教训：我第一次渲染黑屏了半小时，最后发现是 CSS 里用了 100vw 而不是固定像素。视频渲染不是浏览器，没有”响应式”概念。

验证安装

装完跑一下，确认环境没问题：

npx hyperframes doctor

这个命令会检查 Node.js、FFmpeg、Puppeteer 是否都就绪。全绿就放心往下走。

核心架构：它到底怎么工作的

HTML Composition
    ↓
Puppeteer (无头浏览器) 解析 HTML/CSS/JS
    ↓
逐帧截图
    ↓
FFmpeg 合成视频
    ↓
输出 MP4/WebM

这就是全部秘密。 没有魔法，没有黑科技。就是让浏览器跑你的 HTML，然后一帧一帧截图，最后合成视频。

听起来简单？确实简单。但简单的东西往往最强大。

包结构：这些依赖是干嘛的

HyperFrames 不是一个包，是一套工具链：

包名	作用	你需要直接用吗
`hyperframes`	CLI 工具，负责 init/preview/render	✅ 唯一需要直接用的
`@hyperframes/core`	核心 API 和类型定义	❌ 内部使用
`@hyperframes/engine`	Puppeteer + FFmpeg 渲染引擎	❌ 内部使用
`@hyperframes/producer`	视频合成逻辑	❌ 内部使用
`@hyperframes/studio`	本地开发服务器	❌ preview 时自动调用
`@hyperframes/player`	Web 端视频播放器	⚠️ 嵌入网页时可能用到

结论：你只需要记住一个命令 npx hyperframes。其他的，框架帮你搞定。

AI Agent 集成：这才是杀手锏

传统视频工具：你在软件里拖拖拽拽，AI 帮你生成素材。

HyperFrames：你用自然语言告诉 AI 你要什么视频，AI 直接写 HTML 代码，然后渲染。

接入 AI Agent

# 安装 HyperFrames 的 AI 技能
npx skills add heygen-com/hyperframes

这会把 HyperFrames 的知识注入到你的 AI Agent 里。支持：

Claude Code — 直接在终端里对话式编程
Cursor — IDE 内 AI 辅助
Gemini CLI — Google 的命令行 AI

实际用法

你对 AI 说：

“帮我写一个 30 秒的产品介绍视频，标题用渐入动画，背景用渐变色，要有 Logo 淡入效果”

AI 会自动生成：

<!-- compositions/product-intro.html -->
<html>
  <head>
    <style>
      .title {
        animation: fadeIn 2s ease-in;
        font-size: 48px;
        color: white;
      }
      .logo {
        animation: fadeIn 3s ease-in 1s;
      }
    </style>
  </head>
  <body>
    <div class="title">产品名称</div>
    <img class="logo" src="logo.png" />
  </body>
</html>

然后 npx hyperframes render 出片。整个过程你不需要打开任何视频编辑软件。

动画支持：不止是 CSS 动画

HyperFrames 支持多种动画方案：

方案	适合场景	难度
CSS/WAAPI	简单的入场、出场、强调	⭐
GSAP	复杂的时间线动画、物理效果	⭐⭐
Lottie	AE 导出的矢量动画	⭐⭐
Three.js	3D 场景、粒子效果	⭐⭐⭐

推荐路径：先从 CSS 动画开始。够用了再考虑 GSAP。Three.js 是大杀器，但杀鸡不用牛刀。

DESIGN.md：让 AI 理解你的设计系统

这是个很多人忽略的杀手特性。

在项目根目录创建一个 DESIGN.md 文件：

# 设计系统

## 颜色
- 主色：#FF6B35
- 辅色：#004E89
- 背景：#1A1A2E

## 字体
- 标题：Inter Bold 48px
- 正文：Inter Regular 24px

## 动画
- 默认入场：fadeIn 0.5s ease-in
- 默认出场：fadeOut 0.3s ease-out

AI Agent 会自动读取这个文件，生成符合你品牌风格的视频。相当于给 AI 一份设计规范，它就不会乱来了。

分布式渲染：AWS Lambda 方案

本地渲染慢？需要批量出片？HyperFrames 有 Lambda 分布式渲染方案。

原理很简单：

把 HTML Composition 上传到 S3
Lambda 函数启动 Puppeteer 渲染
渲染完的视频存回 S3
通过 SQS 队列协调多个 Lambda 并行渲染

适合场景：

电商产品视频批量生成
社交媒体内容自动化
A/B 测试不同版本的广告视频

配置方法？Lambda 部署文档写得很清楚，照着来就行。但我得说：能用到这一步的人，大概率已经不需要看教程了。

HyperFrames vs 传统视频工具

维度	HyperFrames	Premiere/After Effects	CapCut/剪映
学习曲线	会 HTML 就行	几个月起步	几天
自动化	✅ AI Agent 全自动	❌ 纯手工	⚠️ 模板有限
批量生产	✅ 脚本批量渲染	❌ 逐个导出	❌ 逐个导出
版本控制	✅ Git 管理	❌ 文件名加版本号	❌ 同左
协作	✅ 代码协作	⚠️ 需要 Creative Cloud	❌ 无
定制性	⭐⭐⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐
适合人群	开发者/自动化需求	专业视频编辑	普通用户

我的判断：如果你是视频编辑师，继续用 Premiere。如果你是开发者，需要批量生成视频内容，HyperFrames 是降维打击。

实战案例：30 秒产品视频

# 1. 初始化项目
npx hyperframes init product-video

# 2. 编辑 compositions/product.html
# （写你的 HTML/CSS/JS）

# 3. 预览
npx hyperframes preview

# 4. 渲染
npx hyperframes render compositions/product.html -o product.mp4

# 5. 验证输出
ls -la product.mp4

从零到出片，5 行命令。

现在就去装

装完回来告诉我你的第一个视频是什么。

如果你卡在某个步骤，大概率是环境问题——Node.js 版本、FFmpeg、Puppeteer 依赖，三选一。评论区告诉我你卡在哪，我帮你排。

下篇讲进阶用法：GSAP 时间线动画 + Three.js 3D 场景，把这个框架玩出花。

相关链接

HyperFrames GitHub — 28K Stars，Apache 2.0 许可
官方文档 — Quickstart + 完整 API 参考
Playground — 在线预览和渲染