当一个项目达到 10k 说明可以好好研究一番
今天介绍一个类似 remotion 的前端生成视频的开源库，HyperFrames 目前已经 22.8k+ star。 我已经用 remotion 做过十几个视频，看看这个后起之秀有什么不一样。后续准备做一个 HyperFrames 体验视频，本文纯介绍。
编写 HTML → 渲染视频 | 为智能体而生
一句话总结：HyperFrames 将 HTML 代码转换为视频，所有内容都由 AI 生成，我只要你一句话！
Hyperframes 是一个开源视频渲染框架，允许你创建、预览和渲染基于 HTML 的视频合成 ------ 并对 AI 智能体提供一流的支持。
该系统建立在确定性渲染原则之上，确保无论在任何硬件上渲染，相同的 HTML 输入都能产生完全相同的 MP4 输出。
它专门针对AI 智能体工作流进行了优化，提供了一个「技能」系统，能够教会大语言模型（如 Claude 或 GPT）如何正确地编写合成作品。
快速开始
开始一个项目之前，先看看 showcase 就知道这个项目真实能做到什么样，上限如何。
注意是有声的，这个和 remotion 不一样，默认没有字幕配音。
showcase 里面的每一个打开后都是一个在线 Studio，意味着你可以随意修改，然后导出。
如果大家感兴趣了，继续往下看。
选项 1：使用 AI 编码智能体（推荐）
安装 HyperFrames 技能，然后描述你想要的视频：
bash
npx skills add heygen-com/hyperframes这会教会你的智能体（Claude Code、Cursor、Gemini CLI、Codex）如何编写正确的合成和 GSAP 动画。在 Claude Code 中，这些技能会注册为斜杠命令 ------ 调用 /hyperframes 来编写合成，/hyperframes-cli 用于 CLI 命令，/gsap 用于动画帮助。
试一试：示例提示词
将以下任意提示词复制到你的智能体中以开始使用。/hyperframes 前缀会显式加载技能上下文，确保你首次就能得到正确的输出。
冷启动 ------ 描述你的需求：
使用
/hyperframes，创建一个 10 秒的产品介绍视频，包含淡入标题、背景视频和背景音乐。
热启动 ------ 将现有上下文转换为视频：
查看这个 GitHub 仓库 github.com/heygen-com/...，并使用
/hyperframes向我解释其用途和架构。
使用/hyperframes将附件的 PDF 总结为一个 45 秒的推介视频。
使用/hyperframes将此 CSV 转换为一个动态条形图竞赛动画。
特定格式：
使用
/hyperframes制作一个关于 主题 的 9:16 竖屏 TikTok 风格钩子视频，字幕要有弹性效果并与 TTS 旁白同步。
迭代 ------ 像与视频编辑一样与智能体对话：
把标题放大 2 倍，切换到深色模式，并在结尾添加淡出效果。
在 0:03 处添加一个下三分之一字幕条，显示我的姓名和职位。
该智能体会处理脚手架、动画和渲染。更多模式请参阅 提示指南。
选项 2：手动启动项目（这个不推荐）
bash
npx hyperframes init my-video
cd my-video
npx hyperframes preview # 在浏览器中预览（实时重载）
npx hyperframes render # 渲染为 MP4hyperframes init 会自动安装技能，因此你可以随时将工作交给 AI 智能体。
要求： Node.js >= 22, FFmpeg
为什么选择 Hyperframes？
- 原生 HTML ------ 合成就是带有数据属性的 HTML 文件。无需 React，没有专有 DSL。
- AI 优先 ------ 智能体已经会使用 HTML。CLI 默认非交互式，专为智能体驱动的工作流设计。
- 确定性渲染 ------ 相同输入 = 相同输出。为自动化管道而生。
- 帧适配器模式 ------ 可使用你自己的动画运行时（GSAP、Lottie、CSS、Three.js）。
内置组件
50 多个即用型积木和组件 ------ 社交媒体覆盖层、着色器过渡、数据可视化和电影级特效：
bash
npx hyperframes add flash-through-white # 着色器过渡
npx hyperframes add instagram-follow # 社交媒体覆盖层
npx hyperframes add data-chart # 动态图表浏览完整，请访问 hyperframes.heygen.com/catalog。
技能
HyperFrames 附带 技能，这些技能可以教会 AI 智能体通用文档未涵盖的框架特定模式。
bash
npx skills add heygen-com/hyperframes| 技能 | 教学内容 |
|---|---|
hyperframes |
HTML 合成编写、字幕、TTS、音频反应动画、过渡 |
hyperframes-cli |
CLI 命令：init, lint, preview, render, transcribe, tts, doctor |
hyperframes-registry |
通过 hyperframes add 安装积木和组件 |
gsap |
GSAP 动画 API、时间线、缓动、ScrollTrigger、插件、React/Vue/Svelte、性能 |
Hyperframes 技术栈亮点分析
代码质量工具
| 技术 | 用途 | 特点 |
|---|---|---|
| oxlint | Linter | Rust 编写，极快（替代 ESLint） |
| oxfmt | Formatter | Rust 编写，极快（替代 Prettier） |
| lefthook | Git Hooks 管理 | 替代 husky，更快的并行执行 |
| knip | 未使用代码检测 | 清理冗余导出/依赖 |
亮点：全栈采用 Rust 工具链（oxc 生态），而非传统 JS 工具，追求极致性能。
技术栈总结图
bash
┌─────────────────────────────────────────────────────────┐
│ Hyperframes │
├─────────────────────────────────────────────────────────┤
│ 运行环境 Bun + Node.js 22 + TypeScript 5 │
├─────────────────────────────────────────────────────────┤
│ Monorepo 原生 Workspaces（无 Turborepo） │
├─────────────────────────────────────────────────────────┤
│ Lint/Format oxlint + oxfmt（Rust 工具链） │
├─────────────────────────────────────────────────────────┤
│ Git Hooks lefthook + commitlint │
├─────────────────────────────────────────────────────────┤
│ 测试 happy-dom + Bun test │
├─────────────────────────────────────────────────────────┤
│ 脚本执行 tsx（TypeScript 直接运行） │
├─────────────────────────────────────────────────────────┤
│ 核心依赖 Puppeteer + FFmpeg + GSAP（见 README） │
└─────────────────────────────────────────────────────────┘特色亮点
- Bun 优先：统一使用 Bun 而非 npm/yarn/pnpm，脚本执行也更轻量
- Rust 工具链：oxlint/oxfmt 提供亚毫秒级响应，适合频繁的 lint/fix 迭代
- AI 技能校验 ：
lint:skills专门检查 AI 智能体技能文件的正确性，体现「AI-first」设计
工作原理
HyperFrames 生成视频的核心原理是逐帧定位捕获（seek-and-capture），而非实时录制
具体工作原理
- 帧时钟计算 ：使用整数数学计算每帧时间
time = floor(frame) / fps，与真实时间解耦 - 精确定位 ：通过
renderSeek(time)将所有动画、DOM 状态精确定位到指定时间点 - 原子捕获 ：使用 Chrome 的
HeadlessExperimental.beginFrameAPI 原子性地捕获像素缓冲区 - 编码输出：FFmpeg 将捕获的帧编码为 MP4 视频，同时混入音频轨道
数据流
这种架构确保了确定性输出：无论在何种硬件上渲染，相同的 HTML 组合都会产生完全相同的视频。
注意
- HyperFrames 使用
chrome-headless-shell而非普通 Chrome 以确保跨平台一致性 - 支持并行渲染以提升性能，通过
parallelCoordinator分配帧范围到多个工作进程 - Docker 模式提供最大可重现性，使用固定的 Chrome 版本和字体集
和 remotion 区别
HyperFrames 与 Remotion 的核心区别在于渲染架构 ：HyperFrames 使用 Chrome BeginFrame API 的逐帧定位捕获 实现确定性渲染，而 Remotion 主要基于 Puppeteer 的实时截图方式，其次前者是 HTML 后者是 React。
主要区别对比
| 特性 | HyperFrames | Remotion |
|---|---|---|
| 渲染方式 | BeginFrame API 逐帧定位 | Puppeteer 实时截图 |
| 输入格式 | HTML + 数据属性 | React 组件 |
| 确定性保证 | 严格确定性，相同输入产生相同输出 | 依赖系统性能，可能丢帧 |
| 时间处理 | 整数时钟 time = floor(frame) / fps |
真实时间依赖 |
| 浏览器引擎 | chrome-headless-shell 固定版本 | 可系统 Chrome/Chromium |
| 跨平台一致性 | Docker 模式确保完全一致 | 平台相关差异 |
架构差异
HyperFrames 的 seek-and-capture 架构
HyperFrames 通过 renderSeek(time) 精确定位到每一帧，然后使用 Chrome 的 HeadlessExperimental.beginFrame API 原子性捕获像素缓冲区 。这种方式完全脱离真实时间依赖，确保每帧都能被精确捕获。
Remotion 的实时截图架构
Remotion 通常使用 Puppeteer 在真实时间轴上播放动画并截图，这种方式会受到系统负载影响，可能导致丢帧或时间不一致。
关键技术差异
来自 deepwiki
1. 动画框架支持
- HyperFrames : 框架无关，支持 GSAP、Lottie、CSS 动画等，只需实现
window.__hf协议 - Remotion: 主要基于 React 生态系统
ts
/**
* The seek protocol. The only contract between the engine and a page.
*
* The engine reads `duration` to calculate total frames, calls `seek(time)`
* before each frame capture, and uses `media` (if provided) to handle
* video frame injection and audio mixing.
*
* The engine does NOT care what animation framework drives the page.
* GSAP, Framer Motion, CSS animations, Three.js --- anything works as long
* as `seek()` produces deterministic visual output for a given time.
*/
export interface HfProtocol {
/** Total duration of the composition in seconds */
duration: number;
/** Seek to a specific time. Must produce deterministic visual output. */
seek(time: number): void;
/** Optional: media elements the engine should handle */
media?: HfMediaElement[];
}2. 并行渲染
HyperFrames 内置并行渲染支持，通过 parallelCoordinator 分配帧范围到多个工作进程 ，而 Remotion 的并行能力相对有限。
3. 流式编码
HyperFrames 支持 streamingEncoder 直接将帧缓冲区管道传输到 FFmpeg，避免磁盘 I/O 。
4. 音频处理
HyperFrames 在编码阶段混合音频轨道，支持精确的音频同步 。
适用场景
选择 HyperFrames 当你需要：
- HTML 而非 react
是的就这么简单，HTML 的轻量级是 react 不能匹敌的！
选择 Remotion 当你需要：
- React 生态系统的深度集成
- 快速原型开发
- 简单的动画需求
项目地址 github.com/heygen-com/...
俯仰可拾的每一个观点，都来自一行源码、一段官方文档。本文转载自
俯仰可拾做了一定修改和增加。