Hyperframes 是一个开源视频渲染框架，让你通过 HTML 数据属性创建视频合成。支持 AI 代理工作流、实时预览和确定性渲染。本文详细介绍项目定位、安装方式、使用方法和 50+ 预制块系统。
Hyperframes 是一个基于 HTML 的开源视频渲染框架，允许通过 HTML 数据属性定义视频合成，支持实时预览和确定性渲染，专为 AI 代理工作流设计。
Hyperframes 是一个基于 HTML 的开源视频渲染框架，定位为"Write HTML. Render video."的解决方案。其核心用途是让用户能够通过编写 HTML 文件并添加特定的 data 属性来定义视频合成，包括元素的时间轴、持续时间、轨道位置等参数，然后将其渲染为 MP4 视频文件。框架采用 HTML-native 设计，无需学习专有 DSL，直接利用 Web 标准技术构建视频内容。同时，它专为 AI 代理工作流优化，提供 CLI 工具和技能集成，使 AI 能够高效地生成和迭代视频内容。项目还提供 Studio 开发环境，支持实时预览和热重载，提升开发体验。
Hyperframes 主要解决传统视频制作中技术门槛高、自动化困难的问题。传统方法依赖专业视频编辑软件，难以集成到开发流程；而编程生成视频通常需要复杂的图形库或专有语言。Hyperframes 通过将视频合成定义为 HTML 结构，利用 Web 开发者已掌握的技能降低门槛。对于 AI 代理，HTML 是其自然输出格式，无需特殊适配即可生成视频描述。确定性渲染确保相同输入产生相同输出，解决自动化管道中的可重复性问题。Frame Adapter 模式允许集成多种动画运行时（GSAP、Lottie 等），避免被单一技术栈锁定。
该框架适用于多种视频制作场景：AI 代理自动化生成产品介绍、教程视频、数据可视化内容；手动创建 HTML 视频合成进行精细控制；利用预制块库快速构建专业效果，包括社交平台覆盖层（Instagram、TikTok）、着色器过渡、数据图表、UI 组件等；以及需要批量生产且结果可重复的自动化视频管道。其 HTML-based 特性也适合需要将网页内容转换为视频的场景，如网站演示、应用展示。对于熟悉 Web 技术的团队，可快速上手并融入现有开发流程。
Hyperframes 提供两种主要安装方式。推荐方式是通过 AI 代理安装：运行 `npx skills add heygen-com/hyperframes`，这将把 Hyperframes 技能添加到支持的 AI 代理（如 Claude Code、Cursor、Gemini CLI、Codex）中，使其能够生成正确的视频合成代码。手动方式则是直接初始化项目：`npx hyperframes init my-video` 创建项目结构，该命令会自动安装所需技能。环境要求为 Node.js >= 22 和 FFmpeg。开发 monorepo 需使用 Bun 工具链，运行 `bun run dev` 启动 Studio，`bun run build` 构建所有包。基本使用无需环境变量，可选 GEMINI_API_KEY 用于 AI 图像标注功能。
使用 Hyperframes 的核心是定义 HTML 合成文件。在 HTML 中，根容器需设置 `data-composition-id`、`data-width`、`data-height` 等属性，子元素（视频、图片、音频等）通过 `data-start`、`data-duration`、`data-track-index` 控制时间轴和轨道。预览时运行 `npx hyperframes preview`，在浏览器中实时查看并支持热重载；渲染时运行 `npx hyperframes render` 生成 MP4 文件。预制块可通过 `npx hyperframes add <block-name>` 安装，然后在宿主合成中通过 `data-composition-src` 引用。与 AI 代理协作时，使用 `/hyperframes`、`/hyperframes-cli`、`/gsap` 等命令获取帮助。
Hyperframes 采用 monorepo 架构，使用 Bun 工作区管理多个包：@hyperframes/cli 提供命令行接口，@hyperframes/core 负责合成解析和动画协调，@hyperframes/producer 管理渲染队列，@hyperframes/player 实现浏览器预览，@hyperframes/studio 提供开发 UI。框架支持 Frame Adapter 模式，可集成 GSAP、Lottie、CSS 动画、Three.js 等不同动画运行时。渲染基于 FFmpeg 实现确定性输出，确保可重复性。项目包含 50+ 预制块，涵盖过渡效果、数据可视化、社交覆盖等类别，每个块都是独立的 HTML composition，通过 MDX 文档描述。测试和格式化使用 oxlint、oxfmt、knip 等工具，commit 遵循 conventional 规范。
Hyperframes 是一个基于 HTML 的开源视频渲染框架，允许通过编写 HTML 文件并添加 data 属性来定义视频合成，然后渲染为 MP4 视频。它专为 AI 代理工作流设计，支持实时预览和确定性渲染，无需学习专有 DSL。
推荐通过 AI 代理安装：运行 `npx skills add heygen-com/hyperframes`。或手动初始化项目：`npx hyperframes init my-video`。需要 Node.js >= 22 和 FFmpeg。开发 monorepo 需使用 Bun 工具链。
在项目目录中运行 `npx hyperframes render` 命令，会将 HTML 合成渲染为 MP4 视频文件。预览可使用 `npx hyperframes preview` 在浏览器中实时查看并支持热重载。
Hyperframes 采用 Frame Adapter 模式，支持 GSAP、Lottie、CSS 动画、Three.js 等多种动画运行时，可在 HTML 合成中灵活使用，无需被单一技术栈锁定。
预制块是 50+ 现成的视频组件（如过渡、数据图表、社交覆盖），通过 `npx hyperframes add <block-name>` 安装，然后在 HTML 中通过 `data-composition-src` 引用即可使用，每个块都有独立的 MDX 文档说明。