HyperFrames

项目简介

HyperFrames 是由 HeyGen 团队开源的 AI 视频生成框架，其核心理念反直觉却极具颠覆性：用普通的 HTML 文件来描述视频，通过浏览器渲染引擎将 HTML 组合输出为 MP4 视频。这一设计让 AI Agent 天然可以使用已有的 HTML/CSS/JS 技能来创作视频，无需学习任何新的专有领域语言或复杂的视频编辑工具。2026 年 9 月登顶 GitHub Trending 榜单，获得广泛关注。

核心功能

HTML 原生视频合成：视频由包含 data 属性的 HTML 文件定义，无需 React、无需专有 DSL。Composition 就是一个 index.html 文件，任何 AI 编码工具都能直接理解和编辑。

AI Agent 优先工作流：CLI 默认非交互式设计，天然适合 AI 驱动流水线。AI Agent 可以直接生成、修改和渲染视频，无需人工介入。

确定性渲染：相同输入 = 相同输出，结果可复现，适合自动化流水线。相比依赖 AI 生成式视频（如 Sora）的随机性，HyperFrames 提供 100% 可控的视频输出。

50+ 开箱即用组件：内置社交叠加层、Shader 转场、数据可视化、电影级特效等 50 多个可直接使用的组件，支持 npx hyperframes add 命令快速安装。

多渲染引擎支持：Frame Adapter 模式允许接入 GSAP、Lottie、CSS Animation、Three.js 等任意动画运行时，灵活组合。

技术实现

HyperFrames 的技术架构分为四个核心包：@hyperframes/core 提供类型定义、解析器和生成器；@hyperframes/engine 封装了 Puppeteer + FFmpeg，负责将 HTML 页面捕获为视频帧；@hyperframes/producer 整合捕获、编码和音频混音流程；@hyperframes/studio 提供基于浏览器的可视化编辑器界面。渲染流程为：HTML 文件 → Puppeteer 截图每一帧 → FFmpeg 编码为 MP4，支持任意分辨率和帧率输出。

渲染速度方面，720p 分辨率下可达到每秒 30 帧的实时渲染性能，配合 GSAP 等动画库可完成复杂的时间线编辑、颜色分级和音频同步。视频文件支持导出为 MP4、WebM、PNG 序列等多种格式，同时生成 1200×630 的社交分享卡片图片。

快速上手

第一步：安装 CLI。确保系统已安装 Node.js >= 22 和 FFmpeg，执行 npx hyperframes init my-video 初始化项目。

第二步：编写 HTML 合成文件。在 index.html 中使用 data 属性定义视频元素，如 <img id="overlay" class="clip" data-start="2" data-duration="3" data-track-index="1" src="logo.png" /> 表示从第 2 秒开始播放，持续 3 秒。

第三步：本地预览。执行 npx hyperframes preview，CLI 启动本地服务器，在浏览器中实时预览渲染效果，支持热重载。

第四步：渲染输出。执行 npx hyperframes render 触发完整渲染流程，输出 MP4 文件到项目目录。同时可执行 npx hyperframes add flash-through-white 等命令添加 Shader 转场或社交叠加层等组件。

适用人群

AI 应用开发者、内容创作者、营销团队，以及需要将 AI 生成内容自动化输出为视频的所有用户。特别适合需要程序化、批量生成视频（如数据报告视频、产品介绍视频、个性化营销内容）的场景。