heygen-com/hyperframes

HyperFrames – 将 HTML + CSS 转换为确定性的 MP4 视频

是什么 – 一个开源的 Node.js 框架，允许您使用普通的网页标记（HTML、CSS、媒体文件以及任何可跳转的动画库）来描述视频。HyperFrames 随后将该描述渲染为完全可重复的 MP4，可通过 CLI 本地执行，或通过云/Lambda 后端执行。它附带一组 技能，AI 编码代理（Claude、Gemini、Cursor 等）可以加载，因此可以向 LLM 指示“创建一个 10 秒的产品介绍”，代理将自动生成所需的 HTML，拉取资源，进行 lint 检查，预览，最后调用 hyperframes render。

---

核心概念

概念	作用
基于 HTML 的组合	您编写一个普通的 HTML 文件，并添加特殊的 data-* 属性（如 data-start、data-duration、data-track-index 等），以定义视频时间线和轨道布局。
可跳转的动画适配器	HyperFrames 可以驱动 GSAP、Lottie、Three.js、Anime.js、CSS WAAPI 或自定义适配器，所有这些都强制为 可跳转，以便渲染器可以确定性地跳转到任意帧。
媒体 OS（/media-use）	一个统一的资源管理器，可从本地文件解析图像、音频、视频、TTS、音乐等，或在所需资源缺失时调用生成模型。
技能路由	/hyperframes 技能是一个微小的意图层，将自然语言请求映射到 10 多个创作工作流（产品发布视频、无脸解说、PR→视频等）之一。
CLI	`npx hyperframes init

---

主要功能（“创作工作流”）

• 产品发布视频 – 将网站或脚本转换为 30–90 秒的营销剪辑。
• 无脸解说 – 从纯文本生成视觉解说，由 LLM 创造图形。
• PR→视频 – 输入 GitHub PR URL，生成变更日志风格的演示。
• 嵌入字幕 / 说话头重制 – 为现有视频添加字幕或图形叠加。
• 动态图形 – 短暂、无旁白的动感作品（Logo 冲刺、图表击中等）。
• 音乐→视频 – 将节奏驱动的视频与音频轨道同步。
• 幻灯片 / 演示文稿 – 输出交互式、可导航的演示文稿，而非平面视频。
• 通用视频 – 用于任何更长或包含多场景的组合的通用工作流。
• Remotion→HyperFrames – 从基于 React 的 Remotion 组合单向迁移。

---

如何尝试（快速入门）

# 1. 为 AI 代理安装 HyperFrames 技能集
npx skills add heygen-com/hyperframes   # 交互式选择器（仅核心技能）
# 或非交互式运行
npx hyperframes skills update          # 直接安装核心集

# 2. 向代理提出提示，例如：
# "使用 /hyperframes，创建一个 10 秒的产品介绍，包含淡入标题、背景视频和细微的背景音乐。"

# 3. 代理将生成 HTML 组合，为您运行 `hyperframes preview` 检查，然后：
cd my-video
npx hyperframes render   # 生成确定性的 video.mp4

如果您更喜欢手动操作，相同的 CLI 无需任何 AI 也可使用：

npx hyperframes init my-video
cd my-video
npx hyperframes preview   # 浏览器中实时重载
npx hyperframes render    # 生成 MP4（需要 FFmpeg）

---

生态系统与可扩展性

• 领域技能 – 小型、按需加载的模块（/hyperframes-animation、/hyperframes-keyframes、/hyperframes-audio、/media-use、/figma 等），由路由组合。
• 目录与注册表 – hyperframes catalog 允许您浏览和安装可重用的模块（过渡、效果、设计令牌），并可向上游贡献新模块。
• 设计桥接（frame.md） – 一种“设计→视频”规范，镜像品牌的网页设计系统，使 LLM 在组合时能尊重品牌令牌。
• 云与无服务器渲染 – 可选的 HeyGen 基础设施托管渲染，或自托管 AWS Lambda 函数。

---

适合谁使用

• AI 驱动的内容流水线 – 希望 LLM 自动生成营销视频、PR 演示或数据可视化剪辑的公司。
• 设计→视频团队 – 已维护网页风格设计系统并需要确定性方式导出动态图形的设计师。
• 开发视频即代码工具的开发者 – 偏好 HTML/CSS 而非专有动画图形 DSL 的任何人。
• 教育者 / 爱好者 – 技能系统使无需编写代码即可轻松实验 LLM 驱动的视频创作。

---

安装与要求

• Node.js ≥ 22（包已发布在 npm 上，名为 hyperframes）。
• 本地渲染需要 FFmpeg 在主机上。
• 可选：Bun（用于 Codex 插件打包脚本）。

---

更多信息

• 快速入门: https://hyperframes.heygen.com/quickstart
• 展示（可重混的成品视频）: https://hyperframes.heygen.com/showcase
• 沙盒（在线编辑器）: https://www.hyperframes.dev/
• 文档 / 入门: https://hyperframes.heygen.com/introduction
• Discord 社区: https://discord.gg/EbK98HBPdk

---

总结 – HyperFrames 提供了一种确定性、以 HTML 为先的视频创作方式，通过技能路由与 AI 编码代理紧密集成。它让 LLM 能够在熟悉的 Web 开发栈中生成、预览和渲染动态图形，无需离开。