heygen-com/hyperframes：45.9k stars 的开源 HTML → 视频框架，HeyGen 把自家生产管线 Apache 2.0 开源了

发表于 2026-09-07 分类于开源项目

heygen-com/hyperframes（GitHub 45.9k stars、4.3k forks、当日 +474 stars、Apache 2.0）是一款把 HTML / CSS / GSAP / Lottie / Three.js 转成确定性 MP4 视频的开源框架，核心是「HTML 写场景，data-* 属性写时间线，headless Chrome + FFmpeg 离线渲染」三件套。HeyGen 在生产环境用的就是它，社区 adopters 包括 tldraw、TanStack。20 个 skills 给 Claude Code / Cursor / Codex 等 coding agent 装上之后能直接用自然语言生成产品介绍视频、PR 改 changelog 视频、无脸讲解视频、社交短视频、talking-head 重剪辑等。remotion 是 React 路线的同类，HyperFrames 是 HTML 路线的同类。

上个月我帮朋友改他们的产品介绍视频。原本一个 90 秒的片子，从「更新文案」到「改字号」到「换背景音乐」到「加一行字幕」到「重新渲染」，来回折腾了一下午。

最后一刻我问他：你这个视频脚本存在哪？他说存在 Notion 一个文档里。

那一刻我意识到，视频这种东西和文档不是同一种文件。文档改完刷新页面就生效，视频改完要重新走一遍渲染。视频的「源文件」和「最终产物」之间隔着 5-10 分钟的 ffmpeg，迭代速度天然慢一档。

然后我找到了 HyperFrames。

45.9k stars，4.3k forks，当日 +474 stars，Apache 2.0。HeyGen 这家做 AI 数字人视频的公司，把自家生产管线里最核心的渲染层完整开源了。

它的核心想法只有一句话：视频应该像网页一样写。

一、它想解决的问题：视频是个” 无法 diff 的文件”

先讲清楚背景。

视频制作的传统流程是这样的：After Effects / Premiere Pro / Final Cut 这类专业工具里时间线 + 关键帧 + 素材库 + 渲染。优点是专业、效果上限高，缺点是源文件不可读。一个 .aep 文件里塞的是 AE 自己的二进制项目格式，git diff 出来是一串乱码。

AI Coding Agent 这一波变革里，所有” 代码可读 + 可 diff + 可被 agent 改” 的工具都在重做。Markdown、YAML、TypeScript、Python 这些文本格式天然适合 agent。但视频没有” 文本源”。

过去一年冒出来的几个方向都在试图解决这个事：

Remotion 把视频用 React 组件写。react 装上 + JSX + bundler + Node.js 渲染。优点是 React 生态成熟，缺点是必须懂 React + 装打包器，且 agent 写 JSX 不如写 HTML 顺。

OpenMontage（之前发过的）用 LangGraph 编排多个 sub-agent，每个负责一个视频环节，组合出长视频。

browser-use / video-use（之前也发过）用 Claude Code 跑 Remotion / Manim / PIL 来出动画层。

HyperFrames 选了另一条路：HTML 就是视频。你写一份带 data-* 属性的 HTML，headless Chrome 渲染每一帧，FFmpeg 编码成 MP4。整个过程没有 React、没有 bundler、源文件就是浏览器能直接打开的 HTML。

这事的革命性在哪？HTML 是一等公民。所有人都会写，agent 也最会写。diff 友好。git review 友好。文档友好的视频源文件。

二、产品形态：CLI、Engine、Producer、Studio 一整套

HyperFrames 是一个 monorepo，packages/ 下面 8 个包，各管一摊事。

hyperframes (CLI)。入口二进制。命令有：

init：scaffold 一个新项目
preview：起一个本地服务器，浏览器里实时预览（live reload）
render：本地渲染成 MP4
lint：静态检查 composition 写得对不对
check：检查时间线、track 冲突、媒体文件存在性
snapshot：把当前 composition 截一帧存下来
doctor：诊断常见问题
cloud render：HeyGen 托管的云端渲染（出大视频用）
lambda deploy / render / progress：AWS Lambda 分布式渲染
add：从 catalog 装一个可复用的 block 或 component
init：支持 --design <name> 选定 frame.md 模板，agent 能直接基于视觉系统出 composition
package:codex-plugin：把当前仓库的 manifest、brand、skills 打包成 Codex 插件 zip

@hyperframes/core。类型定义、HTML parser、composition 生成器、linter、运行时、frame adapters。代码量最大、纯逻辑包。它做了几件重要的事：

