HyperFrames is an open-source framework for turning HTML, CSS, media, and seekable animations into deterministic MP4 videos.
HyperFrames 是一个开源框架,把 HTML、CSS、媒体素材与可定位(seekable)动画转换为确定性的 MP4 视频。
Use it locally with the CLI, from AI coding agents with skills, or as the rendering core behind hosted authoring workflows.
可在本地用 CLI 使用,可由装了 skills 的 AI 编码 agent 驱动,也可作为托管创作流程背后的渲染核心。
Install the HyperFrames skills, then describe the video you want:
先安装 HyperFrames skills,然后描述你想要的视频:
npx skills add heygen-com/hyperframes --full-depth
The picker opens with nothing pre-selected — the Core Skills group is all you need: the /hyperframes router installs each creation workflow on demand.
选择器打开时不预选任何项——Core Skills(核心组)就是你需要的全部:/hyperframes 路由 skill 会按需安装各创作工作流。
Agents and non-interactive runs should use npx hyperframes skills update instead — it installs exactly the core set, whereas a non-interactive skills add without --skill installs all 19.
agent 与非交互式运行应改用 npx hyperframes skills update——它精确安装核心集;而非交互式的 skills add 不带 --skill 时会把 19 个全装上。
--full-depth does a full clone of the repo's current main.
--full-depth 会完整克隆仓库当前的 main。
Without it, skills add fetches the skills.sh registry blob, which lags main by hours — you'd get an older copy of a skill. (hyperframes skills update already installs full-depth.)
不带它时,skills add 拉取的是 skills.sh 注册表快照,落后 main 数小时——你会拿到旧版 skill。(hyperframes skills update 本身就是 full-depth 安装。)
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.
这些 skills 教会 agent 完整的 HyperFrames 生产循环:规划视频、写合规 HTML、接好可定位动画、加媒体素材、lint 检查、预览、渲染。
They work with Claude Code, Cursor, Gemini CLI, Codex, and other coding agents that support skills.
兼容 Claude Code、Cursor、Gemini CLI、Codex 及其他支持 skills 的编码 agent。
HyperFrames ships 19 skills agents load on demand.
HyperFrames 自带 19 个 skill,由 agent 按需加载。
Read /hyperframes first — it's the router and capability map; it picks a workflow for any "make me a…" request — video, deck, or composition port — and points to the domain skills below.
先读 /hyperframes——它是路由器兼能力地图:任何「帮我做个……」的请求——视频、幻灯片、还是合成迁移——它都会挑出对应工作流,并指向下面的领域 skill。
Default to the core set — the router installs each creation workflow on demand.
默认装核心集即可——路由器会按需安装各创作工作流。
npx hyperframes skills update installs exactly that from anywhere; the interactive picker (npx skills add heygen-com/hyperframes --full-depth) lists it as the "Core Skills" group, nothing pre-selected.
npx hyperframes skills update 在任何位置都能精确装上核心集;交互式选择器(npx skills add heygen-com/hyperframes --full-depth)把它列为「Core Skills」组,不做预选。
The picker is interactive-only — a non-interactive or agent run without --skill installs all 19.
选择器只在交互模式出现——非交互或 agent 运行不带 --skill 会装全 19 个。
Use npx skills add heygen-com/hyperframes --all --full-depth to install all 19 deliberately (skips the picker), or npx skills add heygen-com/hyperframes --skill <name> --full-depth for just one (bare name, no leading /).
想刻意装全 19 个,用 npx skills add heygen-com/hyperframes --all --full-depth(跳过选择器);只装一个用 npx skills add heygen-com/hyperframes --skill <名字> --full-depth(裸名,不带 / 前缀)。
Keep --full-depth — it installs the current main; without it skills add fetches the skills.sh blob, which lags by hours.
--full-depth 别省——它装的是当前 main;不带它拉到的 skills.sh 快照落后数小时。
Installs stay lean after that: npx hyperframes init keeps the core set fresh (the router, the hyperframes-* domain skills, and media-use — plus whatever is already installed; /figma stays on demand) and never expands a partial install; the creation workflows install on demand — the router runs npx hyperframes skills update <workflow> before entering one.
此后安装保持精简:npx hyperframes init 只保鲜核心集(路由器、hyperframes-* 领域 skill、media-use——外加已装的;/figma 仍按需),绝不擅自扩张不完整安装;创作工作流按需安装——路由器进入某工作流前会先跑 npx hyperframes skills update <工作流>。
Nothing re-pulls the full set behind your back.
没有任何东西会背着你重拉全集。
Build the upload-ready Codex plugin archive from the committed HEAD version of the manifest, brand assets, and skills:
从已提交的 HEAD 版本(清单、品牌素材、skills)构建可直接上传的 Codex 插件包:
bun run package:codex-plugin
This writes dist/hyperframes-plugin.zip with a hyperframes/ root folder and fails if the archive exceeds Codex's 100 MB upload limit.
生成 dist/hyperframes-plugin.zip(根目录为 hyperframes/),若超出 Codex 100 MB 上传上限则报错。
| Skill | Use when何时用 |
|---|---|
/hyperframes | Read first for any request to make / create / edit / animate / render a video, animation, or motion graphic. Capability map for the domain skills, the intent layer that confirms every creation brief up front, and intent router for the creation workflows below. 凡制作/创建/编辑/动画化/渲染视频、动画或动态图形的请求,先读此篇。它是领域 skill 的能力地图、每个创作需求先行确认的意图层、以及下列创作工作流的意图路由器。 |
| Skill | Use when何时用 |
|---|---|
/product-launch-video | Any website — marketing / launching / promoting a product (from its URL, a brief, or a script), or a site tour / showcase / social clip featuring the site's own visuals. Up to ~3 min (sweet spot 30-90s). 任何网站——为产品做营销/发布/推广(从 URL、需求简报或脚本出发),或以站点自身视觉做站点巡览/展示/社媒短片。最长约 3 分钟(甜区 30–90 秒)。 |
/faceless-explainer | Explaining a topic / concept from arbitrary text — no product, no URL, no website capture; every visual is LLM-invented (typography / abstract / diagram / data-viz). 从任意文本讲解主题/概念——无产品、无 URL、不抓取网站;所有视觉皆由 LLM 原创(字体设计/抽象图形/示意图/数据可视化)。 |
/pr-to-video |
A GitHub pull request (PR URL, owner/repo#N ref, or "this PR") → changelog / feature-reveal / fix / refactor explainer, read via the gh CLI.
一个 GitHub PR(PR 链接、owner/repo#N 引用或「这个 PR」)→ 更新日志/新功能揭晓/修复/重构讲解视频,经 gh CLI 读取。
|
/embedded-captions | Adding captions / subtitles to an existing talking-head video (footage untouched) — verbatim rail, embedded climax behind the subject, or pure-cinematic embed. 给现有真人口播视频加字幕(不动原片)——逐字字幕条、嵌入人物身后的高潮字效、或纯电影式嵌入。 |
/talking-head-recut | Packaging an existing talking-head / interview / podcast video with designed graphic overlays — lower-thirds, data callouts, kinetic titles, pull-quotes, side panels, PiP. 给现有口播/访谈/播客视频加设计感图形叠层包装——下方横条、数据标注、动态标题、引言卡、侧栏、画中画。 |
/motion-graphics | A short, unnarrated, design-led motion graphic (~under 10s) — kinetic type, stat / chart hit, logo sting, lower-third, animated tweet / headline. MP4 or transparent overlay. 短小、无旁白、设计主导的动态图形(约 10 秒内)——动态字体、数据/图表亮点、logo 片花、下方横条、动画化推文/标题。出 MP4 或透明叠层。 |
/music-to-video | A music track (audio file, video to pull audio from, or one generated from a mood brief) → a beat-synced video — lyric, slideshow, or kinetic promo; music drives pacing. 一段音乐(音频文件、从视频抽取的音轨、或按氛围简报生成的曲子)→ 卡节拍视频——歌词版、幻灯版或动感宣传片;音乐主导节奏。 |
/slideshow | A presentation / pitch deck / interactive deck — discrete slides, fragment reveals, branching, hotspot navigation, presenter mode. Output is a navigable deck, not a rendered video. 演示文稿/路演稿/交互式幻灯——独立页面、分步揭示、分支跳转、热点导航、演讲者模式。产出是可翻页的 deck,非渲染视频。 |
/general-video | Anything else — longer or multi-scene pieces, brand / sizzle reel, title card, static loop, freeform composition. Input- and length-agnostic fallback, and the home of companion mode (co-create with the full toolbox). 其余一切——更长或多场景作品、品牌片/混剪、片头卡、静态循环、自由合成。不限输入不限长度的兜底项,也是伴侣模式(用全套工具箱共创)的所在。 |
/remotion-to-hyperframes | Porting an existing Remotion (React) composition's source to HyperFrames HTML. One-way migration, not creation. 把现有 Remotion(React)合成的源码迁移为 HyperFrames HTML。单向迁移,非创作。 |
Atomic capabilities the creation workflows compose against — pull one when you need that specific layer.
创作工作流所组合调用的原子能力——需要哪一层就拉哪一个。
| Skill | Covers覆盖内容 |
|---|---|
/hyperframes-core |
The composition contract — data-* timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, determinism rules.
合成契约——data-* 时序属性、class="clip"、轨道、子合成、变量、框架托管的媒体播放、确定性规则。
|
/hyperframes-animation | All animation knowledge — atomic motion rules, scene blueprints, transitions, runtime adapters (GSAP / Lottie / Three.js / Anime.js / CSS / WAAPI / TypeGPU). 全部动画知识——原子运动规则、场景蓝图、转场、运行时适配器(GSAP / Lottie / Three.js / Anime.js / CSS / WAAPI / TypeGPU)。 |
/hyperframes-keyframes |
Seek-safe keyframe authoring across runtimes — GSAP timelines, CSS keyframes, Anime.js, WAAPI, FLIP, paths, masks, SVG morph/draw, 3D depth — plus hyperframes keyframes diagnostics for rendered motion.
跨运行时的可定位安全关键帧写作——GSAP 时间轴、CSS keyframes、Anime.js、WAAPI、FLIP、路径、遮罩、SVG 变形/描边、3D 纵深——外加 hyperframes keyframes 渲染动效诊断。
|
/hyperframes-creative |
Non-animation creative direction — frame.md / design.md, palettes, typography, narration, beat planning, audio-reactive visuals, composition patterns.
动画之外的创意指导——frame.md / design.md、色板、字体排印、旁白、节拍规划、音频响应视觉、合成范式。
|
/media-use | The media OS — resolve any media need (BGM, SFX, image, icon, logo, voice, color grade, LUT) into a frozen local file or paste-ready block + ledger record, generate via TTS/music/image models when the catalog misses, transcribe, caption, remove backgrounds, and reuse assets across projects. One shared audio engine + manifest tracking. 媒体操作系统——把任何媒体需求(BGM、音效、图片、图标、logo、配音、调色、LUT)落实为冻结的本地文件或即贴即用块 + 台账记录;素材库缺货时经 TTS/音乐/图像模型生成;转录、加字幕、抠背景、跨项目复用素材。共享一套音频引擎 + 清单追踪。 |
/hyperframes-cli |
CLI dev loop — init, lint, check, snapshot, preview, render, publish, doctor, plus HeyGen-hosted cloud rendering (cloud render) and AWS Lambda rendering (lambda deploy / render / progress).
CLI 开发循环——init、lint、check、snapshot、preview、render、publish、doctor,外加 HeyGen 托管云渲染(cloud render)与 AWS Lambda 渲染(lambda deploy / render / progress)。
|
/hyperframes-registry |
Install and wire registry blocks and components into compositions via hyperframes add. Authoring a new block or component to contribute upstream.
经 hyperframes add 把注册表中的区块与组件装入并接进合成。也含编写新区块/组件向上游贡献。
|
/figma | Import Figma assets, tokens, components, and storyboard sections → reconstructed motion (frames read as states, not slides) (REST/CLI) plus Motion animations (MCP) and shaders (MCP source / native export) into a composition. 导入 Figma 素材、令牌、组件与分镜段落 → 重建为动效(帧读作状态而非幻灯片)(REST/CLI),外加 Motion 动画(MCP)与着色器(MCP 源 / 原生导出)进合成。 |
For visual design handoff workflows, see the Claude Design guide and Open Design guide.
视觉设计交接工作流参见 Claude Design 指南与 Open Design 指南。
npx hyperframes init my-video
cd my-video
npx hyperframes preview # preview in browser with live reload
npx hyperframes render # render to MP4
Requirements: Node.js 22+, FFmpeg
前置要求:Node.js 22+、FFmpeg
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; data visualizations, chart races, and map animations.
产品发布视频与新功能公告;PR 讲解视频(动画化代码 diff + 旁白 + 字幕);数据可视化、图表竞速、地图动画。
Social videos with kinetic captions, overlays, and music; docs-to-video, PDF-to-video, and site-tour explainers; reusable motion graphics for automated content pipelines.
社媒视频(动态字幕、叠层、配乐);文档转视频、PDF 转视频、站点巡览讲解;供自动化内容流水线复用的动态图形。
frame.md — your design system, ready for video.
frame.md——你的设计系统,为视频就绪。
Every brand has a design.md. None of them were written for a camera.
每个品牌都有 design.md,但没有一份是为镜头写的。
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.
frame.md 就是那块缺失的转译层:拿你面向网页语境的设计规范,为画幅反转之——同样的令牌、同样的规则,但重写成 AI agent 能直接照着排宣传片的样子,不必猜比例,也不会去搬网页部件。
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 超集。原子不可侵犯,组合保持自由,数值来自脚本。
Browse and remix them all at hyperframes.dev/design.
全部设计模板可在 hyperframes.dev/design 浏览与改编。
Define a video as HTML. Add data attributes for timing and tracks.
用 HTML 定义视频。加 data 属性标时序与轨道。
Use GSAP, CSS, Lottie, Three.js, Anime.js, WAAPI, or your own frame adapter for seekable animation.
用 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.
浏览器即时预览。本地或 Docker 内渲染。
The renderer seeks each frame in headless Chrome and encodes the result with FFmpeg, so the same input produces the same video.
渲染器在无头 Chrome 中逐帧定位(seek),FFmpeg 编码结果——同样的输入产出同样的视频。
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脚手架、预览、lint、检视、渲染本地视频项目 |
| 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教编码 agent 那些通用网页文档不讲的视频生产套路 |
| Studio | Available, evolving可用,演进中 | Browser surface for previewing and editing compositions浏览器端合成预览与编辑界面 |
| AWS Lambda rendering | Available可用 | Deploy a distributed render stack and drive renders from your laptop or CI部署分布式渲染栈,从笔记本或 CI 驱动渲染 |
| hyperframes.dev | Available可用 | Community playground for previewing, iterating, sharing, and rendering HTML-native video projects社区游乐场:预览、迭代、分享、渲染 HTML 原生视频项目 |
| frame.md | Available可用 | Invert your design system for the camera — a DESIGN.md superset an agent can compose video from把你的设计系统为镜头反转——一份 agent 能据以排视频的 DESIGN.md 超集 |
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 chart
Browse the catalog at hyperframes.heygen.com/catalog.
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.
Agent 友好:agent 本来就会写 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 is inspired by Remotion. Both tools render video with headless Chrome and FFmpeg.
HyperFrames 受 Remotion 启发。两者都用无头 Chrome + 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.
主要差异在创作模型:Remotion 押注 React 组件;HyperFrames 押注人与 agent 都易写的纯 HTML。
| HyperFrames | Remotion | |
|---|---|---|
| Authoring创作方式 | HTML + CSS + seekable animationHTML + CSS + 可定位动画 | React componentsReact 组件 |
| Build step构建步骤 | None; index.html plays as-is无;index.html 原样即播 | Bundler required须打包器 |
| Agent handoffAgent 交接 | Plain HTML files纯 HTML 文件 | JSX / React projectJSX / React 项目 |
| Library-clock animations库时钟动画 | Seekable, frame-accurate via adapters经适配器可定位、帧级精确 | Wall-clock animation patterns need care实时钟动画写法须小心 |
| Distributed rendering分布式渲染 | Local and AWS Lambda render paths本地与 AWS Lambda 两条路 | Remotion Lambda, mature cloud rendererRemotion Lambda,成熟云渲染器 |
| License许可证 | Apache 2.0 | Source-available Remotion License源码可见的 Remotion 专有许可 |
Read the full comparison in the HyperFrames vs Remotion guide.
完整对比见 HyperFrames vs Remotion 指南。
Full documentation: hyperframes.heygen.com/introduction — Quickstart, Showcase, Guides, API Reference, Catalog, Examples, AWS Lambda rendering.
完整文档:hyperframes.heygen.com/introduction——快速上手、作品展、指南、API 参考、组件库、示例、AWS Lambda 渲染。
| Package包名 | Description描述 |
|---|---|
hyperframes | CLI for creating, previewing, linting, and rendering compositions创建、预览、lint、渲染合成的 CLI |
@hyperframes/core | Types, parsers, generators, linter, runtime, and frame adapters类型、解析器、生成器、linter、运行时、帧适配器 |
@hyperframes/engine | Seekable page-to-video capture engine using Puppeteer and FFmpeg基于 Puppeteer 与 FFmpeg 的可定位页面转视频捕获引擎 |
@hyperframes/producer | Full rendering pipeline for capture, encode, and audio mix捕获、编码、混音的完整渲染管道 |
@hyperframes/studio | Browser-based composition editor UI浏览器端合成编辑器 UI |
@hyperframes/player | Embeddable <hyperframes-player> web component可嵌入的 <hyperframes-player> web 组件 |
@hyperframes/shader-transitions | WebGL shader transitions for compositions合成用 WebGL 着色器转场 |
@hyperframes/aws-lambda | AWS Lambda SDK and deployment surface for distributed renders分布式渲染的 AWS Lambda SDK 与部署接口 |
HyperFrames is used in production at HeyGen, with community examples from teams like tldraw, TanStack, and others in ADOPTERS.md.
HyperFrames 在 HeyGen 生产环境服役;社区案例来自 tldraw、TanStack 等团队(见 ADOPTERS.md)。
Open a PR if your team is using HyperFrames.
你的团队在用?欢迎开 PR 登记。
Questions and ideas: Discord. Bugs and feature requests: GitHub Issues. Security reports: SECURITY.md. Contributions: CONTRIBUTING.md.
提问与想法:Discord。Bug 与功能请求:GitHub Issues。安全报告:SECURITY.md。贡献指南:CONTRIBUTING.md。
The repo uses Git LFS for golden regression-test baselines under packages/producer/tests/**/output.mp4 (about 240 MB of .mp4 files).
仓库用 Git LFS 存回归测试黄金基线(packages/producer/tests/**/output.mp4,约 240 MB 的 .mp4)。
If you're cloning the full repo for development, install Git LFS first:
若为开发而完整克隆,先装 Git LFS:
# macOS
brew install git-lfs
# Ubuntu / Debian
sudo apt install git-lfs
# Windows
winget install GitHub.GitLFS
# Then, once per machine
git lfs install
If you only need source files, you can skip LFS content:
只需要源码文件的话,可跳过 LFS 内容:
GIT_LFS_SKIP_SMUDGE=1 git clone https://github.com/heygen-com/hyperframes.git
Apache 2.0(宽松开源许可:可商用、可改、可再分发,须保留版权声明)