heygen-com / hyperframes
Heygen-com / HyperFrames
Write HTML. Render video. Built for agents. 编写 HTML。渲染视频。专为 AI 智能体打造。
HyperFrames is an open-source framework for turning HTML, CSS, media, and seekable animations into deterministic MP4 videos. Use it locally with the CLI, from AI coding agents with skills, or as the rendering core behind hosted authoring workflows. HyperFrames 是一个开源框架，旨在将 HTML、CSS、媒体文件和可定位动画转换为确定性的 MP4 视频。你可以通过 CLI 在本地使用它，让具备相关技能的 AI 编程智能体调用它，或者将其作为托管创作工作流背后的渲染核心。
Quick Start
快速开始
With an AI coding agent 使用 AI 编程智能体
Install the HyperFrames skills, then describe the video you want: 安装 HyperFrames 技能，然后描述你想要的视频：
npx skills add heygen-com/hyperframes
Try a prompt like: 尝试输入如下提示词：
Using /hyperframes, create a 10-second product intro with a fade-in title, a background video, and subtle background music. 使用 /hyperframes 创建一个 10 秒的产品介绍视频，包含淡入标题、背景视频和轻柔的背景音乐。
The skills teach agents the HyperFrames production loop: plan the video, write valid HTML, wire seekable animations, add media, lint, preview, and render. They work with Claude Code, Cursor, Gemini CLI, Codex, and other coding agents that support skills. For visual design handoff workflows, see the Claude Design guide and Open Design guide. 这些技能教会智能体 HyperFrames 的生产循环：规划视频、编写有效的 HTML、连接可定位动画、添加媒体、代码检查（lint）、预览和渲染。它们适用于 Claude Code、Cursor、Gemini CLI、Codex 以及其他支持技能的编程智能体。关于视觉设计交付工作流，请参阅 Claude Design 指南和 Open Design 指南。
Manually with the CLI 通过 CLI 手动操作
npx hyperframes init my-video
cd my-video
npx hyperframes preview # preview in browser with live reload
npx hyperframes render # render to MP4Requirements: Node.js 22+, FFmpeg 要求： Node.js 22+，FFmpeg
What You Can Build
你可以构建什么
Need ideas? Browse the Showcase for finished videos you can watch, read, run, and remix. 需要灵感吗？浏览 Showcase（展示区），查看可以观看、阅读、运行和二次创作的成品视频。
- Product launch videos and feature announcements
- 产品发布视频和功能公告
- PR walkthroughs with animated code diffs, narration, and captions
- 带有动画代码差异、旁白和字幕的 PR（代码合并请求）演示
- Data visualizations, chart races, and map animations
- 数据可视化、动态图表竞赛和地图动画
- Social videos with kinetic captions, overlays, and music
- 带有动态字幕、叠加层和音乐的社交媒体视频
- Docs-to-video, PDF-to-video, and website-to-video explainers
- 文档转视频、PDF 转视频和网站转视频的讲解内容
- Reusable motion graphics for automated content pipelines
- 用于自动化内容流水线的可复用动态图形
Frame.md
Frame.md
frame.md — your design system, ready for video. frame.md — 为视频准备的设计系统。
Every brand has a design.md. None of them were written for a camera. frame.md is the missing translation layer: it takes your web-context design spec and inverts it for the frame — the same tokens, the same rules, but rewritten so an AI agent can compose a promo video without guessing at scale or reaching for web chrome. The output is a DESIGN.md superset your whole toolchain can read. Atoms stay sacred. Composition stays free. Numbers come from the script. 每个品牌都有自己的 design.md，但没有一个是为摄像机设计的。frame.md 是缺失的转换层：它获取你的 Web 环境设计规范，并将其转换为适合视频画面的格式——使用相同的令牌（tokens）和规则，但经过重写，使 AI 智能体能够无需猜测比例或处理 Web 浏览器界面即可合成宣传视频。其输出是一个你的整个工具链都能读取的 DESIGN.md 超集。原子设计保持不变，构图保持自由，数值则来自脚本。
Browse and remix them all at hyperframes.dev/design. 在 hyperframes.dev/design 浏览并二次创作所有内容。
How It Works
工作原理
Define a video as HTML. Add data attributes for timing and tracks. Use GSAP, CSS, Lottie, Three.js, Anime.js, WAAPI, or your own frame adapter for seekable animation. 将视频定义为 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">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>Preview instantly in the browser. Render locally or in Docker. The renderer seeks each frame in headless Chrome and encodes the result with FFmpeg, so the same input produces the same video. 在浏览器中即时预览。在本地或 Docker 中渲染。渲染器在无头 Chrome 中定位每一帧，并使用 FFmpeg 对结果进行编码，因此相同的输入会产生相同的视频。
HyperFrames Stack
HyperFrames 技术栈
HyperFrames is the open-source rendering engine, plus a growing set of tools around HTML-native video creation. HyperFrames 是一个开源渲染引擎，外加一套围绕 HTML 原生视频创作不断增长的工具集。
| Piece | Status | What it does |
|---|---|---|
| 组件 | 状态 | 功能 |
| CLI | Available | Scaffold, preview, lint, inspect, and render local video projects |
| CLI | 可用 | 脚手架、预览、检查、审查和渲染本地视频项目 |
| Core / Engine / Producer | Available | Parse compositions, drive headless Chrome, encode video, and mix audio |
| 核心/引擎/生产者 | 可用 | 解析合成文件、驱动无头 Chrome、编码视频并混合音频 |
| Catalog | Available | Reusable blocks and components for transitions, overlays, captions, charts, maps, and effects |
| 目录 | 可用 | 用于转场、叠加层、字幕、图表、地图和特效的可复用模块与组件 |
| Agent skills | Available | Teach coding agents the video-production patterns that generic web docs miss |
| 智能体技能 | 可用 | 教导编程智能体掌握通用 Web 文档中缺失的视频制作模式 |
| Studio | Available, evolving | Browser surface for previewing and editing compositions |
| Studio | 可用，持续演进 | 用于预览和编辑合成文件的浏览器界面 |
| AWS Lambda rendering | Available | Deploy a distributed render stack and drive renders from your laptop or CI |
| AWS Lambda 渲染 | 可用 | 部署分布式渲染栈，并从你的笔记本电脑或 CI 中驱动渲染 |
| hyperframes.dev | Available | Community playground for previewing, iterating, sharing, and rendering HTML-native video projects |
| hyperframes.dev | 可用 | 用于预览、迭代、分享和渲染 HTML 原生视频项目的社区游乐场 |
| frame.md | Available | Invert your design system for the camera — a DESIGN.md superset an agent can compose video from |
| frame.md | 可用 | 为摄像机反转你的设计系统——一个智能体可以据此合成视频的 DESIGN.md 超集 |
Catalog
目录
Install ready-to-use blocks and components: 安装即用型模块和组件：
npx hyperframes add flash-through-white # shader transition
npx hyperframes add instagram-follow # social overlay
npx hyperframes add data-chart # animated chartBrowse the catalog at hyperframes.heygen.com/catalog. 在 hyperframes.heygen.com/catalog 浏览目录。
Why HyperFrames?
为什么选择 HyperFrames？
- HTML-native: compositions are HTML files with data attributes. No React requirement, no proprietary timeline format.
- HTML 原生： 合成文件是带有 data 属性的 HTML 文件。无需 React，没有专有的时间轴格式。
- Agent-friendly: agents already write HTML, and the CLI is non-interactive by default.
- 对智能体友好： 智能体已经擅长编写 HTML，且 CLI 默认是非交互式的。
- Deterministic: same input, same frames, same output. Built for CI, regression tests, and automated rendering.
- 确定性： 相同的输入、相同的帧、相同的输出。专为 CI、回归测试和自动化渲染而构建。
- No build step: an index.html composition plays as-is and can be previewed directly in the browser.
- 无需构建步骤： index.html 合成文件可直接播放，并可在浏览器中直接预览。
- Adapter-based animation: bring GSAP, CSS animations, Lottie, Three.js, Anime.js, WAAPI, or a custom runtime.
- 基于适配器的动画： 支持 GSAP、CSS 动画、Lottie、Three.js、Anime.js、WAAPI 或自定义运行时。
- Open source: Apache 2.0 license, with no per-render fees or commercial-use thresholds.
- 开源： Apache 2.0 许可证，无单次渲染费用，也无商业使用门槛。
HyperFrames vs Remotion
HyperFrames 与 Remotion 对比
HyperFrames is inspired by Remotion. Both tools render video with headless Chrome and FFmpeg. The main difference is the authoring model: Remotion’s bet is React components; HyperFrames’ bet is plain HTML that humans and agents can both write easily. HyperFrames 受 Remotion 启发。这两个工具都使用无头 Chrome 和 FFmpeg 渲染视频。主要区别在于创作模型：Remotion 押注于 React 组件；而 HyperFrames 押注于人类和智能体都能轻松编写的纯 HTML。
| Feature | HyperFrames | Remotion |
|---|---|---|
| 特性 | HyperFrames | Remotion |
| Authoring | HTML + CSS + seekable animation | React components |
| 创作方式 | HTML + CSS + 可定位动画 | React 组件 |
| Build step | None; index.html plays as-is | Bundler required |
| 构建步骤 | 无；index.html 可直接播放 | 需要打包工具 |
| Agent handoff | Plain HTML files | JSX / React project |
| 智能体交付 | 纯 HTML 文件 | JSX / React 项目 |
| Library-clock animations | Seekable, frame-accurate via adapters | Wall-clock animation patterns need care |
| 库时钟动画 | 通过适配器实现可定位、帧精确 | 挂钟动画模式需要额外处理 |
| Distributed rendering | Local and AWS Lambda render paths | Remotion Lambda, mature cloud renderer |
| 分布式渲染 | 本地和 AWS Lambda 渲染路径 | Remotion Lambda，成熟的云渲染器 |
| License | Apache 2.0 | Source-available Remotion License |
| 许可证 | Apache 2.0 | 源码可见的 Remotion 许可证 |