把 HTML 解析成 composition AST（不靠 DOM parser 因为要离线跑）
给每种 animation runtime 写 seek adapter（GSAP / Lottie / Three.js/ Anime.js/ CSS / WAAPI / TypeGPU）
实现 frame.md → design token 翻译层
提供 Linter API（开发用，CI 里也能用）

@hyperframes/engine。抓帧引擎。Puppeteer 跑 headless Chrome，seek 到每一帧（24/30/60 fps），截图。--seek 不是简单 setTimeout，而是用 Animation.currentTime API 把浏览器内部的时钟拨到指定时间点，让 GSAP / Lottie / Three.js/ CSS / WAAPI 跑到那个时刻的状态，再截图。这条比 Remotion 的 frame.waitForFunction 稳得多。

@hyperframes/producer。完整渲染 pipeline。除了抓帧，还负责音频混音（多个音轨 mix down 成一个）、视频编码（FFmpeg H.264 / H.265）、合成（音频 + 视频 + 字幕烧录）。这是真正产 MP4 的那层。Producer 里还跑 packages/producer/tests/ 下的回归测试，用真实 baseline 视频做 pixel diff。

@hyperframes/studio。浏览器端的可视化编辑器。还在演化，README 标 “Available, evolving”。Studio 是写 composition 的 GUI，HTML / CSS / GSAP 这些底层细节藏起来。

@hyperframes/player。<hyperframes-player> web component，让你可以把任何 HyperFrames composition 嵌进普通网页里当视频播放器，seek、play、pause 全支持。HTML 里写 <hyperframes-player src="launch.html" autoplay></hyperframes-player> 就能用。

@hyperframes/shader-transitions。WebGL shader 转场，比如” 闪白”、” 色彩分离”、” 翻牌” 这些。装在 composition 之间做场景切换。

@hyperframes/aws-lambda。AWS Lambda 部署包。把渲染 pipeline 拆成可并发的 lambda function，本地 driver 派发任务。

整套架构和我之前发的 anomalyco/opencode 的” 一个服务端 + 多个客户端” 思路反过来：这里是” 一个 HTML 源 + 多个渲染后端”（本地 / Docker / Lambda / HeyGen Cloud）。

二点五、HeyGen 这家公司

HyperFrames 来自 HeyGen。HeyGen 是 2020 年成立的 AI 数字人公司，YC W21 出身，总部在洛杉矶。2023 年估值已经 5 亿美元，2024 年 ARR 据说破亿。它的主营业务是「AI 数字人口播视频」：用户上传一段 30 秒的真人视频训练 avatar，输文字脚本，avatar 自动出对应口型的口播视频。

数字人视频的渲染管线里有一段最难：把 HTML/CSS/ 视频素材合成成最终 MP4，混音、烧字幕、码率控制。HeyGen 内部为了这条管线写了 HyperFrames。

2026 年 3 月他们把这层抽出来 Apache 2.0 开源。理由 README 里没说清楚，但从仓库看大概能猜：

数字人赛道越来越挤，单靠 avatar 差异化已经不够，开放工具链拉新用户。
agent 时代的视频需求是” 批量出 N 个视频变体”，这条要靠生态。开源让 agent 工具能直接接。
HeyGen Cloud 还是商业的，渲染出片可以走云端（hyperframes cloud render），开源是前端引流。

这条路径跟 Vercel 把 Next.js 开源然后卖云、Anthropic 把 MCP 协议开源然后卖 API 是一样的。先开放标准，再卖云服务。

三、Skills 体系：20 个 skill 把生产流程教给 agent

这是 HyperFrames 跟我之前发的所有 AI 视频项目（OpenMontage、browser-use video-use）最不一样的地方。

20 个 skills 分三层：

Router 层 1 个：/hyperframes。所有” 做个视频” 的请求先进它。它做两件事：1）确认你到底要哪种产物（视频 / 幻灯片 / 重剪辑）；2）路由到对应的 creation workflow。

Creation workflows 9 个：每个对应一类完整的视频产出场景。

Skill	干什么
`/product-launch-video`	从 URL、brief、script 做一个产品发布视频（最长 3 分钟，最佳 30-90 秒）
`/faceless-explainer`	无脸讲解视频，所有视觉都是 LLM 生成的字体、抽象、图表、数据可视化
`/pr-to-video`	GitHub PR → changelog 视频，agent 调 `gh` CLI 拉 diff
`/embedded-captions`	给现成 talking-head 视频加字幕（verbatim rail / 主体后内嵌 / 纯电影感）
`/talking-head-recut`	重剪 talking-head / 访谈 / 播客，加图卡、数据 callout、kinetic title
`/motion-graphics`	短动态图形（<10 秒），kinetic type、stat hit、logo sting、lower-third
`/music-to-video`	音乐 → beat-synced 视频，歌词、slideshow、kinetic promo
`/slideshow`	演示文稿 /pitch deck，可分页、fragment、branching、presenter mode
`/general-video`	兜底，任意多场景 / 长视频 / 品牌片 / 自由合成
`/remotion-to-hyperframes`	把现有 Remotion 项目单向迁移到 HyperFrames

