首次上榜新项目 HyperFrames（22k Star）：HTML → MP4 一句话生成视频

JavaScript与编程艺术
44 阅读8分钟

佛曰：项目达十千，便可静心深究。

常听人说，项目做到一万，就该好好研究。可大多人只瞧个热闹，不肯往深处去。

今天介绍一个类似 remotion 的前端生成视频的开源库，HyperFrames 目前已经 22.8k+ star。 我已经用 remotion 做过十几个视频，看看这个后起之秀有什么不一样。后续准备做一个 HyperFrames 体验视频，本文纯介绍。

image.png

编写 HTML → 渲染视频 | 为智能体而生

一句话总结：HyperFrames 将 HTML 代码转换为视频，所有内容都由 AI 生成，我只要你一句话！

Hyperframes 是一个开源视频渲染框架，允许你创建、预览和渲染基于 HTML 的视频合成 —— 并对 AI 智能体提供一流的支持。

该系统建立在确定性渲染原则之上，确保无论在任何硬件上渲染，相同的 HTML 输入都能产生完全相同的 MP4 输出。

它专门针对AI 智能体工作流进行了优化，提供了一个「技能」系统，能够教会大语言模型（如 Claude 或 GPT）如何正确地编写合成作品。

快速开始

开始一个项目之前，先看看 showcase 就知道这个项目真实能做到什么样，上限如何。

Showcase | Playground

image.png

注意是有声的，这个和 remotion 不一样，默认没有字幕配音。

image.png

showcase 里面的每一个打开后都是一个在线 Studio，意味着你可以随意修改，然后导出。

如果大家感兴趣了，继续往下看。

选项 1：使用 AI 编码智能体（推荐）

安装 HyperFrames 技能，然后描述你想要的视频：

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：手动启动项目（这个不推荐）

npx hyperframes init my-video
cd my-video
npx hyperframes preview      # 在浏览器中预览（实时重载）
npx hyperframes render       # 渲染为 MP4

hyperframes init 会自动安装技能，因此你可以随时将工作交给 AI 智能体。

要求： Node.js >= 22, FFmpeg

为什么选择 Hyperframes？

  • 原生 HTML —— 合成就是带有数据属性的 HTML 文件。无需 React，没有专有 DSL。
  • AI 优先 —— 智能体已经会使用 HTML。CLI 默认非交互式，专为智能体驱动的工作流设计。
  • 确定性渲染 —— 相同输入 = 相同输出。为自动化管道而生。
  • 帧适配器模式 —— 可使用你自己的动画运行时（GSAP、Lottie、CSS、Three.js）。

内置组件

50 多个即用型积木和组件 —— 社交媒体覆盖层、着色器过渡、数据可视化和电影级特效：

npx hyperframes add flash-through-white   # 着色器过渡
npx hyperframes add instagram-follow      # 社交媒体覆盖层
npx hyperframes add data-chart            # 动态图表

浏览完整，请访问 hyperframes.heygen.com/catalog。

技能

HyperFrames 附带 技能，这些技能可以教会 AI 智能体通用文档未涵盖的框架特定模式。

npx skills add heygen-com/hyperframes
技能教学内容
hyperframesHTML 合成编写、字幕、TTS、音频反应动画、过渡
hyperframes-cliCLI 命令：init, lint, preview, render, transcribe, tts, doctor
hyperframes-registry通过 hyperframes add 安装积木和组件
gsapGSAP 动画 API、时间线、缓动、ScrollTrigger、插件、React/Vue/Svelte、性能

Hyperframes 技术栈亮点分析

代码质量工具

技术用途特点
oxlintLinterRust 编写，极快（替代 ESLint）
oxfmtFormatterRust 编写，极快（替代 Prettier）
lefthookGit Hooks 管理替代 husky，更快的并行执行
knip未使用代码检测清理冗余导出/依赖

亮点：全栈采用 Rust 工具链（oxc 生态），而非传统 JS 工具，追求极致性能。

技术栈总结图

┌─────────────────────────────────────────────────────────┐
│                    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）    │
└─────────────────────────────────────────────────────────┘

特色亮点

  1. Bun 优先：统一使用 Bun 而非 npm/yarn/pnpm，脚本执行也更轻量
  2. Rust 工具链：oxlint/oxfmt 提供亚毫秒级响应，适合频繁的 lint/fix 迭代
  3. AI 技能校验：lint:skills 专门检查 AI 智能体技能文件的正确性，体现「AI-first」设计

工作原理

HyperFrames 生成视频的核心原理是逐帧定位捕获（seek-and-capture），而非实时录制

具体工作原理

  1. 帧时钟计算：使用整数数学计算每帧时间 time = floor(frame) / fps，与真实时间解耦
  2. 精确定位：通过 renderSeek(time) 将所有动画、DOM 状态精确定位到指定时间点
  3. 原子捕获：使用 Chrome 的 HeadlessExperimental.beginFrame API 原子性地捕获像素缓冲区
  4. 编码输出：FFmpeg 将捕获的帧编码为 MP4 视频，同时混入音频轨道

数据流

graph LR
    A[HTML Composition] --> B[Engine: seekFrame]
    B --> C[Chrome: beginFrame]
    C --> D[FFmpeg: encode]
    D --> E[MP4 Output]

这种架构确保了确定性输出：无论在何种硬件上渲染，相同的 HTML 组合都会产生完全相同的视频。

注意

  • HyperFrames 使用 chrome-headless-shell 而非普通 Chrome 以确保跨平台一致性
  • 支持并行渲染以提升性能，通过 parallelCoordinator 分配帧范围到多个工作进程
  • Docker 模式提供最大可重现性，使用固定的 Chrome 版本和字体集

和 remotion 区别

HyperFrames 与 Remotion 的核心区别在于渲染架构：HyperFrames 使用 Chrome BeginFrame API 的逐帧定位捕获实现确定性渲染，而 Remotion 主要基于 Puppeteer 的实时截图方式，其次前者是 HTML 后者是 React。

主要区别对比

特性HyperFramesRemotion
渲染方式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 生态系统
/**
 * 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/…

俯仰可拾 的每一个观点，都来自一行源码、一段官方文档。

本文转载自 俯仰可拾 做了一定修改和增加。

avatar
文章
阅读
粉丝