GitHub 趋势 · 第 18 期

写 HTML 就能出视频，还专门给 Agent 用？

#GitHub趋势#AI Agent#视频生成

HyperFrames 是 HeyGen 开源的一个「用 HTML / CSS / JS 写视频」的引擎，定位是 agent-native——你让 Claude Code、Cursor、Codex 跑 /hyperframes，它自己 plan、写 HTML、接动画、预览、渲染。Apache 2.0，本地渲染零按次费用，和 Remotion 的 source-available 许可直接拉开差距。我的判断：如果你本来就靠 Agent 干活，想要可复现、可版本化的视频流水线，它是目前最顺手的一个；但它不是「零代码做视频」的玩具，门槛在 HTML + FFmpeg。

用剪映、PR 做产品短视频，改一版导出一版，字幕对不齐、版本满天飞；让 Agent 生成视频，又卡在没有可复现的工程载体——prompt 一变，画面就飘。

它到底是什么

HyperFrames 把网页（HTML + GSAP 动画）直接当视频源。渲染器在 headless Chrome 里逐帧 seek，再用 FFmpeg 编码，所以同一份输入永远出同一份视频——deterministic，可进 Git。本质是把「视频」降维成「可版本化的网页」。

核心能力

能力	说明
声明式分镜	用 data-* 属性标 timecode，HTML 即分镜
可复现渲染	headless Chrome seek + FFmpeg，deterministic
Agent 原生	/hyperframes 路由按需安装 20+ 技能：plan→写→lint→预览→渲染
组件 Catalog	hyperframes add 拉转场 / 字幕 / 图表组件
多端渲染	本地 / Docker / HeyGen 云渲染 / AWS Lambda
许可	Apache 2.0，无按次费用、无商用阈值

上手：README 原命令

让 Agent 装技能，或手动用 CLI（需 Node.js 22+ 与 FFmpeg）：

# 让 Agent 装技能
npx skills add heygen-com/hyperframes

# 或手动用 CLI（需 Node.js 22+ 与 FFmpeg）
npx hyperframes init my-video
cd my-video
npx hyperframes preview   # 浏览器实时预览
npx hyperframes render     # 渲染为 MP4

# 拉一个转场 / 字幕 / 图表组件
npx hyperframes add flash-through-white
npx hyperframes add instagram-follow
npx hyperframes add data-chart

HTML 组合示例（取自 README，data-* 即 timecode）：

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

我的判断

适合谁：已经用 Agent 写代码的团队；需要可版本化、可复现的产品 / 营销短视频；不想被 Remotion 的 source-available 许可绑住、又要商用无阈值的人。

不适合谁：不想碰 HTML / FFmpeg 的纯运营；追求模板化拖拽出片，剪映、AE 模板更省事。

▪坑 1：云渲染 cloud render 走 HeyGen 托管，要 HeyGen 账号；只有本地渲染免费。
▪坑 2：开发克隆需 Git LFS（约 240MB 的 mp4 回归基线），先 brew install git-lfs。
▪坑 3：Codex 插件包超 100MB 会上传失败。
▪坑 4：渲染依赖 headless Chrome + FFmpeg，环境要自备。

地址：github.com/heygen-com/hyperframes (https://github.com/heygen-com/hyperframes)

本周新增 +4,643 star（总 48,474）｜许可：Apache 2.0 ｜抓取时间：2026-09-10 13:18（GMT+8）

数据来源：GitHub Trending 官方页面实时快照，可能与页面展示存在细微差异。

你更愿意用 Agent 生成视频，还是继续剪映手搓？欢迎在评论区聊聊你踩过的坑。

下期预告：earthtojake/text-to-cad（CAD / CAE / CAM 的 Agent skills 库，本地运行）或 pascalorg/editor（开源 3D 建筑编辑器，带 CLI 与 MCP）。

#GitHub趋势#AI Agent#视频生成