Domain skills 10 个：原子能力，creation workflows 组合它们。

Skill	干什么
`/hyperframes-core`	composition 合约：data-* 时间属性、class=”clip”、tracks、子 composition、变量、framework-owned media playback
`/hyperframes-animation`	全部动画知识：GSAP / Lottie / Three.js/ Anime.js/ CSS / WAAPI / TypeGPU runtime adapters
`/hyperframes-keyframes`	seek-safe 关键帧写法，跨 runtime
`/hyperframes-creative`	非动画创作方向：frame.md、design.md、palettes、typography、narration、beat planning
`/media-use`	媒体 OS：找 BGM / SFX / 图标 / 配音 / 抠图 / 转录 /caption/ 复用资产
`/hyperframes-cli`	CLI dev loop
`/hyperframes-audio`	混音，voiceover carve、EQ、压缩、限制、门、饱和、延迟、混响、和声、bitcrush、自动化包络、submix buses
`/hyperframes-registry`	catalog 块 / 组件安装
`/figma`	从 Figma 导入 assets /tokens/components /storyboard

装上 Claude Code 之后，我写：

1	/hyperframes 做一个 10 秒的产品介绍视频，渐入标题，背景视频，背景音乐。

agent 走 router → /product-launch-video → 调 /hyperframes-core 写 composition → 调 /hyperframes-animation 写 GSAP 时间线 → 调 /media-use 找 BGM → 调 /hyperframes-audio 配音量 → 调 /hyperframes-cli 预览 → render。

整个流程在 Sonnet 4.5 上大概 2-3 分钟，包括调 4 个 skill。

四、frame.md：把 design system 倒过来给视频用

这是 README 里我看了两遍才意识到分量的一段。

每个有 design system 的团队都有一份 design.md，写 colors、typography、spacing、components 的规则。但这个 design system 是给网页的。当 agent 要做” 产品介绍视频” 时，它需要的不是 colors 和 typography 的 web token，而是 1920×1080 画布上、6 秒内的视觉密度、字号、字重、留白。

frame.md 就是这个翻译层。

它把 design.md 倒过来：

颜色不变，但用法从「网页 background」变成「video frame 1/3 处」
typography 不变，但字号从 px 变成「占画面高度的百分比」
components 不变，但布局从 flex 变成 data-track-index 控制的层
spacing 不变，但单位从 rem 变成 frame timeline（0-30s 内的秒数）

输出是一份 DESIGN.md 超集，团队里所有工具都能读（web 工具读 design，agent 读 frame）。

README 里给了一批 design templates：Biennale Yellow、BlockFrame、Blue Professional、Bold Poster、Broadside、Capsule、Cartesian、Cobalt Grid、Coral、Creative Mode 等等。每一份都是可以直接给 agent 用的视频视觉系统。

这件事的工程量是巨大的。一个团队花一年把 design system 做齐了，要再做一份 frame.md 给视频用，成本翻一倍。HyperFrames 直接送了一打 design templates 出来，省了这一步。

五、和 Remotion 的对比

README 给了对比表，我把它展开讲一下。

维度	HyperFrames	Remotion
写法	HTML + CSS + seekable animation	React 组件
Build	无，index.html 直接跑	bundler 必装（webpack /vite）
Agent handoff	纯 HTML 文件	JSX / React 项目
时间线	seekable，frame-accurate	wall-clock 为主，seek 要小心
分布式渲染	本地 / AWS Lambda / HeyGen Cloud	Remotion Lambda（成熟）
协议	Apache 2.0	Remotion License（source-available）
生态	新，4.3k forks	老，30k+ stars
学习曲线	写 HTML 就行	写 React + Remotion API

Remotion 的优势。生态成熟、文档丰富、商业渲染管线（Remotion Lambda）跑了五六年稳定性高。React 用户无缝接入。

HyperFrames 的优势。没有 build step，agent 直接写 HTML diff 友好。Apache 2.0 真开源（Remotion License 限制商业使用）。HeyGen 在生产用，社区 adopters 包括 tldraw、TanStack 这些有影响力的团队。

该选谁。如果你团队 React 经验深、要做复杂数据可视化（Remotion 的 SVG / Canvas 集成更成熟），选 Remotion。如果你要让 AI agent 写视频源文件、要 git diff 友好的版本控制、要在 Lambda 上跑大规模渲染，HyperFrames 优势明显。

