HyperFrames 是什么？写 HTML 就能出视频的开源框架

HyperFrames 是视频公司 HeyGen 开源的 HTML 转视频框架：用 HTML、CSS 和常见动画库写一个网页，它就能把这一页渲染成确定性的 MP4 视频。项目在 GitHub 上已有约 4.8 万 Star，Apache 2.0 协议，个人和商用都免费。

官方给它的定位是三个短句：Write HTML. Render video. Built for agents. 拆开看就是三件事：素材是网页代码、产物是视频文件、设计目标是给 AI 编程助手用。本文基于官方仓库与文档（2026 年 9 月 8 日发布 v0.8.32 版本）讲清它是什么、边界在哪、怎么上手。

它解决的老大难问题：视频渲染完就没法改

传统做视频，无论是剪映还是专业时间线软件，成片导出之后再想改一行字幕、换一个数字，都得回到工程里重新调一遍再导出。批量化做视频时，这个成本会被放大几十倍。

HyperFrames 的做法是把 HTML 当成唯一事实来源。视频里的每个元素就是一个网页标签，带时间轴属性标注它何时出现、持续多久。改文案就是改标签里的字，改节奏就是改时间属性，浏览器里预览即所得。对 AI 来说更关键：它能读懂、能直接改代码，改完重新渲染即可。

47.8k Star 背后的三件套

1. Agent Skills：项目内置 20 个技能文件，装好后 Claude Code、Cursor、Codex、Gemini CLI 这类编程助手会自动学会「先规划、再写 HTML、接动画、查错、预览、渲染」的完整流程，一句「帮我做一条产品介绍视频」就能开工。
2. CLI 工具链：npx hyperframes init 建工程、preview 起本地预览、lint 查错误、render 出片，还支持 HeyGen 云端渲染和 AWS Lambda 渲染。
3. 确定性渲染：同一份工程每次渲染结果完全一致，动画基于 GSAP、CSS、Lottie、Three.js、Anime.js、WAAPI 等可定位（seekable）方案，这是它能进自动化流水线的前提。

和 Remotion 的边界：同一条赛道的两种做法

写代码做视频这个方向上，Remotion 是更早出名的方案，但它要求会写 React。HyperFrames 用的是纯 HTML，理论上任何能生成网页的模型都能直接产出工程，门槛更低。官方甚至提供了 /remotion-to-hyperframes 工作流，把已有的 Remotion 工程迁移过来。

两者的取舍和实拍类 AI 视频工具的区别，可以看我们之前写过的 Codex + HyperFrames 完整教程、Codex + Remotion 完整教程，以及更全面的 AI 视频生成工具怎么选。

搜「HyperFrames」时的坑：认准官方入口

在搜索引擎搜这个词，前排会混进 hyperframes.net、hyperframes.app、hyperframes.top 等第三方站点，有的自称「国产 AI 视频生成平台」，与 HeyGen 的开源项目并无关系。

认准两个入口即可：GitHub 仓库 heygen-com/hyperframes 和官方文档站 hyperframes.heygen.com，在线试玩在 hyperframes.dev。

三步跑出第一个视频

前置条件只有两个：Node.js 22 以上版本和 FFmpeg。

1. npx hyperframes init my-video 创建工程
2. npx hyperframes preview 在浏览器里实时预览
3. npx hyperframes render 渲染输出 MP4

不想手写代码，就先装技能包：npx skills add heygen-com/hyperframes，然后直接对编程助手描述想要什么样的视频。具体到每一步的配置和常见报错，建议跟着我们的 HyperFrames 实战教程 一步步做；如果想做短剧类内容，也可以参考 AI 短剧制作 Skill 教程。