🎬 Hyperframes：AI视频生成框架 HTML/CSS/JS写视频 告别视频编辑器

Hyperframes 是 HeyGen 开源 AI 视频生成框架，HTML/CSS/JS 写视频渲染 MP4。搭配 Claude Code 一句话生成电影级动画，告别传统视频编辑，支持 MP4/MOV/WebP 格式输出，比 Remotion 实时预览更轻量。

🎬 引言

视频制作这个老话题，正在被一种新范式重新定义。

过去要做一个产品宣传视频，你大概率要打开 Final Cut Pro、Premiere、AE，配上数小时的剪辑时间线操作。现在 HeyGen（就是做 AI 数字人那家）开源了一个叫 Hyperframes 的框架，直接用 HTML/CSS/JS 写视频，再让 AI（特别是 Claude Code）一句话生成完整动画。

GitHub 仓库（heygen-com/hyperframes）的核心理念只有一句话：HTML 就是视频。视频文件不再是时间线上的轨道，而是实时可编辑的 DOM。

这个项目在 Reddit r/vibecoding 和 r/buildinpublic 都引发了不少讨论，被很多独立开发者称为"Remotion 的真正对手"。咱们今天就来看看它到底有什么料。

---

⭐ 核心功能

🎨 HTML 即视频

传统视频制作的痛点是：你得在专业软件里拖拽时间线、调整关键帧、反复预览渲染。Hyperframes 把这一步直接砍掉。

视频的每一帧都是一个真实的 HTML 元素。CSS 动画、JS 逻辑、Web 字体、CSS 变量，所有 Web 开发栈都能用上。HTML 既是渲染层，也是可编辑的源文件。

官方对比文档里写得很清楚：HTML is both the render layer and the editable source of truth — the same DOM is what you see and what you edit.

🤖 Agent-Native 设计

这是 Hyperframes 最特别的地方。它从一开始就是为 AI Agent 设计的，不是事后加的。

• Claude Code 集成：通过 npx skills add heygen-com/hyperframes 一行命令装好配套 skill
• 一句话出片：在 Claude Code 里输入提示词，AI 直接生成可运行的视频代码
• 实时迭代：调字号、加速动画、加光效，AI 改完直接预览，无需重新编译
• 多格式输出：MP4、MOV、WebP、PNG 序列，FPS 可调（默认 30）

🪟 实时预览编辑器

配套的 Web 编辑器（hyperframes.heygen.com）能直接编辑 HTML 源码，浏览器内即时预览效果。

不像 Remotion 那样改完代码还要重新 build，这里改完刷新就是新版本。对于需要反复调整动画细节的场景，效率差距非常明显。

🎭 数字人友好

和 HeyGen 自家的 AI 数字人 API 深度集成。可以一句话生成"AI 主持人+动态文字+配图"的完整演示视频，对营销人员来说非常香。

---

📥 安装与使用

环境准备

# 1. 安装 Node.js（v18+）
node --version  # 验证

# 2. 安装 FFmpeg（视频编码依赖）
# macOS
brew install ffmpeg

# Ubuntu/Debian
sudo apt install ffmpeg

# Windows（用 Chocolatey）
choco install ffmpeg

方式一：Claude Code 一键安装（推荐）

# 在你的项目目录里
npx skills add heygen-com/hyperframes

然后在 Claude Code 里说一句话：

"Set up everything needed so I can create, preview, and render videos using Hyperframes."

Claude 会自动把脚手架、依赖、示例代码全部准备好。

方式二：手动克隆

git clone https://github.com/heygen-com/hyperframes.git
cd hyperframes
npm install

第一个视频：电影感开场动画

创建一个 intro.js：

import { Hyperframes } from '@heygen/hyperframes';

const video = new Hyperframes({
  width: 1920,
  height: 1080,
  fps: 30,
  duration: 5
});

video.addScene({
  html: `
    <div class="intro">
      <h1 class="title">Hyperframes</h1>
      <p class="subtitle">Prompt. Animate. Render.</p>
    </div>
  `,
  css: `
    .intro {
      background: #0a0a0a;
      height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
    .title {
      font-size: 120px;
      color: white;
      text-shadow: 0 0 40px rgba(100, 200, 255, 0.5);
      animation: fadeIn 2s ease-out;
    }
    .subtitle {
      font-size: 36px;
      color: #88ccff;
      margin-top: 20px;
      letter-spacing: 8px;
      animation: fadeIn 2s 0.5s both;
    }
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(20px); }
      to { opacity: 1; transform: translateY(0); }
    }
  `
});

await video.render('intro.mp4');
console.log('✅ 视频已生成：intro.mp4');

进阶：网页转视频

想把 产品页 变成视频？在 Claude Code 里说：

