HeyGen 出品的开源视频渲染框架——你写 HTML，它帮你渲染成 MP4。专门为 AI Agent 设计的程序化视频生产工具。
传统做程序化视频，大概有两条路：要么用 Remotion（React 组件写视频），要么用 SaaS 平台（Shotstack / Creatomate 月费几十到几百刀）。HyperFrames 踩的是第三条路——用你本来就会写的 HTML + CSS + GSAP 动画，把浏览器当渲染器，最终 FFmpeg 编码输出 MP4。
你直接告诉 Claude Code /hyperframes 帮我做一个10秒产品介绍视频，它会自己生成 HTML、写 GSAP 动画、调 TTS、最后执行渲染。整个流程从"我想做视频"到"视频到手"，中间不需要打开任何 GUI 工具。
整个渲染管线非常直接——从 HTML 到 MP4，中间没有魔法，全靠 Puppeteer 截帧和 FFmpeg 编码串联。
渲染过程中，CLI 负责编排时间轴：在每一帧，它先把动画时钟 seek 到对应时刻，然后截图。音频是单独录制再合并的——TTS 配音通过内置 Kokoro 引擎生成，字幕通过 Whisper 提取时间戳，最终混音混画交给 FFmpeg。
这个是 HyperFrames 最核心的技术突破，值得单独拿出来说。
GSAP 这类动画库本质上依赖 performance.now() 跑，它感知的是真实时间流逝。Remotion 的做法是让动画跑起来然后截图——问题是截图本身需要时间，积累下来会有漂移，渲染出来的视频和预览不一致。
HyperFrames 的解法：
{ paused: true } 创建并注册到 window.__timelines所有包都可以独立使用，不强制全量安装。
开发入口。init / preview / lint / render 四条命令覆盖完整开发周期。
解析器、Linter、运行时。负责解析 HTML 中的帧定义，校验语法，提供播放控制。
Puppeteer + FFmpeg 帧捕获引擎。管理浏览器实例、截图、编码流水线。
完整流水线——捕获 + 编码 + 混音。一键从 HTML 到成品 MP4。
浏览器端可视化编辑器。拖拽时间轴、实时预览、属性面板。
可嵌入的 Web Component 播放器。类似 video 标签，支持帧级控制。
WebGL 着色器转场库。闪白、溶解、故障等效果，直接 npx hyperframes add xxx 安装。
npx hyperframes tts 一键生成配音npx hyperframes transcribe 提取音频字幕时间戳npx skills add heygen-com/hyperframes 后，Claude Code / Cursor / Gemini CLI 直接可用前置要求：Node.js 22+，FFmpeg 7.x+。
# 安装 HyperFrames Skill 到你的 AI Agent
npx skills add heygen-com/hyperframes
# 然后直接告诉 Agent 你要做什么视频
# Claude Code: /hyperframes 帮我做一个10秒产品介绍视频# 初始化项目
npx hyperframes init my-video
cd my-video
# 开发预览（热重载）
npx hyperframes preview
# 渲染输出 MP4
npx hyperframes render<!DOCTYPE html>
<html data-hf-duration="5" data-hf-fps="30">
<head>
<script src="https://cdn.jsdelivr.net/npm/gsap"></script>
</head>
<body>
<h1 id="title">Hello HyperFrames</h1>
<script>
const tl = gsap.timeline({ paused: true });
tl.from("#title", { y: 100, opacity: 0, duration: 1 });
window.__timelines = [tl]; // 注册到 HyperFrames
</script>
</body>
</html>目前程序化视频领域的主要玩家对比：
| 维度 | HyperFrames | Remotion | Creatomate |
|---|---|---|---|
| 开源协议 | Apache 2.0 | Remotion License（需付费用于盈利） | 闭源 SaaS |
| 技术栈 | HTML + CSS + GSAP | React 组件 | JSON 配置 |
| AI 生成友好度 | ⭐⭐⭐⭐⭐ | ⭐⭐⭐ | ⭐⭐ |
| 帧精确渲染 | ✅ 原生支持 | ❌ 有漂移 | ✅ 服务端渲染 |
| 分布式渲染 | ❌ 仅单机 | ✅ Lambda/GPU | ✅ 云端 |
| 费用 | 免费（自托管） | 公司用途需企业授权 | 月费 $49-$499 |
| 构建步骤 | 零构建 | 需 Webpack/Vite | 无需 |
| 动画运行时 | 6 种 | React spring | 内置有限 |
| TTS 内置 | ✅ Kokoro | ❌ | ✅ |
| 成熟度 | v0.6.x（快速迭代中） | v4.x（生产级） | 生产级 |
基于实际调研和代码审查，以下是我的评分（满分 10 分）：