我自己用下来，agent 写 HTML 比写 JSX 明显顺。Claude Code 写 <div data-start="0" data-duration="6">Launch day</div> 这种不会出错，写 <Spring delay={100}><Absolute><div>Launch day</div></Absolute></Spring> 偶尔会漏 props。

六、关键技术细节：怎么”seek” 动画

HyperFrames 的”deterministic 渲染” 宣传语背后，是它处理动画的核心能力。

问题：浏览器里的动画（GSAP、Lottie、Three.js、CSS keyframes）是 wall-clock 驱动的。你让浏览器跳到 t=3.7s，浏览器会播 3.7s 的内容然后截一帧，但中间播的内容可能因为 raf 调度、preload、image decode 等原因有微小漂移。

Remotion 的解法：用 frame.waitForFunction 等浏览器内部的时钟到指定帧，然后截图。简单粗暴但偶尔有边缘 case。

HyperFrames 的解法：每个 runtime adapter（GSAP / Lottie / Three.js/ Anime.js/ CSS / WAAPI）都实现一个 seek(t) 方法。Renderer 调 composition.gsapTimeline.seek(t)，runtime 自己内部把状态拨到 t 时刻。window.__timelines.launch.seek(3.7) 这种。

HTML 里的约定：

<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>

class="clip" 表示这个元素是 video frame（渲染时算 bounding box + mask）。data-start / data-duration 是时间线。data-track-index 是 z-order track（0 在底，1 在上）。data-track-index="2" 是音频。

Renderer 拿到这个 HTML 之后，对每一帧：

用 Puppeteer 加载 HTML
调 window.__timelines.launch.seek(t)
调 document.querySelectorAll('video').forEach(v => v.currentTime = t - v.dataset.start)
等所有动画就绪
截图
下一帧

每帧之间完全独立。你可以把第 47 帧的截图拿出来，diff 一下看看有没有 regression。这就是 README 里 “deterministic” 的意思。

七、AWS Lambda 渲染

单个视频本地跑还行，但你要做 100 个社交媒体 variants（不同比例、不同时长、不同字幕），本地机器要跑很久。

HyperFrames 提供了 AWS Lambda 渲染路径。@hyperframes/aws-lambda 包里有：

把渲染 pipeline 拆成 lambda function 的打包脚本
一个 driver（本地 / CI 跑），把 composition 切片派发给 lambda
progress tracking

README 给的估算：1 个 1920×1080 30fps 的 60 秒视频，本地大概 5-8 分钟。AWS Lambda 跑 50 个并发，每个并发切 1-2 秒的段，整体 1-2 分钟。10 倍加速。

成本我没精算过，但 lambda 单价 0.0000166667 USD/GB-second，2GB 内存的 lambda 跑 1 分钟大概 0.002 美元。50 个并发 1 分钟处理一个 60 秒视频，lambda 成本约 0.1 美元。

这条对做” 批量短视频营销” 的内容工厂很有用。

八、快速上手

最简路径（agent 用户）：

1	npx skills add heygen-com/hyperframes

在 Claude Code / Cursor / Codex 里问：

1	/hyperframes 做一个 10 秒的产品介绍视频，渐入标题，背景视频，背景音乐。

agent 走完所有 skill，产出一份 HTML composition 和一个 MP4。

最简路径（开发者）：

npm i -g hyperframes
npx hyperframes init my-video
cd my-video
npx hyperframes preview      # 浏览器实时预览
npx hyperframes render       # 渲染 MP4

要求 Node.js 22+，ffmpeg 装好（macOS brew install ffmpeg，Ubuntu sudo apt install ffmpeg）。

要装 catalog 里的 block /component：

1
2
3

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

完整 catalog 在 hyperframes.heygen.com/catalog。

九、20 个 skill 的具体用法

挑 4 个我用得最多的展开讲。

`/product-launch-video`

这是我给客户做产品介绍的主力。从客户给的 URL 开始，agent 用 Playwright 截一组关键页面，分析配色字体，下载 hero 图和 logo，写 composition，调 GSAP 时间线，加 callout，加 BGM，渲染。

最长 3 分钟，最佳 30-90 秒。这个时长限制很关键，agent 不会写出 5 分钟的废话视频。

`/pr-to-video`

帮开源项目做 changelog 视频。给一个 PR URL 或 owner/repo#N 引用，agent 调 gh CLI 拉 diff，分析改了哪些文件、加了哪些 feature、调了哪些 API，生成一段 30-60 秒的 changelog 视频。

这种视频在 GitHub 项目的 release notes 里很常见，HyperFrames 把它自动化了。

