heygen-com/hyperframes — 用 HTML 写视频

把 HTML、CSS 和动画渲染成视频。
本周新增 Star 5,945 ｜ 仓库 Star 总数 70,522 ｜ Forks 6,385

▲ 图 0：HyperFrames 官方 Logo（官方图）

▲ 图 1：HyperFrames 桌面应用（官方截图）

一、核心特性

渲染管线：渲染器在 headless Chrome 中 逐帧 seek，再用 FFmpeg 编码 —— 所以相同输入必然产出相同视频。

HyperFrames vs Remotion

二、环境要求

开发时额外需要： Bun（仓库脚本用 bun run）、Git LFS（仓库用 LFS 存约 240 MB 的黄金回归测试基线 .mp4）

# macOS
brew install git-lfs
# Ubuntu / Debian
sudo apt install git-lfs
# Windows
winget install GitHub.GitLFS

# 每台机器一次
git lfs install

只要源码、不需要 LFS 内容时：

GIT_LFS_SKIP_SMUDGE=1 git clone https://github.com/heygen-com/hyperframes.git

三、部署方式

方式 A：Claude Code —— 版本化插件（推荐）

claude plugin marketplace add heygen-com/hyperframes
claude plugin install hyperframes@hyperframes
claude plugin details hyperframes

清单应包含 hyperframes、hyperframes-cli 与 media-use。

启用自动更新： 运行 /plugin → 打开 Marketplaces → 选择 hyperframes → 选择 Enable auto-update（第三方 marketplace 默认关闭）。

claude plugin update hyperframes@hyperframes      # 手动更新
claude plugin uninstall hyperframes@hyperframes   # 卸载

方式 B：独立 Skills（适用于 OpenCode 等）

npx skills add heygen-com/hyperframes

⚠️ 注意： 选择器打开时 没有预选任何项 —— Core Skills 组就是全部所需；/slideshow、/remotion-to-hyperframes、/figma 是按需安装的。

智能体与非交互运行应改用 npx hyperframes skills update —— 它精确安装核心集，而 skills add --all 会安装全部 7 个已发布 skill。仓库内部的 6 个 skill（位于 .claude/skills / .agents/skills）默认被排除。

skills add 解析的是 skills.sh 注册表的 blob，可能 滞后 main 数小时。需要最新副本时用 npx hyperframes skills update。

其它用法：

npx skills add heygen-com/hyperframes --all            # 安装完整已发布集（跳过选择器）
npx skills add heygen-com/hyperframes --skill    # 只装某一个（裸名，无前导 /）

独立安装后的维护： npx hyperframes init 会保持核心集最新（加上已安装的其它项），永不扩张成部分安装；/figma、/slideshow、/remotion-to-hyperframes 用 npx hyperframes skills update 按需安装。

方式 C：直接用 CLI

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

方式 D：GitHub Copilot CLI

copilot plugin marketplace add heygen-com/hyperframes
copilot plugin install hyperframes@hyperframes
copilot plugin list

copilot plugin update hyperframes
copilot plugin uninstall hyperframes

方式 E：VS Code

打开 Extensions 视图，搜索 @agentPlugins，用插件市场命令添加 heygen-com/hyperframes 作为 marketplace，然后安装 hyperframes，在 Agent Customizations 中验证 skill。需在 VS Code 设置中启用 Agent plugins。

VS Code 在 extensions.autoUpdate 启用时 每 24 小时 检查更新。手动检查：Extensions: Check for Extension Updates。

方式 F：Cursor

团队市场： 在 Dashboard → Plugins & MCPs 中导入 heygen-com/hyperframes 并添加 HyperFrames 插件，团队成员从 Customize 安装。GitHub 市场自动刷新需要 Cursor GitHub App 与市场的 Enable Auto Refresh 设置。

本地安装： 把解压后的 HyperFrames 插件文件夹复制到 ~/.cursor/plugins/local/hyperframes，重载 Cursor 后在 Customize 检查。该文件夹必须包含 plugin.json 与 skills/。本地副本需 手动替换 更新，不订阅 GitHub 变更。删除该文件夹即卸载。

方式 G：Gemini CLI

