HyperFrames 使用教程

📖 项目简介

HyperFrames 是由 HeyGen 团队开源的视频渲染框架。它让你用 HTML + CSS 编写视频合成，一行命令渲染成 MP4。无需 React、无需构建步骤，AI 编程工具（Cursor、Claude Code、Codex）可以直接生成视频。

💡

GitHub 地址： https://github.com/heygen-com/hyperframes

✨ 核心亮点

📝

HTML 原生

用 HTML + CSS 编写视频，无需 React 或专有 DSL

🤖

AI-First 设计

AI Agent 天然懂 HTML，直接生成视频合成

🎨

多动画引擎

支持 GSAP、Lottie、Three.js、CSS 动画

🆓

完全开源

Apache 2.0 协议，商用无任何收费门槛

⚙️ 环境要求

Node.js >= 22（推荐使用 LTS 版本）
FFmpeg（用于视频渲染，需加入系统 PATH）

⚠️

请确保 node --version 输出 >= 22，ffmpeg -version 可正常执行。

🚀 快速上手

创建项目

一行命令初始化项目，自动生成 HTML 模板和配置文件：

                        bash
                        npx hyperframes init my-video
                    

预览视频

进入项目目录，启动实时预览（支持热更新，浏览器中查看效果）：

                        bash
                        cd my-video
npx hyperframes preview
                    

渲染输出 MP4

确定性渲染，相同输入 = 完全一致的输出：

                        bash
                        npx hyperframes render
                    

🤖 AI Agent 集成

安装 HyperFrames 技能包，让 AI 编程工具直接生成视频：

                bash
                npx skills add heygen-com/hyperframes
            

支持的 AI 编程工具：

Cursor — IDE 内直接描述视频需求，自动生成合成文件
Claude Code — 注册为 slash 命令（/hyperframes），精准生成
OpenAI Codex — 通过 Codex 插件集成
Gemini CLI — 技能自动发现，描述即生成

✅

直接告诉 AI「用 /hyperframes 创建一个 10 秒产品介绍视频」即可开始！

📦 组件市场

50+ 开箱即用的视频组件 — 社交媒体覆盖层、着色器转场、数据可视化等：

                bash
                npx hyperframes add flash-through-white   # 着色器转场
npx hyperframes add instagram-follow      # 社交媒体覆盖
npx hyperframes add data-chart            # 动画图表
            

完整目录浏览：hyperframes.heygen.com/catalog

❓ 常见问题

Q: HyperFrames 和 Remotion 有什么区别？

Remotion 使用 React 组件编写视频，需要构建步骤，且有商业许可限制；HyperFrames 使用纯 HTML，无需构建，且 Apache 2.0 完全开源，无任何收费门槛。

Q: 支持哪些动画效果？

通过 Frame Adapter 模式支持 GSAP、Lottie、Anime.js、CSS 动画、Three.js、Web Animations API 等多种动画引擎，均可实现帧精确的确定性渲染。

Q: 可以商业使用吗？

完全可以。HyperFrames 采用 Apache 2.0 协议，可在任何规模下商业使用，无按次收费、无席位限制、无公司规模门槛。