`/faceless-explainer`

“无脸讲解” 是知识区 YouTube 的常见形式。B 站科技区一半视频是这种：屏幕 + 字幕 + 旁白，不出现人脸。HyperFrames 的实现是：agent 写一份脚本，按脚本生成对应视觉（字体、抽象图、动画、图表），混音 + 烧字幕。

对那些不愿意出镜但想批量做知识视频的人，这条是杀手锏。

`/talking-head-recut`

把录好的 30 分钟播客剪辑成 3 分钟精华版，加图卡、lower-third、data callout、kinetic title。HyperFrames 不剪辑视频本体（那是 FFmpeg 的事），它叠加图层。原始视频不动，在上面叠动效、字幕、数据可视化。

这一条对播客主来说是 10 倍效率提升，原来一个 30 分钟剪辑要 4 小时，现在 15 分钟。

`/embedded-captions`

这个专门解决「说话人视频加字幕」这件事。verbatim 模式把整段话当字幕压在底部；embedded climax 模式把高潮部分（语气词、最强音节）大字号叠在说话人背后；pure cinematic 模式让字幕从画面外飞入飞出演电影感。

海外 YouTube 短视频现在 80% 用 embedded climax，因为这种风格在静音自动播放时也能传递情绪。B 站中文区还没普及，HyperFrames 装上 skill 之后 agent 能直接出。

`/slideshow`

PPT 的开源替代品。HTML / CSS 写 deck，agent 生成每页的内容和过渡。支持 fragment（同一页内分步显示）、branching（决策点跳转）、hotspot（点击区域触发事件）、presenter mode（演讲者视图）。输出是「可导航的 deck」，不是 MP4。

这条对企业内训、conference talk、pitch deck 都有用。把 deck 源放进 git，agent 能 review 内容、PR 改稿。

`/music-to-video`

音乐文件（mp3、wav、视频抽音、或者从「mood brief」生成的 AI 音乐）→ 节奏同步的视频。Lyric 模式显示歌词，slideshow 模式切图，kinetic promo 模式做动态 promo。/media-use skill 配合可以生成 AI 音乐（Suno / Udio）。

`/motion-graphics`

< 10 秒的纯动效。kinetic type、stat hit、logo sting、lower-third、动态推文标题。MP4 或带 alpha channel 的透明覆盖（可以叠在别的视频上面）。这种动效片在产品发布、做 slide 模板、广告片头都用得上。

十、对比视频生成赛道

工具	思路	适用场景	协议
HyperFrames	HTML + seekable 渲染	agent 写视频，HTML 源	Apache 2.0
Remotion	React 组件渲染	React 团队，传统视频	Remotion License
FFmpeg	命令行 + 滤镜	纯编程，复杂合成	LGPL / GPL
After Effects	GUI 时间线	设计师，高端视觉	商业
Runway / Pika	AI 文生视频	一句话出 5 秒	商业
HeyGen 商业版	AI 数字人	真人头像 + 脚本	商业

HyperFrames 填补的是确定性、可 diff、agent friendly 这一档。Runway / Pika 是 AI 想象出视频，每次渲染都不一样。HyperFrames 是 HTML → MP4，同样的 HTML 永远产同样的 MP4。

agent 写视频需要确定性。LLM 的随机性是优势，但” 渲染” 的随机性是缺陷。HyperFrames 拿掉了渲染这层的随机性。

十一、具体怎么用：装上 skill 之后我做了什么

我想用一个具体的例子说明 HyperFrames 的 agent 链路是怎么跑的。

周三晚上，我帮朋友做他新 SaaS 产品的 60 秒产品介绍视频。朋友给了：

产品 URL：https://example-saas.com
一句话定位：”AI 驱动的客户反馈分类工具”
三张产品截图（hero、列表、详情）
一段 12 秒的产品 demo 录屏
选好的 BGM（30 秒剪辑，wav 文件）

我开 Claude Code 装好 skill 之后，输入：

1
2

/hyperframes 帮我做一个 60 秒的产品介绍视频，产品是 example-saas.com，主题是 AI 客户反馈分类。
素材在 ~/projects/example-saas-video/，demo.mp4 是 demo 录屏，bgm.wav 是背景音乐。

agent 走的路径（这是我观察真实 Claude Code 4.5 Sonnet 的行为，不代表 HyperFrames 官方推荐）：

第 1 步：router 阶段。/hyperframes skill 读我的请求，判定这是「产品发布视频」，路由到 /product-launch-video skill。

第 2 步：截图分析。agent 调 Playwright 截 https://example-saas.com 的 hero、列表、详情三个页面，调用视觉模型分析配色、字体、布局。