gemini extensions install https://github.com/heygen-com/hyperframes --auto-update
gemini extensions list

gemini extensions update hyperframes
gemini extensions uninstall hyperframes

要固定在特定版本，安装时用 --ref 代替 --auto-update。选择包含 gemini-extension.json 的 release。

方式 H：Codex 上传包

bun run package:codex-plugin

写出 dist/hyperframes-plugin.zip（含 hyperframes/ 根目录）。超过 Codex 100 MB 上传限制会失败。

方式 I：本地源码开发

git clone https://github.com/heygen-com/hyperframes.git
cd hyperframes
bun install

# 构建可移植插件 ZIP、源元数据与 SHA-256 校验和
bun run package:agent-plugin

四、使用方法

4.1 组合的定义方式

用 HTML 定义视频，用 data-* 属性标注时间与轨道：

Launch day

关键属性：

动画必须可寻址（seekable）： 渲染器不是实时播放后再录屏，而是 逐帧跳转到确定的时间点。因此动画必须支持 timeline.seek(time) 语义 —— GSAP 的 paused: true timeline 天然支持；CSS 动画需要配合 WAAPI 或自定义适配器。

4.2 核心 Skills（7 个）

按需安装：

核心集安装命令：

npx hyperframes skills update          # 精确安装核心集
npx hyperframes skills update    # 按需装单个
npx hyperframes skills                 # 列出全部已发布

4.3 在智能体里提问

Using /hyperframes, create a 10-second product intro with a fade-in title,
a background video, and subtle background music.

Skills 教给智能体的是 HyperFrames 的 生产循环：规划视频 → 写合法 HTML → 接可寻址动画 → 加媒体 → lint → 预览 → 渲染。

4.4 CLI 命令

# 脚手架
npx hyperframes init my-video
cd my-video

# 预览（浏览器 + 实时重载）
npx hyperframes preview

# 渲染为 MP4
npx hyperframes render

# 安装现成组件
npx hyperframes add flash-through-white   # 着色器转场
npx hyperframes add instagram-follow      # 社交媒体叠加层
npx hyperframes add data-chart            # 动画图表

# 浏览目录
npx hyperframes catalog

4.5 本地渲染 vs Docker vs AWS Lambda

4.6 frame.md —— 给视频用的设计系统

每个品牌都有 design.md，但没有一份是为 镜头 写的。frame.md 就是那层缺失的翻译层：把 web 语境的设计规范 反转为镜头语境 —— 同样的 token、同样的规则，但重写成 AI 智能体无需猜测比例、无需凑合 web 界面就能编排宣传片的形式。

产出是 DESIGN.md 的超集，你整个工具链都能读。原子保持神圣，构图保持自由，数字来自脚本。

▲ 图 2：frame.md 设计模板（官方截图）

浏览与混搭全部模板：https://www.hyperframes.dev/design

4.7 组件目录（Catalog）

约 450 个 现成 block 与组件，安装后即为 可编辑源码（不是黑盒）。覆盖转场、叠加层、标题、动态排版、字幕、图表、地图、3D、运镜。

npx hyperframes add 

浏览：https://hyperframes.heygen.com/catalog

五、技术栈组件

六、可以做什么

• 产品发布视频与功能预告
• PR 走查视频（带动画代码 diff、旁白、字幕）
• 数据可视化、图表竞速、地图动画
• 社交媒体视频（动态字幕、叠加层、音乐）
• 文档转视频、PDF 转视频、网站导览解说
• 用于自动化内容管线的可复用动效

灵感来源：https://hyperframes.heygen.com/showcase

参考链接

• 仓库：https://github.com/heygen-com/hyperframes
• 文档：https://hyperframes.heygen.com/introduction
• 快速开始：https://hyperframes.heygen.com/quickstart
• 插件指南：https://github.com/heygen-com/hyperframes/blob/main/docs/guides/plugins.mdx
• AWS Lambda 部署：https://hyperframes.heygen.com/deploy/aws-lambda
• vs Remotion 对比：https://hyperframes.heygen.com/guides/hyperframes-vs-remotion
• Discord：https://discord.gg/EbK98HBPdk