视频生成的主流路线是让模型直接输出像素：文生视频模型接收一段提示词，逐帧生成画面。HeyGen 开源的 HyperFrames 走了另一条路：视频在这里是一份 HTML 文档，浏览器负责渲染每一帧，FFmpeg 负责把帧序列编码成 MP4。项目在 GitHub 上线后快速积累了 45000+ star，单日增长一度超过 700，HeyGen 自己的生产管线已经在用它，tldraw、TanStack 等团队也出现在 adopters 列表里。
一份 HTML 就是一条时间轴
HyperFrames 的组合（composition）是一个普通的 HTML 文件。时间轴信息全部通过 data 属性声明：
Launch day
data-start 和 data-duration 声明一个元素在时间轴上的出入点，data-track-index 声明它所在的轨道，视频、文字、音频各占一条轨道并行推进。没有专有格式，没有 React 组件约束，浏览器直接打开这份文件就能播放——这也是它的「无构建步骤」承诺：index.html 原样即最终产物。
动画层借用了整个 Web 生态的存量资产。GSAP、Anime.js、Lottie、Three.js、CSS Animation、Web Animations API 都可以作为动画运行时接入，只要它能「seek 到指定帧」。官方给出了一个组合示例：HTML 里引入 GSAP，创建一条 paused 状态的 timeline，挂到 window.__timelines 上，渲染器就会在每一帧把它 seek 到对应位置。
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;这套设计的意义在于：25 年来积累在 CodePen、MDN、技术博客里的 Web 动画代码，理论上都可以直接进入视频管线，不需要移植。
确定性渲染：frame = floor(time × fps)
用浏览器渲染视频的核心难题是时间。浏览器的动画跟着墙钟（wall clock）走，而渲染需要逐帧采样——每一帧都要精确停在它该有的状态。HyperFrames 的解法是把整个渲染管线改成 seek 驱动：帧号由 frame = floor(time × fps) 计算，渲染器驱动 headless Chrome 把页面状态定位到第 N 帧，调用 Chrome 的 beginFrame API 让合成器原子性地产出这一帧画面，再通过 image2pipe 流式送进 FFmpeg 编码。
同一段输入，任何时候渲染都得到逐字节一致的输出。这个性质在生产环境里的价值可以直接量化：渲染结果可以进 CI 做回归测试，仓库自己就是这么做的——用 Git LFS 存了约 240 MB 的 golden 输出视频作为回归基线，每次改动跑测试比对。
实现上分两个捕获模式。BeginFrame 模式运行在 Linux 的 chrome-headless-shell 上，逐字节可复现；macOS 和 Windows 上退回 Screenshot 模式，Chrome 实时运行并截图。编译期会检查组合里是否有 BeginFrame 处理不了的原语（内联 iframe、游离于 Frame Adapter 之外的裸 requestAnimationFrame 循环），命中就自动降级到截图模式，并注入一个虚拟时间 shim，让 rAF 回调依然按帧号推进而不是跟着真实时钟跑。每次降级都会输出诊断说明。
库自带时钟的问题在同类的 React 方案里更棘手。GSAP 内部用 performance.now() 驱动时间轴，渲染器逐帧截图时它却在按真实速度奔跑。官方给了一个直观的对照实验：同一段 4 秒的 GSAP 文字动画（11 个字母 stagger 入场、停留、旋转退场），在 HyperFrames 里完整呈现 4 秒；在不暂停库时钟的渲染器里，GSAP 在渲染开头的约 1 秒真实时间内就把整条时间轴跑完，后面 3 秒截到的全是空舞台。HyperFrames 的处理是把 GSAP 的 timeline pause 掉，每帧之前 seek 到 frame / fps，让库时钟与输出帧率锁步。
与 Remotion 的分歧点：React 还是 HTML
这个赛道此前最知名的项目是 Remotion：同样用 headless Chrome + FFmpeg 渲染视频，但组合的单位是 React 组件。HeyGen 在生产管线里用过 Remotion 数月，最终选择自建，官方对比文档里保留了给 Remotion 的致谢——Chrome 启动参数、端口选择、image2pipe 流式编码、按序帧缓冲这些模式都直接来自 Remotion 团队的开创，源码里保留了署名注释。
两个项目的分歧集中在创作表面（authoring surface）的选择上。整理成表：
| 维度 | HyperFrames | Remotion |
|---|---|---|
| 创作模型 | HTML + CSS + 可 seek 动画 | React 组件（TSX） |
| 构建步骤 | 无，index.html 直接播放 | 必需（webpack 打包） |
| 库时钟动画（GSAP 等） | 可 seek，帧级精确 | 按墙钟播放，需小心处理 |
| 任意 HTML/CSS 直通 | 直接粘贴使用 | 需改写为 JSX |
| 分布式渲染 | 本地 + AWS Lambda 路径 | Remotion Lambda，成熟度更高 |
| HDR 输出 | 支持（双层合成管线） | 官方文档标注不支持 |
| 许可证 | Apache 2.0（OSI 认证） | 自定义源码可用许可，超阈值收费 |
选 HTML 而非 React 的理由，官方文档给得很坦率。第一是给 AI agent 用：LLM 训练语料里 HTML/CSS/JS 的占比远高于 React 特定写法，评测中让 LLM 写 Remotion 组合需要先消耗大量 token 学习框架规则（哪些 hook 可用、哪些 API 禁用、如何搭建项目），产出画面趋于保守——居中标题、常规转场；同一批 LLM 写 HTML + GSAP 则表现出更宽的创意范围。第二是给人用：HTML 同时是渲染层和可编辑数据层，所见 DOM 即可编辑 DOM，在它上面做可视化编辑器（选中、拖拽、属性面板）是自然架构，Paper.Design 选择 HTML 也是同一逻辑；而 Remotion 的 source of truth 是代码加构建产物，可视化编辑器要把改动回写 JSX 再重新编译，往返成本高。
React 路线并非没有优势。已有 React 设计系统的团队可以直接复用组件、享受类型系统和 IDE 补全；Remotion Lambda 经过年产级验证，HyperFrames 的 Lambda 路径（一个 Lambda 函数 + Step Functions 编排，分片渲染、中间产物进 S3）更新，成熟度是明确的短板。HyperFrames 的包结构里能看到完整的工程拼图：@hyperframes/core（解析、校验、帧适配器）、@hyperframes/engine（Puppeteer + FFmpeg 捕获引擎）、@hyperframes/producer(完整渲染管线，含音频混音)、@hyperframes/studio（浏览器编辑器）、@hyperframes/player（可嵌入播放器 web component）、@hyperframes/aws-lambda（分布式渲染）。
20 个 Agent Skills：把制作流程教给模型
HyperFrames 不只是渲染引擎，它给 coding agent 配了一整套技能（skills）——目前发布 20 个，用 npx skills add heygen-com/hyperframes 安装后，Claude Code、Cursor、Codex、Gemini CLI 等支持 skills 协议的 agent 都能加载。
技能的组织方式值得展开。入口是路由技能 /hyperframes，它是一张能力地图，接到「帮我做个视频」类请求时先确认创作意图，再按需挂载对应的工作流技能：
/product-launch-video：从一个网站 URL、简介或脚本生成产品发布视频，主打抓取站点自身视觉素材/faceless-explainer：无脸讲解视频，全部视觉元素由 LLM 发明（排版、图表、数据可视化）/pr-to-video：传入 GitHub PR 编号，读 diff 生成功能演示视频/music-to-video：音乐驱动节奏的 beat-sync 视频/remotion-to-hyperframes：把既有 Remotion 组合单向迁移成 HyperFrames HTML
工作流之下还有领域技能（domain skills）提供原子能力：/hyperframes-core 讲组合契约（data 属性、轨道、子组合、确定性规则），/hyperframes-animation 汇总各运行时的动画知识，/hyperframes-keyframes 专门处理跨运行时的帧级关键帧，/media-use 充当「媒体操作系统」——背景音乐、音效、图标、配音、调色，目录里没有的就调 TTS/音乐/图像模型现场生成，并用 manifest 登记复用。
这套技能的设计逻辑是：agent 写 HTML 的能力是现成的，缺的是视频制作的领域知识——节奏怎么排、转场怎么选、字幕怎么压、音频怎么混。技能把这些隐性知识显式化，渲染和校验交给 CLI（init、lint、check、snapshot、preview、render、doctor），CLI 默认非交互、全部 flag 驱动、纯文本输出、报错即停，就是为了能被 agent 无障碍驱动。
品牌一致性也有专门的一层：frame.md 规范。设计系统里的 design.md 是写给网页的，直接拿去做视频会遇到字号、留白、动效节奏的错配；frame.md 把设计 token 反向翻译成镜头语言，输出一份 agent 可以直接据以创作的 DESIGN.md 超集。官方在 hyperframes.dev 上放了一批可一键套用的设计模板，上图就是其中之一——这类模板本身就是一份 HyperFrames HTML，改文案换素材就能出片。
对开发者意味着什么
把几条线索放在一起看，HyperFrames 代表的是「程序化视频」路线在 2026 年的一次重要落子：视频不再是模型的生成物，而是代码的渲染物。这条路线的特点是资产可版本管理、渲染可复现、修改是编辑而不是重掷骰子——改一行文案，重渲染 30 秒出片，不需要担心其他画面发生变化。
对想上手的开发者，最小路径是三条命令：npx hyperframes init my-video 建项目，npx hyperframes preview 起本地预览（浏览器实时热重载），npx hyperframes render 出 MP4。要求 Node.js 22+ 和 FFmpeg。有 coding agent 的话，装 skills 后直接用自然语言描述需求，agent 走完计划、写 HTML、接动画、lint、预览、渲染的完整流程。
它和文生视频模型不是替代关系。需要写实画面、人物表演、复杂光影的场景，扩散模型仍然是唯一解；而产品介绍、数据可视化、图文讲解、PR 演示这类「信息编排型」视频，程序化渲染在成本、可控性、可迭代性上优势明显。HeyGen 把两条路线都押了——既做生成式数字人视频，又开源这套渲染引擎——因为 agent 生产内容的完整链路里，两者本来就是上下游。
许可证层面 Apache 2.0 意味着任何规模商用免费、无按渲染计费、允许再分发，这与 Remotion 的商业模式（小团队免费、超阈值需购买公司许可）构成了这个赛道目前最清晰的分野。仓库地址 github.com/heygen-com/hyperframes，文档在 hyperframes.heygen.com。
来源：