heygen-com/hyperframes

编写 HTML。渲染视频。专为 Agent 打造。

Hyperframes 是一个开源的视频渲染框架，允许你创建、预览和渲染基于 HTML 的视频合成——为 AI agent 提供了一流的支持。 ## 快速入门 ### 选项 1：使用 AI 编程 agent（推荐） 安装 HyperFrames 技能，然后描述你想要的视频： ``` npx skills add heygen-com/hyperframes ``` 这会教会你的 agent（Claude Code、Cursor、Gemini CLI、Codex）如何编写正确的合成、GSAP 时间轴、Tailwind v4 浏览器运行时样式，以及第一方适配器动画。在 Claude Code 中，这些技能会注册为斜杠命令——调用 `/hyperframes` 来编写合成，`/hyperframes-cli` 用于开发循环命令（init、lint、preview、render），`/hyperframes-media` 用于资产预处理（TTS、转录、背景移除），`/tailwind` 用于 `init --tailwind` 项目，`/gsap` 用于时间轴动画帮助，或者在合成使用这些运行时的时候调用适配器技能（`/animejs`、`/css-animations`、`/lottie`、`/three`、`/waapi`）。 对于 Claude Design，请在 GitHub 上打开 [`docs/guides/claude-design-hyperframes.md`](https://github.com/heygen-com/hyperframes/blob/main/docs/guides/claude-design-hyperframes.md) 并点击下载按钮（↓）保存，然后将该文件附加到你的 Claude Design 聊天中。它会生成一个有效的初稿；你可以在任何 AI 编程 agent 中进行完善。参见 [Claude Design 指南](https://hyperframes.heygen.com/guides/claude-design)。 特别是对于 Codex，相同的技能也作为 [OpenAI Codex 插件](./.codex-plugin/plugin.json) 提供——只需极少安装插件表面： ``` codex plugin marketplace add heygen-com/hyperframes --sparse .codex-plugin --sparse skills --sparse assets ``` 对于 Claude Code，该仓库还附带了一份 [Claude Code 插件清单](./.claude-plugin/plugin.json)：使用 `claude --plugin-dir .` 在本地进行测试。该清单有意省略了 `skills`，因为 Claude Code 会按约定自动发现根目录 `skills/`，而对于市场提交，请使用标题 `HyperFrames by HeyGen`，以及位于 [`assets/claude-code-icon-dark.svg`](./assets/claude-code-icon-dark.svg) 和 [`assets/claude-code-icon-light.svg`](./assets/claude-code-icon-light.svg) 的黑白图标资产来对应两个主题插槽。 对于 Cursor，相同的技能被打包为 [Cursor 插件](./.cursor-plugin/plugin.json)——可从 Cursor Marketplace 安装，或者通过克隆此仓库并在 **Settings → Plugins → Load unpacked** 中指向仓库根目录进行侧载。 #### 试一试：示例提示词 将以下任意一个复制到你的 agent 中即可开始。`/hyperframes` 前缀会显式加载技能上下文，因此你第一次就能获得正确的输出。 **冷启动 — 描述你想要什么：** **热启动 — 将现有上下文转换为视频：** **特定格式：** **迭代 — 像与视频编辑器交谈一样与 agent 对话：** agent 会处理脚手架、动画和渲染。有关更多模式，请参见[提示指南](https://hyperframes.heygen.com/guides/prompting)。 ### 选项 2：手动启动项目 ``` npx hyperframes init my-video cd my-video npx hyperframes preview # preview in browser (live reload) npx hyperframes render # render to MP4 ``` `hyperframes init` 会自动安装技能，因此你可以随时将其交接给你的 AI agent。 **要求：** Node.js >= 22，FFmpeg ## 为什么选择 Hyperframes？ - **原生 HTML** — 合成是带有数据属性的 HTML 文件。没有 React，没有专有 DSL。 - **AI 优先** — agent 已经会说 HTML。CLI 默认为非交互式，专为 agent 驱动的工作流而设计。 - **确定性渲染** — 相同的输入 = 相同的输出。专为自动化流水线构建。 - **帧适配器模式** — 引入你自己的动画运行时（GSAP、Lottie、CSS、Three.js）。 ## Hyperframes 与 Remotion 的对比 Hyperframes 的灵感来自 [Remotion](https://www.remotion.dev) —— 我们在 HeyGen 的生产环境中使用了 Remotion，从中学到了很多东西，并在源代码中保留了对其首创模式（Chrome 启动标志、image2pipe → FFmpeg 流式传输、帧缓冲）的归属注释。这两个工具都驱动无头 Chrome，并且都是确定性的。它们在一个决定上有所不同：**主要编写者编写什么。** Remotion 的赌注是 React 组件；Hyperframes 的赌注是 HTML。 | | **Hyperframes** | **Remotion** | | ----------------------------------------------------- | ------------------------------ | --------------------------------- | | 创作 | HTML + CSS + GSAP | React 组件 (TSX) | | 构建步骤 | 无；`index.html` 直接播放 | 必需 (打包器) | | 库时钟动画 (GSAP, Anime.js, Motion One) | 可寻址，逐帧精确 | 在渲染期间按实时时钟播放 | | 任意 HTML / CSS 直通 | 粘贴并直接动画 | 重写为 JSX | | 分布式渲染 | 目前仅限单机 | Lambda，生产就绪 | ### 许可：完全开源 vs 源码可见 **Hyperframes 在 [Apache 2.0](LICENSE) 下完全开源** —— 这是一个经 OSI 批准的许可证。在任何规模下均可商用，没有按渲染次数收费，没有席位上限，也没有公司规模门槛。 **Remotion 是[源码可见，而非开源](https://www.remotion.pro/license)。** 其代码在 GitHub 上遵循自定义的 Remotion 许可证，该许可证要求在小团队门槛之上的公司需要购买付费许可证。这是一个很棒的产品，背后有一个真正的团队——但如果开源许可对你来说很重要（OSI 合规性、再分发权、无按使用收费），这就是一个首要的决策点。 包含基准测试的完整文章、每个工具在哪些方面胜出的诚实清单，以及 GSAP 的并排比较：**[Hyperframes 与 Remotion 指南](https://hyperframes.heygen.com/guides/hyperframes-vs-remotion)**。 ## 工作原理 将你的视频定义为带有数据属性的 HTML： ``` ``` 在浏览器中即时预览。在本地或在 Docker 中渲染为 MP4。 ## 目录 50 多个即用型区块和组件——社交叠加层、着色器过渡、数据可视化以及电影级效果： ``` npx hyperframes add flash-through-white # shader transition npx hyperframes add instagram-follow # social overlay npx hyperframes add data-chart # animated chart ``` 在 **[hyperframes.heygen.com/catalog](https://hyperframes.heygen.com/catalog/blocks/data-chart)** 浏览完整目录。 ## 文档 完整文档请访问 **[hyperframes.heygen.com/introduction](https://hyperframes.heygen.com/introduction)** — [快速入门](https://hyperframes.heygen.com/quickstart) | [指南](https://hyperframes.heygen.com/guides/gsap-animation) | [API 参考](https://hyperframes.heygen.com/packages/core) | [目录](https://hyperframes.heygen.com/catalog/blocks/data-chart) ## 软件包 | Package | 描述 | | ---------------------------------------------------------------- | ----------------------------------------------------------- | | [`hyperframes`](packages/cli) | CLI — 创建、预览、lint 和渲染合成 | | [`@hyperframes/core`](packages/core) | 类型、解析器、生成器、linter、运行时、帧适配器 | | [`@hyperframes/engine`](packages/engine) | 可寻址的页面到视频捕获引擎 (Puppeteer + FFmpeg) | | [`@hyperframes/producer`](packages/producer) | 完整渲染流水线 (捕获 + 编码 + 音频混合) | | [`@hyperframes/studio`](packages/studio) | 基于浏览器的合成编辑器 UI | | [`@hyperframes/player`](packages/player) | 可嵌入的 `` Web 组件 | | [`@hyperframes/shader-transitions`](packages/shader-transitions) | 用于合成的 WebGL 着色器过渡 | ## 技能 HyperFrames 附带了[技能](https://github.com/vercel-labs/skills)，这些技能教会 AI agent 通用文档未涵盖的特定框架模式。 ``` npx skills add heygen-com/hyperframes ``` | Skill | 它所教授的内容 | | ------------------------- | ------------------------------------------------------------------------------------------------------------------- | | `hyperframes` | HTML 合成编写、字幕、TTS、音频响应式动画、过渡 | | `hyperframes-cli` | 开发循环 CLI：init、lint、inspect、preview、render、doctor | | `hyperframes-media` | 资产预处理：tts (Kokoro)、transcribe (Whisper)、remove-background (u2net) — 语音/模型/编解码器选择 | | `hyperframes-registry` | 通过 `hyperframes add` 安装区块和组件 | | `website-to-hyperframes` | 捕获 URL 并将其转换为视频 — 完整的网站到视频流水线 | | `remotion-to-hyperframes` | 将 Remotion (React) 合成翻译为 HyperFrames HTML 合成 | | `gsap` | 用于 HyperFrames 的 GSAP 时间轴：暂停注册、确定性寻址、缓动、排序、性能 | | `animejs` | 在 `window.__hfAnime` 上注册的 Anime.js 动画和时间轴，用于确定性 HyperFrames 寻址 | | `css-animations` | HyperFrames 可以发现、暂停和寻址的 CSS 关键帧动画模式 | | `lottie` | 在 `window.__hfLottie` 上注册的带有本地资产和暂停播放的 `lottie-web` 和 dotLottie 播放器 | | `three` | 从 HyperFrames `hf-seek` 事件和 `window.__hfThreeTime`（而非实时时间）渲染的 Three.js 场景 | | `waapi` | 通过 `document.getAnimations()` 寻址的 Web Animations API `element.animate()` 模式 | ### 克隆仓库 该仓库在 `packages/producer/tests/**/output.mp4`（约 240 MB 的 `.mp4` 文件）下的黄金回归测试基线中使用了 [Git LFS](https://git-lfs.com)。如果你是为了开发而克隆完整仓库，请先安装 Git LFS： ``` # macOS brew install git-lfs # Ubuntu/Debian sudo apt install git-lfs # Windows winget install GitHub.GitLFS # （或安装 Git for Windows，其中捆绑 Git LFS 作为可选组件） # 然后（每台机器执行一次） git lfs install ``` 如果你在 `git clone` 或 `npx skills add heygen-com/hyperframes` 期间遇到 `git-lfs filter-process: command not found`，请安装 Git LFS 后重试。如果你只需要源文件，也可以跳过 LFS 内容： ``` GIT_LFS_SKIP_SMUDGE=1 git clone https://github.com/heygen-com/hyperframes.git ``` ## 许可证 [Apache 2.0](LICENSE)

标签：AIGC, AI代理, GNU通用公共许可证, GSAP, HTML5视频, MITM代理, Node.js, Tailwind CSS, 多模态, 多模态安全, 威胁情报, 开发者工具, 开源框架, 持续集成, 数字内容生成, 自动化攻击, 自动化视频生成, 视频合成, 视频渲染