AI Feeds
开源项目

hyperframes

hyperframes

开源HTML转视频框架，专为AI agent设计，让agent直接写HTML即可生成确定性MP4视频。亮点是与Remotion相比无需React、无需构建步骤，agent天然会写HTML，且输出帧完全可复现；由HeyGen维护并内置agent skills，支持Claude Code等工具一键生成视频。Apache 2.0开源，无渲染费用限制。

README

HyperFrames

npm 版本 npm 下载量 许可协议 Node.js Discord

编写 HTML。渲染视频。专为 agent（智能代理）构建。

快速开始 | 案例展示 | 在线演示 | 组件目录 | 文档 | Discord

HyperFrames 演示：左侧 HTML 代码转换为右侧渲染视频

HyperFrames 是一个开源框架，用于将 HTML、CSS、媒体和可逐帧定位的动画转换为确定的 MP4 视频。你可以通过 CLI 在本地使用它，从具有技能（skills）的 AI 编码 agent（智能代理）中使用，或作为托管创作工作流背后的渲染核心。

快速开始

配合 AI 编码 agent

安装 HyperFrames 技能，然后描述你想要的视频：

npx skills add heygen-com/hyperframes

尝试类似这样的提示：

使用 /hyperframes，创建一个 10 秒的产品介绍，包含淡入标题、背景视频和轻柔的背景音乐。

这些技能教会 agent（智能代理）HyperFrames 的制作流程：规划视频、编写有效的 HTML、连接可逐帧定位的动画、添加媒体、lint（代码检查）、预览和渲染。它们适用于 Claude Code、Cursor、Gemini CLI、Codex 以及其他支持技能的编码 agent。

有关视觉设计交接工作流，请参阅 Claude 设计指南 和 开放设计指南。

手动使用 CLI

npx hyperframes init my-video
cd my-video
npx hyperframes preview      # 在浏览器中预览并热重载
npx hyperframes render       # 渲染为 MP4

要求： Node.js 22+、FFmpeg

你可以构建什么

需要灵感？浏览案例展示查看完整视频，你可以观看、阅读、运行和重新混合。

  • 产品发布视频和功能公告
  • 带有动画代码差异、旁白和字幕的 PR 演示
  • 数据可视化、图表竞赛和地图动画
  • 带有动态字幕、叠加层和音乐的社交视频
  • 文档转视频、PDF 转视频和网站转视频解说
  • 用于自动化内容管线的可复用动态图形

Frame.md

frame.md —— 你的设计系统，为视频而生。

每个品牌都有一个 design.md，但没有一个是为摄像头编写的。frame.md 是缺失的转换层：它获取你的 Web 上下文设计规范，并将其为其反转以适配画面（frame）——同样的标记，同样的规则，但经过重写，使 AI agent（智能代理）无需猜测缩放比例或使用 Web 浏览器界面即可编写促销视频。

输出是一个 DESIGN.md 的超集，你整个工具链都能读取。原子（atoms）保持神圣。构图保持自由。数值来自脚本。

Biennale Yellow
Biennale Yellow 		BlockFrame
BlockFrame
Blue Professional
Blue Professional 		Bold Poster
Bold Poster
Broadside
Broadside 		Capsule
Capsule
Cartesian
Cartesian 		Cobalt Grid
Cobalt Grid
Coral
Coral 		Creative Mode
Creative Mode

在 hyperframes.dev/design 浏览并重新混合它们全部。

工作原理

将视频定义为 HTML。使用 data 属性添加时间和轨道信息。使用 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">发布日</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 中渲染。渲染器在 headless Chrome 中逐帧定位，并用 FFmpeg 编码结果，因此相同输入产生相同视频。

HyperFrames 栈

HyperFrames 是开源渲染引擎，加上围绕 HTML 原生视频创建的工具集。