"Create a short cinematic explainer video based on this page: https://www.heygen.com/agent. Highlight the key features. Keep it concise and easy to follow. Maintain a dark, premium design style."

AI 会自己抓取页面内容、规划分镜、生成代码、渲染输出。

渲染命令

# 渲染为 MP4（默认）
npx hyperframes render intro.js

# 渲染为 MOV（Final Cut 友好）
npx hyperframes render intro.js --format mov

# 渲染为 WebP 动图
npx hyperframes render intro.js --format webp

---

🎯 适用场景

✅ 适合用的人

• 产品经理：快速出 demo 视频，5 分钟搞定一个产品介绍
• 独立开发者：YouTube 教程视频、技术分享，比 PR 录屏效率高 10 倍
• 营销人员：批量生成社交媒体短视频，统一品牌风格
• AI 工具爱好者：配合 Claude Code 把"想法→成品"压缩到 1 轮对话
• 教育创作者：课程开头动画、章节封面、概念可视化

❌ 不太适合的场景

• 专业电影/广告级长片（这种仍然需要 AE/PR）
• 需要复杂 3D 建模和粒子特效的镜头
• 直播/实时合成（这是离线渲染管线，不是 OBS 替代品）

---

🔍 对比：Hyperframes vs Remotion

维度	Hyperframes	Remotion
技术栈	纯 HTML/CSS/JS	React + TypeScript
学习曲线	Web 开发者秒上手	需要懂 React 生态
实时预览	✅ 浏览器即时刷新	❌ 需要重新 build
AI 友好度	✅ 专为 Agent 设计	⚠️ AI 生成的 React 代码经常报错
生态成熟度	🆕 较新	✅ 老牌项目，案例多
数字人集成	✅ 原生 HeyGen 集成	❌ 需自己接 API
生产稳定性	早期但 HeyGen 内部在用	久经考验

官方对比指南（Hyperframes vs Remotion）写得很坦诚：Remotion 是好项目，HeyGen 自己内部生产管线用了好几个月，但在规模化时遇到了 React-first 模型的限制。

简单说怎么选：

• 选 Remotion：你的团队都是 React 工程师，要做复杂长片
• 选 Hyperframes：你想让 AI 直接出片，或快速迭代短片

---

⚠️ 注意事项

🐣 项目还年轻

Hyperframes 截至 2026 年 6 月才发布几个月，GitHub 上 issues 只有 6 个，但 1932 commits 非常活跃。生产环境使用前建议先小规模试水，避开关键业务节点。

🔑 依赖 FFmpeg

必须有 FFmpeg 才能渲染。Linux 服务器部署时要记得装：

sudo apt install ffmpeg

CI/CD 流水线里如果用 Docker 镜像，记得在 Dockerfile 里加 apt-get install -y ffmpeg，否则构建完跑不了。

💰 数字人部分收费

如果你要用 HeyGen AI 数字人（视频里的虚拟主持人），那是 HeyGen 的付费服务。Hyperframes 本身开源免费，但数字人 API 是分开的账单。

📦 Node.js 版本

要求 Node 18+。老项目升级前注意兼容性，特别是用了 Node 14/16 老版本的项目。

🖼️ 渲染性能

4K 60fps 长视频会比较吃 CPU/GPU。普通 1080p 30fps 短片（5-30 秒）在 M1/M2 MacBook 上几秒到几十秒搞定，服务器端用多核 CPU 也能扛。

📌 项目地址汇总

• 仓库：https://github.com/heygen-com/hyperframes
• 官方文档：https://hyperframes.heygen.com
• 快速上手：https://hyperframes.heygen.com/quickstart
• 示例库：https://hyperframes.heygen.com/examples
• 官方对比：https://hyperframes.heygen.com/guides/hyperframes-vs-remotion

---

✅ 总结

Hyperframes 给"代码生成视频"这个赛道换了一种打开方式。

优点：

• HTML/CSS/JS 零学习成本，Web 开发者秒上手
• Claude Code 集成丝滑，AI 直接出片
• 实时预览，告别 build 等待
• 数字人 API 原生集成，营销场景直接起飞

缺点：

• 项目年轻，案例和社区还在积累
• FFmpeg 是硬依赖
• 复杂长片和专业效果不如传统视频软件
• AI 生成的代码偶尔需要人工微调

适合谁：想用 AI 快速出短视频的开发者、产品经理、营销人员；想摆脱 AE/PR 的独立创作者；对"提示词→成品"工作流有信仰的人。

推荐指数：⭐⭐⭐⭐（4/5，扣 1 颗给生态成熟度）

如果你已经在用 Claude Code 写代码，强烈建议试试 Hyperframes。一旦习惯了"提示词→视频"的节奏，你会发现自己再也回不去时间线了。