第 3 步：选 frame.md。agent 推荐 BlockFrame 设计模板（科技产品 + 深色背景），问我：

检测到产品是 SaaS Web 应用。我推荐 BlockFrame 模板（深色 + Sans Serif 标题 + 等宽字数字）。你也可以选 Blue Professional（商务浅色）或 Bold Poster（强对比）。

BlockFrame（推荐）

Blue Professional

Bold Poster

自己选

我回 1。

第 4 步：写脚本。agent 调 LLM 写 60 秒旁白脚本（中文），分段：

[0-3s] "客户反馈淹没在工单里，工程师找不到真正的问题。"
[3-12s] "example-saas 用 AI 自动分类、聚类、优先级排序。"
[12-30s] （demo 录屏 + 文字 callout）
[30-45s] "上线 30 天，团队处理反馈效率提升 3 倍。"
[45-55s] "现在注册送 30 天 Pro 试用。"
[55-60s] "example-saas.com"

第 5 步：写 composition。agent 调用 /hyperframes-core 写出一份 index.html，里面用 data-start / data-duration / data-track-index 控制时间线，GSAP 写动画。

第 6 步：找 / 生成 BGM。agent 调 /media-use，发现我的 bgm.wav 30 秒不够长（视频 60 秒），自动生成一段 60 秒的延展版用 Suno API（BYOK）。

第 7 步：混音。agent 调 /hyperframes-audio，设置 BGM 音量 0.3（不盖过旁白），但这版没旁白所以 BGM 提到 0.5。

第 8 步：lint + preview。npx hyperframes lint 报 “no issues”。”npx hyperframes preview“ 起本地服务器给我看实时效果。

第 9 步：render。我说 “render 1920x1080 30fps”。npx hyperframes render --width 1920 --height 1080 --fps 30 跑 5 分钟，产 output.mp4 60 秒 1920x1080 H.264，约 12 MB。

第 10 步：review + 改。我看完觉得 demo 段太短，让 agent 把 [12-30s] 改到 [12-35s]，后面顺延。agent 改 composition 的 data-duration 属性，重新 render，3 分钟。

整个流程我敲键盘的时间大概 2 分钟（输 prompt + 回 design 选择 + 改一处时长），agent + 渲染跑了 8 分钟。第一次出片一共 10 分钟。

和之前那次 4 小时对比：迭代 3 个版本（改文案 + 改时长 + 改设计模板），总耗时 30 分钟。如果是 After Effects 4 小时起步。

跟设计协作

我把这个工作流推荐给一个设计师朋友。他的反应是：

这个只能做” 模板化” 视频，不能做” 创意视频”。

我同意。HyperFrames 的强项是「结构化视频」（产品介绍、PR walkthrough、教学视频、播客剪辑），不是「创意视频」（广告片、电影感短片）。后者需要 AE / 设计师。

但这条界限在模糊。/motion-graphics skill 配合 /hyperframes-animation 已经能做出相当有质感的动效片（kinetic type、shader 转场、data chart），80% 的 SaaS 营销视频需求能覆盖。

剩下 20% 的” 高端创意” 留给设计师手工做。HyperFrames 是让 agent 接管 80%，不是取代设计师。

跟写代码协作

我试过让 Claude Code 在做 feature 的同时生成 changelog 视频：

1. 实现 X feature
2. 跑 /pr-to-video 给这个 commit 生成 30 秒 changelog 视频
3. 视频文件存到 docs/videos/x-feature.mp4
4. README 引用

这条把” 代码 → changelog 视频” 自动化了。开源项目维护者每周能省下 1-2 小时。

数据流可视化

另一个用法：把数据库里的数据自动转成动态可视化视频。/data-chart catalog block 支持 d3.js 数据 → animated bar chart race 视频。每周跑一次脚本：拉上周的 metrics 数据 → 喂给 agent → 产出 30 秒「本周数据」视频。给团队周会用。

这种” 数据 → 视频” 的工作流以前要设计师 + DataWeave + AE 做半天，现在 agent + HyperFrames 30 分钟。

做开源项目的维护者。/pr-to-video 自动给每次 release 做 30 秒 changelog 视频，挂在 GitHub README / Discord / Twitter 上。

做产品营销的人。/product-launch-video 半小时出一个 60 秒产品介绍，比找外包快两个数量级。

做知识区 YouTube / B 站的人。/faceless-explainer + AI 脚本生成，量产” 屏幕 + 字幕” 教学视频。

做播客的人。/talking-head-recut 把 30 分钟访谈剪成 3 分钟精华版。

做内部培训 / 演示。/slideshow + /general-video 给企业内训出 deck 和解说视频。