组件 状态 功能
CLI 可用 搭建、预览、lint（代码检查）、检查和渲染本地视频项目
Core / Engine / Producer 可用 解析组合（compositions）、驱动 headless Chrome、编码视频、混合音频
Catalog 可用 用于过渡、覆盖层、字幕、图表、地图和效果的可复用组件和部件
Agent skills 可用 向编码 agent（智能代理）传授视频制作模式，这些模式是通用 Web 文档所遗漏的
Studio 可用，持续演进中 用于预览和编辑组合的浏览器界面
AWS Lambda 渲染 可用 部署分布式渲染栈，从笔记本电脑或 CI 驱动渲染
hyperframes.dev 可用 社区 playground，用于预览、迭代、分享和渲染 HTML 原生视频项目
frame.md 可用 将你的设计系统反转适配摄像头 —— 一个 agent（智能代理）可从中创作视频的 DESIGN.md 超集

组件目录

安装即用型部件和组件：

npx hyperframes add flash-through-white   # shader 过渡
npx hyperframes add instagram-follow      # 社交覆盖层
npx hyperframes add data-chart            # 动画图表

在 hyperframes.heygen.com/catalog 浏览组件目录。

为什么选择 HyperFrames？

  • HTML 原生： 组合（compositions）是带有 data 属性的 HTML 文件。无需 React，无专属时间线格式。
  • 对 agent 友好： agent（智能代理）已能编写 HTML，CLI 默认无需交互。
  • 确定性： 相同输入、相同帧、相同输出。专为 CI、回归测试和自动化渲染设计。
  • 无需构建步骤： index.html 组合可原样播放，并可直接在浏览器中预览。
  • 基于适配器的动画： 可使用 GSAP、CSS 动画、Lottie、Three.js、Anime.js、WAAPI 或自定义运行时。
  • 开源： Apache 2.0 许可，无按渲染收费或商业使用门槛。

HyperFrames vs Remotion

HyperFrames 受 Remotion 启发。两者都使用 headless Chrome 和 FFmpeg 渲染视频。主要区别在于创作模型：Remotion 押注 React 组件；HyperFrames 押注纯 HTML，人类和 agent（智能代理）都能轻松编写。

HyperFrames Remotion
创作方式 HTML + CSS + 可逐帧定位的动画 React 组件
构建步骤 无；index.html 原样播放 需要 bundler
Agent 交接 纯 HTML 文件 JSX / React 项目
基于库时钟的动画 通过适配器支持逐帧精确定位 壁钟动画模式需额外注意
分布式渲染 本地和 AWS Lambda 渲染路径 Remotion Lambda，成熟的云端渲染器
许可协议 Apache 2.0 源代码可用的 Remotion 许可

阅读完整对比，请查看 HyperFrames vs Remotion 指南。

文档

完整文档：hyperframes.heygen.com/introduction

包

包 描述
hyperframes 用于创建、预览、lint（代码检查）和渲染组合的 CLI
@hyperframes/core 类型、解析器、生成器、linter、运行时和帧适配器
@hyperframes/engine 基于 Puppeteer 和 FFmpeg 的可逐帧定位页面到视频捕获引擎
@hyperframes/producer 完整的渲染管线：捕获、编码和音频混合
@hyperframes/studio 基于浏览器的组合编辑器 UI
@hyperframes/player 可嵌入的 <hyperframes-player> Web 组件
@hyperframes/shader-transitions 用于组合的 WebGL shader 过渡
@hyperframes/aws-lambda AWS Lambda SDK 和部署界面，用于分布式渲染

社区

HyperFrames 已在 HeyGen 的生产环境中使用，社区示例来自 tldraw、TanStack 等团队，详见 ADOPTERS.md。如果你的团队正在使用 HyperFrames，请提交 PR。

开发说明

仓库使用 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

# 然后，每台机器只需执行一次
git lfs install

如果你只需要源代码文件，可以跳过 LFS 内容：

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

许可协议

Apache 2.0

开源项目heygen-com2026-06-22原文

相关内容