用 HTML 写视频：HyperFrames 也许是 AI 时代的内容工厂新基建
“如果视频也可以用代码写，如果 AI 可以直接生成视频脚本，如果每一次渲染都是确定性的——这就是 HyperFrames 在做的事。”
一、它解决什么问题
视频制作一直是个”人力密集型”的活。
你有一个产品要介绍，一个功能要演示，一份数据要动画化。传统流程是：写脚本、找设计、出图、排版、剪辑、配音、渲染。快则两三天，慢则一周。
这里面的卡点是什么？
不是创意，是执行层的重复劳动。
你有没有遇到过这种情况——一个 30 秒的产品视频，已经做好了，领导说”换个色调”，然后设计师重新调一遍，剪辑重新对一遍，配音重新配一遍。改动不大，但整个流程要重跑。
问题在于：视频制作没有”代码化”。你没法说”我改一行配置，整条视频重新生成”。
HyperFrames 试图解决这个问题。它的思路是：把视频当作代码来处理。
你用 HTML 写视频内容，用 CSS 控制样式，用 GSAP 等动画库控制时间轴。最后一行命令，渲染出 MP4。改内容？改代码。改样式？改 CSS。改时间轴？改 data-* 属性。每次都是确定性输出，可以 diff，可以版本化，可以放进 CI/CD。
二、核心机制：HTML 即时间轴
HyperFrames 的设计非常直觉——你的 HTML 结构就是视频结构。
<div id="stage" data-composition-id="launch" data-start="0" data-width="1920" data-height="1080"> <!-- 背景视频 clip --> <video class="clip" data-start="0" data-duration="6" data-track-index="0" src="intro.mp4" muted playsinline></video> <!-- 标题 clip --> <h1 id="title" class="clip" data-start="1" data-duration="4" data-track-index="1">Launch day</h1> <!-- 背景音乐 clip --> <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" 的元素，就是一个轨道上的 clip。 data-start 和 data-duration 定义它在时间轴上的位置。 data-track-index 定义它在哪条轨道上。
用 GSAP 写的动画，通过 window.__timelines 注册给渲染引擎，引擎会在渲染时 seek 到每一帧，捕捉画面，编码成 MP4。
整个过程：headless Chrome 逐帧渲染 → FFmpeg 编码 → MP4 输出。同样的输入，每次输出完全一致。
三、AI Agent 原生支持
HyperFrames 最特别的地方，是它的 Agent-first 设计。
它发布之初就自带 Claude Code skill：
npx skills add heygen-com/hyperframes
安装后，Claude Code 自动注册一组 slash commands：
| 命令 | 作用 |
|---|---|
/hyperframes |
写视频 composition |
/hyperframes-cli |
dev loop 命令（init/lint/preview/render） |
/hyperframes-media |
媒体预处理（TTS、文字转语音、去背景） |
/gsap |
GSAP 时间轴动画帮助 |
/tailwind |
Tailwind v4 项目初始化 |
/animejs / /lottie / /three |
各自运行时适配 |
使用方式就是用自然语言描述你要的视频：
“用
/hyperframes创建一个 10 秒的产品介绍视频，标题从底部淡入，背景是深色渐变，加上背景音乐。”
AI agent 会自动：搭建项目结构 → 写正确的 HTML + GSAP → lint → preview 预览 → render 出 MP4。
你不需要知道 HyperFrames 怎么用。你只需要描述你要什么，AI 替你执行整个管线。
四、和 Remotion 的区别
HyperFrames 经常被拿来和 Remotion 比较。两者都是用代码写视频的工具，但思路完全不同。
| HyperFrames | Remotion | |
|---|---|---|
| 编写方式 | HTML + CSS + 动画库 | React 组件 |
| 是否需要构建 | 不需要，index.html 直接可用 | 需要 bundler |
| AI Agent 友好度 | 原生 HTML，AI 写起来没有门槛 | 需要 React 知识 |
| 动画精度 | Seekable，帧级精确 | 需要注意 wall-clock 模式 |
| 生态 | 新兴，Catalog 刚起步 | 成熟，社区活跃 |
| 许可证 | Apache 2.0，完全开源 | Source-available，有限制 |
Remotion 的优势在于 React 生态积累深，适合已经用 React 的团队。
HyperFrames 的优势在于”门槛低”——HTML 是所有前端开发者的通用语言，不需要学习 React，写起来和写网页几乎一样。加上 AI skill 加持，不懂视频的人也能直接生成视频。
五、真实使用场景
HyperFrames 在 HeyGen 内部已经跑在生产环境里，社区也有一些团队在用，包括 tldraw 和 TanStack。
几个典型的落地场景：
产品发布视频 每次迭代改个文案或者色调，不用重走设计-剪辑流程。代码改一行，重新 render，MP4 出来直接用。
数据可视化动画 把 CSV 数据转成动画图表。AI 读取数据，自动生成对应的动态 bar chart race。数据变了，代码改一行，视频重新生成。
技术文档转视频 接上传入的 PDF 或者 Markdown，AI 提取内容，生成带配音和字幕的视频。可以做自动化的”文档转讲解视频”管线。
PR Walkthrough 视频 给代码变更配上动画效果、 narration 和字幕。CI 每次 merge 自动 render 一条视频，发给团队 review。
社交媒体短视频 9:16 TikTok 风格，带字幕动画和 TTS 配音。Prompt 驱动 AI 全自动生成。
六、入手路径
最简单的方式：
# 安装 skill npx skills add heygen-com/hyperframes # 初始化项目 npx hyperframes init my-video cd my-video # 浏览器预览（热重载） npx hyperframes preview # 渲染 MP4 npx hyperframes render --output demo.mp4
依赖：Node.js 22+ 和 FFmpeg。
更懒人的方式：直接让 AI agent（Claude Code / Cursor 等）帮你做所有事。你说”帮我做一个 20 秒的产品介绍视频”，AI 帮你从 0 搭建到 render 完。
七、它意味着什么
HyperFrames 背后有一个更大的趋势——内容的代码化。
当你可以用代码控制内容的生成逻辑，内容就不再是”人力产品”，而是”系统输出”。你有一个设计系统，内容生成就跟着系统走。你改了设计系统变量，所有内容自动更新。
这对于需要持续输出内容的团队来说，价值是巨大的。
而且 HyperFrames 解决的不只是”效率”问题，它解决的是一致性问题。代码化的输出天然带有版本控制、diff、自动化测试的能力。每次渲染可复现，每次修改可追溯。
AI agent + 代码化内容 + 确定性渲染，这三个东西组合在一起，就是一个可持续运转的内容工厂。
视频只是起点。
HyperFrames GitHub → https://github.com/heygen-com/hyperframes[1] 官网 → https://hyperframes.heygen.com[2]