用 HTML 写视频：HyperFrames 把网页逐帧渲染成确定性 MP4
项目地址：https://github.com/heygen-com/hyperframes
做一条产品发布视频，传统思路是打开剪辑软件、调时间轴、找素材、对齐字幕。换个思路：直接把视频当成网页来写，用 HTML + CSS + 动画定义每一帧，最后渲染成 MP4。
HyperFrames 是一个开源框架，能把 HTML、CSS、媒体资源和可寻址动画稳定渲染成确定性 MP4。不需要 React，不需要专业剪辑软件，也可以让 AI 编程 Agent 直接写。
项目简介
HyperFrames 来自 HeyGen，已经在生产环境跑过大量视频生成任务。核心定位是「用网页技术做视频」。
对开发者来说，可以继续用熟悉的 HTML、CSS、GSAP、Lottie、Three.js 写动画；对 AI Agent 来说，不需要学习新的视频格式，只要会写网页，就能批量生产可复用的视频内容。
项目口号是 "Write HTML. Render video. Built for agents."：不写 React 组件，不绑死某个动画库，也不要求懂视频编码——底层用 Headless Chrome 逐帧截图，再用 FFmpeg 编码成 MP4。
核心特性
HTML-native 创作
视频就是 HTML 文件。元素用 data-start、data-duration、data-track-index 标注时间线，动画通过 GSAP、CSS keyframes、WAAPI、Lottie、Anime.js 甚至 Three.js 驱动。没有构建步骤，index.html 打开就能预览。
确定性输出
同样的输入，同样的帧，同样的 MP4。这对 CI/CD、回归测试和自动化渲染流水线特别友好。HyperFrames 把渲染拆成组合解析、Headless Chrome 逐帧捕获、FFmpeg 编码三段，保证输出稳定可复现。
Agent 友好
HyperFrames 为 Claude Code、Cursor、Codex、Gemini CLI 等 Agent 环境提供了 20 个技能（skills）。安装后可以直接说：
用
/hyperframes给我做一条 10 秒的产品介绍视频，带淡入标题、背景视频和轻音乐。
Agent 会自动走「规划 → 写 HTML → 接动画 → 加媒体 → lint → 预览 → 渲染」的完整流程。
多渲染路径
本地用 CLI 渲染，云端可以走 HeyGen 托管渲染，也可以自己部署 AWS Lambda 渲染集群。需要大规模批量生成时，分布式路径能省不少时间。
开放组件库
hyperframes catalog 里已经有转场、字幕、图表、地图、社交叠加层等现成 block。比如 npx hyperframes add data-chart 就能给视频加动态数据图表。
怎么用
最轻量的上手方式是用 CLI：
npx hyperframes init my-video
cd my-video
npx hyperframes preview # 浏览器实时预览
npx hyperframes render # 渲染成 MP4
环境要求只有 Node.js 22+ 和 FFmpeg。
如果想让 AI Agent 来干，先装技能：
npx skills add heygen-com/hyperframes
然后给 Agent 一句话需求，它会在项目里生成 index.html、媒体目录、动画脚本，最终输出 MP4。
一个最简的 composition 长这样：
Launch day
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;
不需要写时间轴 XML，也不需要懂视频编码参数，网页会动，视频就会动。
效果与落地场景
HyperFrames 官网提供了不少可直接复用的设计模板。每个模板都是把品牌 design token 翻写成适合镜头的 frame.md，Agent 能直接拿它生成符合品牌调性的视频。
从社区展示来看，常见的落地场景包括：
- 产品发布视频和功能公告
- PR 变更说明视频，带动态代码 diff 和字幕
- 数据可视化、图表竞赛、地图动画
- 带动态字幕和叠加层的社媒视频
- 文档转视频、PDF 转视频、网站导览讲解
效果本质上就是你写的网页在 1920×1080 画布上的逐帧录制，所以字体、颜色、布局、动画曲线全部可控。
与 Remotion 的差异
Remotion 同样走 Headless Chrome + FFmpeg 路线。HyperFrames 走的是纯 HTML 方向，不需要 React 构建；Apache 2.0 协议，也没有按渲染次数收费的商业门槛。
适合谁用
对个人开发者或内容创作者来说，HyperFrames 把视频制作变成了写网页：会 HTML/CSS 就能批量生成带品牌感的视频，不用再盯着剪辑软件的时间轴。
对企业团队来说，它解决的是规模化与可维护问题：视频版本可以走 Git 管理，渲染可以进 CI，不同环境输出一致。产品更新时，改几行 HTML 重新渲染，整条视频管线就跟着刷新。
结尾
如果需要一个「让代码直接变成视频」的工具，可以试一下 HyperFrames：把视频创作的门槛从「会剪辑」变成「会写网页」，而后者恰好是 Agent 最擅长的。写完 HTML，渲染一条 MP4，可能比你想象中更简单。