Hyperframes 视频帧处理工具

项目概述

HyperFrames 是一个开源的确定性视频渲染框架。它把 HTML、CSS、媒体资源和可定位动画转换为可重复生成的 MP4，适用于本地 CLI、AI 编程代理，以及托管式视频创作流程。项目采用 Apache 2.0 许可证，不需要按渲染次数收费。

运行环境要求为 Node.js 22 及以上版本，并需安装 FFmpeg。

快速开始

使用 AI 编程代理

Claude Code 可通过插件市场安装：

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

安装后启用插件自动更新，然后使用 /hyperframes:hyperframes。其他支持 Skills 的代理可执行：

# 更新或安装核心 Skills
npx hyperframes skills update

# 交互式安装
npx skills add heygen-com/hyperframes

# 安装完整 Skills 集合
npx skills add heygen-com/hyperframes --all

核心 Skills 包括视频制作规范、CLI 操作、组件目录和媒体处理。代理应先读取 /hyperframes，以掌握规划、编写 HTML、添加动画与媒体、检查、预览和渲染的完整流程。

手动创建项目

npx hyperframes init my-video
cd my-video
npx hyperframes preview      # 浏览器预览，支持实时刷新
npx hyperframes render       # 渲染 MP4

项目初始化后可直接编辑 index.html，无需额外构建步骤。

核心能力

HyperFrames 支持产品宣传片、功能演示、代码变更讲解、数据图表、地图动画、社交媒体视频、字幕与叠加层、自动化内容管线，以及由文档、PDF 或网页生成的视频。

可通过目录安装现成组件：

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

组件目录包含约 450 个可编辑模块，覆盖转场、标题、动态字幕、图表、地图、三维效果、镜头运动和视觉样式。

技术架构

视频由带有时间属性的 HTML 文档定义。data-start、data-duration 和 data-track-index 用于控制素材的时间与轨道，动画则通过 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 class="clip" data-start="1" data-duration="4">
    Launch day
  </h1>
</div>

渲染器在无头 Chrome 中逐帧定位页面，再由 FFmpeg 编码和混合音频，确保相同输入生成相同帧与输出，适合 CI、回归测试和自动化渲染。

主要包包括：

• @hyperframes/core：类型、解析器、运行时、代码检查器及动画适配器
• @hyperframes/engine：基于 Puppeteer 和 FFmpeg 的逐帧捕获引擎
• @hyperframes/producer：捕获、编码和音频混合流水线
• @hyperframes/studio：浏览器中的合成编辑器
• @hyperframes/player：可嵌入网页的播放器组件
• @hyperframes/aws-lambda：用于分布式渲染的 AWS Lambda SDK

设计系统与代理能力

frame.md 将面向网页的 DESIGN.md 转换为适合视频构图的设计规范。它保留品牌颜色、排版和视觉原子规则，同时允许代理自由组织画面，生成可直接阅读的 DESIGN.md 超集。

HyperFrames 提供 Studio、社区 Playground、组件目录和代理插件包。可使用以下命令构建插件归档：

bun run package:agent-plugin
bun run package:codex-plugin

生成的 Codex 归档位于 dist/hyperframes-plugin.zip，并会检查是否超过 100 MB 上传限制。

与 Remotion 的差异

两者都使用无头 Chrome 和 FFmpeg，但创作模型不同：Remotion 以 React 组件为核心，HyperFrames 以普通 HTML 为核心。HyperFrames 无需 React 和打包器，代理可以直接生成或修改 HTML 文件；动画通过可定位适配器实现帧级控制，更适合 AI 生成、版本控制和确定性自动化流程。