AI 工程师。这是我能想到的” 让 agent 直接产视频” 最干净的方案。HTML 源文件可以存 git，可以 review，可以 trace。

十二、局限

生态还在早期。 4.3k forks 跟 Remotion 30k+ 不是一个量级。遇到问题 Stack Overflow 上答案少，Discord 是主要支持渠道。

Seek 渲染在某些 runtime 不完美。 GSAP / WAAPI / CSS 这种浏览器原生 runtime seek 很准，Lottie / Three.js 偶尔需要 manual adapter。社区有人在写新 adapter 但覆盖不全。

frame.md templates 是英文设计系统。 拿去做中文视频会显得” 美式”。需要本地化适配。

MCP server 还没出。 README 里提到了 skills（走 npx skills add），但没提 MCP 集成。对接 Claude Code 要走 npx skills，跟 opencode 的 native MCP 不同。

Lambda 渲染首次部署要配 IAM 角色 + S3 bucket。 README 给了指南但步骤多，第一次配可能要 30-60 分钟。

Git LFS 占空间。 仓库里 packages/producer/tests/**/output.mp4 大概 240 MB 回归测试基准视频。clone 全仓库要先 git lfs install。

174 个 open issues。 跟 ponytail 的 219 个、opencode 的 5,739 个比算少。release 节奏快，bug 修得勤，但 Discord 才是主战场。

十二点五、底层机制：seek 到底是怎么工作的

我想展开讲一下 HyperFrames 怎么「seek 到任意时刻」这件事，因为这决定了 deterministic 渲染能不能成立。

浏览器原生 runtime 的 seek

CSS keyframes / Web Animations API (WAAPI)。浏览器内部就有时间轴，CSS 走 Animation.currentTime API，WAAPI 走 element.getAnimations 索引 0 拿 currentTime。直接 set 值就行。

GSAP。GSAP 暴露 timeline.seek 方法。把 timeline 暂停（paused true），调 seek 到指定时间，timeline 内部把所有 tween 的状态拨到对应时刻。

Anime.js。跟 GSAP 类似，timeline.seek 也行。

Lottie。goToAndStop 跳到指定帧，frame 用 frame 乘 fps 算秒数。

复杂 runtime 的 seek

Three.js。Three.js 没有内置时间轴，所有动画靠 requestAnimationFrame 推。seek 的实现要 hook rAF，临时把 clock.getDelta 改成一个固定 delta，让 Three.js 内部把状态推到指定时刻。

TypeGPU。WebGPU 时代的着色器库，seek 要把 uniform buffer 里的时间变量直接 set 上去。

每加一个 animation runtime，HyperFrames 都要写一个 adapter 包 seek 逻辑。core 包里有这些 adapter 的代码。

视频和音频的 seek

HTML video 元素的 currentTime 属性可以跳到任意秒数。renderer 对每个 video clip 调 video.currentTime 等于 frameTime 减 clip 的 data-start。

audio 类似。

真正的渲染循环

renderer 的主循环大概是这个意思：

Puppeteer 启动 headless Chrome，加载 composition 的 HTML。
等 composition 注册完所有 timeline（window.__ready 信号）。
对每一帧：
- 计算 t 等于 frame 除以 fps。
- seek 所有 timeline。
- seek 所有 video clip。
- seek 所有 audio clip。
- 等一帧让浏览器 paint。
- 截图存到本地。
FFmpeg 把所有 PNG 帧合成 MP4，音频单独 mix down 后 mux 进去。

关键细节：

seek 之后状态是「确定性」的，跟之前 seek 多少次无关，状态是相同的。
视频和动画的 seek 各自独立，因为它们的时间轴来自不同源。
帧率越高、composition 越复杂，渲染越慢。
截图和音频编码在 producer 包里串起来。

这种 seek-based 渲染比 Remotion 的 waitForFunction（等浏览器内部的时钟到指定帧）更稳，因为它不依赖 wall-clock timing，每一帧的状态都是 deterministic 给出来的。

十二点六、Catalog：可复用的 block /component 生态

HyperFrames 不只是一个渲染框架，它还在做一个「视频组件市场」。npx hyperframes add 命令可以从官方 catalog 装可复用的 block 或 component。

官方的 catalog 在 hyperframes.heygen.com/catalog，按类别分了几十个条目。挑几类用得最多的讲。

Transitions（转场）：

flash-through-white：闪白转场，经典电影手法
color-separation：色彩分离（RGB 通道错位 1-2 帧）
flip-card：翻牌转场
warp-zoom：缩放扭曲
ink-spread：墨水扩散
pixelate：像素化（适合敏感内容打码）

