HyperFrames: 用 HTML 语法描述即可生成确定性 MP4 视频

用 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 是开源渲染引擎，外加围绕 HTML 原生视频创作的一系列工具。

安装即用型模块和组件：

npx hyperframes add flash-through-white   # shader 转场
npx hyperframes add instagram-follow      # 社交叠加层
npx hyperframes add data-chart            # 动画图表

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

特性

HTML 原生：合成文件是带数据属性的 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。两款工具都用无头 Chrome 和 FFmpeg 渲染视频。主要区别在于创作模型：Remotion 的赌注是 React 组件；HyperFrames 的赌注是普通 HTML，人类和 Agent 都能轻松编写。

在 HyperFrames vs Remotion 对比指南中阅读完整对比。

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

实际应用

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

社区

问题和想法：Discord

Bug 和功能请求：GitHub Issues

用户研究：与 HyperFrames 团队预约一场 30 分钟的随意聊天——无需准备，也不会有推销

安全报告：SECURITY.md

贡献指南：CONTRIBUTING.md

Git LFS

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