Write HTML. Render video. Built for agents.
更新于 2026-08-31 · 数据来源：GitHub API（采集于 2026-08-31）
← 返回汇总视频创作回到 HTML——Agent 天生就会的那门语言
开源视频渲染框架（HeyGen 出品）：HTML + CSS + 任意 seekable 动画引擎（GSAP/Lottie/Three.js/WAAPI）→ 确定性 MP4。无构建步骤、无 React 依赖、Apache-2.0 无渲染费。自带 20 个 agent skills 覆盖从产品发布片到 PR 演练的九种创作工作流。适合想让编码 Agent 直接产出视频的开发者与内容团队，也是 OpenMontage / OpenMAIC 的 MP4 导出底座。
4.2k forks · 今日仍在推送 · 生产采用：HeyGen 自用 + tldraw + TanStack（ADOPTERS.md）· 回归测试基线 240MB 黄金 MP4（Git LFS）——「同一输入同一输出」不是口号，是被 CI 钉死的承诺
Remotion 用 React 写视频——对前端工程师顺滑，对 Agent 却意味着整个工程化包袱：bundler、JSX、npm 依赖树、组件状态。Agent 天生写得又快又稳的，恰恰是 plain HTML。
CI/回归测试/批量渲染的前提是「同输入同输出」。库时钟动画（wall-clock）在渲染时不守帧——HyperFrames 用 seekable 适配器把 GSAP/Lottie/Three.js 全部驯成帧精确。
Remotion 的自定义许可对转售场景收费；HyperFrames 直接 Apache-2.0，无每渲染费、无商用门槛——「拿去用，别问」，对产品化集成方是决定性差异。
<div id="stage" data-composition-id="launch" 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 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> // 动画交给任意 seekable 引擎，挂到全局 timelines const tl = gsap.timeline({ paused: true }); tl.from("#title", { opacity: 0, y: 40, duration: 0.8 }, 1); window.__timelines = { launch: tl }; </script> </div>
| 层 | 技能 | 一句话 |
|---|---|---|
| 路由器 | /hyperframes | 能力地图 + 意图确认：任何「给我做个视频」先读它，按需装对应工作流 |
| 创作工作流 | /product-launch-video | 网站→发布宣传片（URL/简报/脚本，30-90s 甜点区） |
/faceless-explainer | 纯文字→无脸解说片，视觉全由 LLM 发明 | |
/pr-to-video | GitHub PR → 动画 diff + 旁白 + 字幕的变更讲解 | |
/embedded-captions · /talking-head-recut | 字幕嵌入 / 主持人视频加设计化图层（lower-thirds、数据 callout） | |
/motion-graphics · /music-to-video | <10s 动效图形 / 音乐驱动的节拍同步视频 | |
/slideshow · /general-video | 可导航演示稿（输出是 deck 不是视频）/ 万能兜底 | |
/remotion-to-hyperframes | Remotion 单向迁移——直接对标宣言 | |
| 域技能 | core / animation / keyframes / creative / media-use / cli / audio / registry / figma | 组合契约、动画全集、创意方向、媒体操作系统（TTS/配乐/BGM 账本）、专业音频链（EQ/压缩/侧链 ducking/automation）、Figma 导入 |
安装克制设计：默认只装核心集，创作工作流由路由器按需安装——「绝不悄悄扩展你的安装」。
| HyperFrames | Remotion | |
|---|---|---|
| 创作模型 | HTML + CSS + seekable 动画 | React 组件 |
| 构建步骤 | 无，index.html 直接播 | 需要 bundler |
| Agent 交接物 | 纯 HTML 文件 | JSX / React 工程 |
| 动画时钟 | 适配器帧精确 seek | wall-clock 模式需小心处理 |
| 分布式渲染 | 本地 + AWS Lambda | Remotion Lambda（更成熟） |
| 许可 | Apache-2.0，无渲染费 | 源码可用自定义许可 |
公平地说：Remotion 六年生态（Player/Editor/415 贡献者）仍是护城河；HyperFrames 的胜负手在「Agent 时代的作者模型」与许可开放度——而它只用五个月就拿到了 43k stars 的投票。
hyperframes add data-chart / instagram-follow / flash-through-white——转场、社交 overlay、动画图表开箱即装# Agent 路线：装技能，然后描述视频 $ npx skills add heygen-com/hyperframes # 或非交互精确安装核心集： $ npx hyperframes skills update # 然后对 Claude Code / Cursor / Codex 说： "Using /hyperframes, create a 10-second product intro with a fade-in title, background video and subtle BGM."
# CLI 路线 $ npx hyperframes init my-video $ cd my-video $ npx hyperframes preview # 浏览器实时预览 $ npx hyperframes render # → MP4 # 需要 Node 22+ 与 FFmpeg；无其他仪式
Playground 复刻渲染器的调度内核：data-start / duration / track-index 声明一个组合 → 轨道视图实时呈现 → 拖播放头逐帧 seek（任意 t 哪些 clip 可见、音轨如何混音）→ 同轨重叠时 lint 报警。「seek 而非播放」的确定性语义，拖一下就懂。
纯前端实现，零网络依赖 · clip 可见性边界 / 轨道 lint / 混音削波 / scrub 一致性均经真值表验证
「Agent 原生的视频层」这个位置目前没有第二个同等完成度的竞争者：HTML 作者模型踩在 Agent 最强的能力上，Apache-2.0 踩在集成方最痛的神经上，五个月 43k stars + 被 OpenMontage/OpenMAIC 选为渲染底座是最硬的生态投票。HeyGen 的商业化基因保证投入强度，也埋下路线绑定的伏笔。若 1.0 稳定 API 落地，「视频界的 HTML」叙事很可能从宣言变成默认。