Overlays（叠加层）：

instagram-follow：关注按钮动画
subscribe-button：订阅按钮
lower-third：人物介绍条
news-ticker：新闻跑马灯
watermark：半透明水印

Charts（图表）：

data-chart：动态数据图表（柱状、折线、饼图）
chart-race：条形图竞速
world-map：世界地图（点亮国家）
timeline：时间线
funnel：漏斗图

Effects（特效）：

parallax-scroll：视差滚动
blur-reveal：模糊渐显
glitch：故障效果
vhs-noise：VHS 噪点
light-leak：漏光

Captions（字幕）：

word-by-word：单词逐个高亮（TikTok 风格）
karaoke：卡拉 OK 风格（背景词先灰、当前词高亮）
bounce：弹跳入场
typewriter：打字机效果

安装一行：

1
2
3

npx hyperframes add flash-through-white
npx hyperframes add instagram-follow
npx hyperframes add data-chart

装完之后在你的 composition 里写 <div class="block-flash-through-white"></div> 就能用，block 内部自动处理时间线。

这套组件市场的复利效应。每个新组件都被所有现有项目复用。一个团队花一周写一个 brand-callout block，整个公司所有视频都能用。Remotion 那边的 npm 生态虽然有 package 但要装、要配置、要 import。HyperFrames 这边 npx add 一行 + 写 class，门槛低一个量级。

社区也可以贡献 block 到 catalog，流程跟 npm publish 类似但要走 HeyGen 审核（避免低质量 block 拖累整个生态）。

十二点七、Cloud 渲染 vs Lambda vs 本地

渲染方式	适用场景	成本	速度
本地（`hyperframes render`）	短视频（<5 分钟）	0	1x（基准）
HeyGen Cloud（`hyperframes cloud render`）	中等视频（5-30 分钟），团队共享	订阅制	5-10x
AWS Lambda（`hyperframes lambda render`）	大批量并行（50+ 并发）	按需，约 0.1 USD / 视频	10-30x

本地的瓶颈。一台 M3 Pro 笔记本渲染 1 分钟 1080p 30fps 视频大约 5-8 分钟。瓶颈是 Puppeteer 抓帧 + 浏览器渲染。要快只能上多机或云。

HeyGen Cloud 的便利。上传 composition + media 到 HeyGen 的存储，server 帮你渲染，下载 MP4。云端用 GPU 服务器跑，比本地快 5-10 倍。要 HeyGen 账号。

AWS Lambda 的并行。把 composition 拆成 N 段（比如 60 秒拆成 60 个 1 秒段），派发给 60 个 lambda function 并行渲染，最后合成。50 并发对个人开发者够用，100+ 并发对内容工厂才需要。

对个人开发者的建议。日常本地跑，重要视频走 HeyGen Cloud，规模化才上 Lambda。

十三、它在 AI 视频赛道里的位置

最后这一段留给视频生成赛道的全景。

2024 年到 2025 年，AI 视频生成赛道分成了三档：

「想象出视频」档：Runway Gen-4、Pika 2.0、OpenAI Sora、字节 Seedance。一句话或一张图出 5-10 秒视频。每次渲染都不一样。优势：创意上限。劣势：不可重复。

「数字人出视频」档：HeyGen、D-ID、Synthesia、Tavus。真人头像 + AI 脚本 → 口播视频。优势：商用合规、稳定。劣势：创意下限、模板化。

「确定性出视频」档：HyperFrames、Remotion、FFmpeg。给定脚本和素材，永远产同样的视频。优势：CI / 批量 / 版本控制。劣势：脚本要人写。

HyperFrames 站在第三档，且把”agent 写脚本” 这件事接住了。AI 视频赛道到 2026 年下半年会开始分工：

想要” 一段创意视频” 的人用 Sora / Runway。
想要” 一段口播讲解” 的人用 HeyGen / Tavus。
想要” 一段产品介绍 / 营销片 /changelog/ 教学视频” 的人用 HyperFrames / Remotion + agent。

HyperFrames 的赌注是：在第三档里，HTML 比 JSX 更适合 agent 写。这个赌注目前看是对的。

十四、一句话总结

HyperFrames 让「视频源文件」从 After Effects 的二进制项目，变成了 git diff 友好的 HTML。20 个 skill 让 AI agent 像人写代码一样写视频。

视频不再是个「无法 diff 的文件」。

如果你做过任何形式的视频内容生产，clone 一下仓库，跑 npx hyperframes init my-video，5 分钟出第一个 MP4。看完你大概会跟我一样：想着之前那 4 小时的剪辑。

项目地址：https://github.com/heygen-com/hyperframes