跳到主要内容HyperFrames · prolist返回项目库
查看仓库原始简介
Write HTML. Render video. Built for agents.
项目解读由 AI 根据历史资料整理，尚未经人工复核。仓库资料更新于 2026-09-08，与历史解读分开保留。
项目概览
HyperFrames 是由 HeyGen 开源的一个 HTML-to-Video 渲染框架，核心理念是“Write HTML. Render video. Built for agents.”。它允许用户用纯 HTML 文件定义视频内容，通过 data-* 属性控制时间轴、轨道和布局，然后通过 CLI 一键渲染成 MP4。该框架采用声明式数据模型、可插拔动画运行时和确定性逐帧渲染引擎，旨在解决 AI Agent 无法操作传统视频编辑工具的问题。它支持非交互式 CLI、Vercel Skills 规范，并提供 50+ 预制 Block。HyperFrames 使用 TypeScript 开发，开源协议为 Apache 2.0，最新版本为 v0.4.3。
解决什么问题
传统视频生产依赖 GUI 编辑器（如 Premiere、After Effects），这些工具对 AI Agent 来说是“黑箱”，无法通过 API 操作时间线、拖拽图层、调整关键帧。AI Agent 只能通过 CLI 和文件系统与外部世界交互，无法“点击按钮”或“拖动关键帧”，导致视频这一主流内容形态无法被 Agent 参与生产。现有代码视频方案存在五大痛点：专有 DSL 学习成本高（如 Remotion 要求 React 知识）、渲染不确定性（如 Canvas 录屏帧率不稳定）、动画运行时锁定（绑定特定动画库）、Agent 不可驱动（CLI 交互式）、无法批量或 CI 化。HyperFrames 将视频从 GUI 拉回到代码层，让 AI Agent 能像生成网页一样生成视频。
工作方式
HyperFrames 采用两层架构：HTML 层用 data 属性声明式定义时间轴（如 data-start、data-duration、data-track-index），Script 层用 GSAP 等运行时定义动画效果。核心抽象是 Frame Adapter，它回答“第 N 帧画面应该长什么样”，要求 seekFrame 支持任意顺序 seek 且幂等，Adapter 不能有自己的时钟。渲染管线是逐帧 seek + Chrome 捕获 + FFmpeg 编码，完全脱离实时播放。确定性保证的规则包括：无墙钟依赖、无未种子随机、无渲染时网络请求、固定输出参数、有限时长。CLI 默认非交互式，所有输出为纯文本，fail-fast。通过 Vercel Skills 规范（hyperframes、hyperframes-cli、hyperframes-registry、gsap）教 Agent 框架模式。
核心能力
- 纯 HTML 定义视频，零框架依赖
- 确定性渲染，同输入必定同输出
- 动画运行时可插拔（GSAP/Lottie/CSS/Three.js）
- CLI 非交互式，Agent 可完全驱动
-
- 预制 Block（社交叠加层、Shader 转场、数据可视化、电影级特效）
- Docker 模式保证跨平台渲染一致
- 支持批量渲染和 CI/CD 集成
- 提供预览、lint、transcribe、tts 等命令
使用前需要了解
- AI 整理 · 本地测试，未经人工复核；依据历史报告节选，不代表当前产品状态。
- HyperFrames 是离线渲染框架，不适合实时视频（如直播/RTC）。不能做交互式视频（无分支叙事、点击热区）。不适合超长视频，因为逐帧捕获成本随长度线性增长。中文排版支持有限，依赖系统字体。当前仅支持 GSAP Adapter，CSS/Lottie/Three.js 等仍在规划中。生态早期（v0.4.x），API 可能变化。渲染速度比实时编码慢。复杂动画需要 GSAP 知识。无 GUI 编辑器（Studio 仍在开发中）。
AI 中文译文，非官方翻译；安装命令与技术细节请对照原文。
npm version（请在原文查看）
npm downloads（请在原文查看）
License（请在原文查看）
Node.js（请在原文查看）
Discord（请在原文查看）
编写 HTML。渲染视频。为智能体而生。
快速开始 |
案例展示 |
在线体验 |
目录 |
文档 |
Discord
HyperFrames 是一个开源框架，用于将 HTML、CSS、媒体和可搜索动画转换为确定性的 MP4 视频。你可以通过 CLI 在本地使用它，也可以借助技能（skills）从 AI 编码智能体中使用，或者将其作为托管创作工作流背后的渲染核心。
快速开始
使用 AI 编码智能体
安装 HyperFrames 技能，然后描述你想要的视频：
npx skills add heygen-com/hyperframes
选择器打开时没有任何预选项目——核心技能组就是你所需要的全部：/hyperframes 路由器会按需安装每个创作工作流。智能体和非交互式运行应改用 npx hyperframes skills update——它只安装精确的核心集，而 skills add --all 会安装仓库中的每一个 SKILL.md——即 20 个已发布的技能，外加 .claude/skills / 下的六个仓库内部技能。如需完整的已发布集合，请使用 。
.agents/skills
npx hyperframes skills
skills add 解析 skills.sh 注册表 blob，该注册表可能比 main 滞后数小时。npx hyperframes skills update 从当前的 main 安装，因此当你需要最新版本的技能时，请使用它。
使用 /hyperframes，创建一个 10 秒的产品介绍视频，包含淡入标题、背景视频和微妙的背景音乐。
这些技能教会智能体 HyperFrames 的生产循环：规划视频、编写有效的 HTML、连接可搜索动画、添加媒体、检查、预览和渲染。它们适用于 Claude Code、Cursor、Gemini CLI、Codex 以及其他支持技能（skills）的编码智能体。
技能
HyperFrames 附带 20 个技能，智能体可按需加载。请先阅读 /hyperframes——它是路由器和能力地图；它会为任何“帮我做一个……”的请求（视频、演示文稿或作品集移植）选择工作流，并指向下面的领域技能。
默认使用核心集——路由器会按需安装每个创作工作流。npx hyperframes skills update 可从任何位置精确安装该集合；交互式选择器（npx skills add heygen-com/hyperframes）将其列为“核心技能”组，且没有任何预选项目。该选择器仅限交互式——没有 --skill 的非交互式或智能体运行将安装全部 20 个技能。使用 npx skills add heygen-com/hyperframes --all 可有意安装全部 20 个（跳过选择器），或使用 npx skills add heygen-com/hyperframes --skill <name> 仅安装一个（使用裸名称，不带前导 /）。
此后安装保持精简：npx hyperframes init 保持核心集最新（路由器、hyperframes-* 领域技能和 media-use——外加任何已安装的内容；/figma 保持按需安装），并且永远不会扩展部分安装；创作工作流按需安装——路由器在进入工作流之前会运行 npx hyperframes skills update <workflow>。不会在后台重新拉取完整集合。
上传到 Codex
从已提交的 HEAD 版本的清单、品牌资产和技能构建可上传的 Codex 插件归档：
bun run package:codex-plugin
这将写入 dist/hyperframes-plugin.zip，其中包含 hyperframes/ 根文件夹，如果归档超过 Codex 的 100 MB 上传限制，则会失败。
路由器
创作工作流
领域技能（按需加载）
创作工作流所组合的原子能力——在需要特定层时调用。
手动使用 CLI
npx hyperframes init my-video
cd my-video
npx hyperframes preview # preview in browser with live reload
npx hyperframes render # render to MP4
你可以构建什么
需要灵感？浏览 展示 查看你可以观看、阅读、运行和混音的成品视频。
- 产品发布视频和功能公告
- 带动画代码差异、配音和字幕的 PR 演示
- 数据可视化、图表竞赛和地图动画
- 带动态字幕、叠加层和音乐的社交媒体视频
- 文档转视频、PDF 转视频和站点导览解说
- 用于自动化内容管道的可复用动态图形
Frame.md
每个品牌都有 design.md。但没有一个是为镜头而写的。frame.md 是缺失的翻译层：它获取你的网页上下文设计规范，并针对帧进行反转 — 相同的令牌、相同的规则，但重写后 AI 代理可以无需猜测比例或依赖网页界面即可合成宣传视频。
输出是你的整个工具链都能读取的 DESIGN.md 超集。原子保持神圣。合成保持自由。数字来自脚本。
工作原理
将视频定义为 HTML。添加数据属性以控制时间和轨道。使用 GSAP、CSS、Lottie、Three.js、Anime.js、WAAPI 或您自己的帧适配器来实现可定位的动画。
<div id="stage" data-composition-id="launch" data-start="0" data-width="1920" data-height="1080">
<video
class="clip"
data-start="0"
data-duration="6"
data-track-index="0"
src="intro.mp4"
muted
playsinline
></video>
<h1 id="title" class="clip" data-start="1" data-duration="4" data-track-index="1">Launch day</h1>
<audio
data-start="0"
data-duration="6"
data-track-index="2"
data-volume="0.5"
src="music.wav"
></audio>
<script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js"></script>
<script>
const tl = gsap.timeline({ paused: true });
tl.from("#title", { opacity: 0, y: 40, duration: 0.8 }, 1);
window.__timelines = window.__timelines || {};
window.__timelines.launch = tl;
</script>
</div>
在浏览器中即时预览。在本地或 Docker 中渲染。渲染器在无头 Chrome 中定位每一帧，并使用 FFmpeg 编码结果，因此相同的输入会产生相同的视频。
HyperFrames 技术栈
HyperFrames 是开源渲染引擎，加上一套不断扩展的、围绕 HTML 原生视频创作的工具。
目录
npx hyperframes add flash-through-white # shader transition
npx hyperframes add instagram-follow # social overlay
npx hyperframes add data-chart # animated chart
为什么选择 HyperFrames？
- HTML 原生： 合成是带有数据属性的 HTML 文件。无需 React，没有专有时间线格式。
- 对代理友好： 代理已经会写 HTML，而且 CLI 默认非交互。
- 确定性： 相同输入、相同帧、相同输出。专为 CI、回归测试和自动渲染而构建。
- 无需构建步骤：
index.html 合成可直接播放，并可在浏览器中直接预览。
- 基于适配器的动画： 可引入 GSAP、CSS 动画、Lottie、Three.js、Anime.js、WAAPI 或自定义运行时。
- 开源： Apache 2.0 许可证，无按渲染收费或商业使用门槛。
HyperFrames 与 Remotion 对比
HyperFrames 的灵感来自 Remotion。两者都使用无头 Chrome 和 FFmpeg 渲染视频。主要区别在于创作模型：Remotion 押注 React 组件；HyperFrames 押注人类和代理都能轻松编写的纯 HTML。
文档
包
社区
开发说明
该仓库使用 Git LFS 存储 packages/producer/tests/**/output.mp4 下的黄金回归测试基线（约 240 MB 的 .mp4 文件）。如果您要克隆完整仓库进行开发，请先安装 Git LFS：
# macOS
brew install git-lfs
# Ubuntu / Debian
sudo apt install git-lfs
# Windows
winget install GitHub.GitLFS
# Then, once per machine
git lfs install
GIT_LFS_SKIP_SMUDGE=1 git clone https://github.com/heygen-com/hyperframes.git
许可证
09.08
