用写网页的方式做视频：开源引擎 HyperFrames 架构与确定性渲染解析

让大模型写一段前端页面、调一下 CSS 布局或者用 GSAP 拼一段动效，现在的 Coding Agent 几乎都能顺畅交付。但在视频生成领域，现存的工程链路却一直很别扭：传统剪辑软件是为人类光标设计的重型 GUI，工程文件格式封闭；而基于浏览器的录屏方案又严重依赖实时时钟，遇到机器卡顿就会丢帧音画不同步。

架构速览：HyperFrames 是 HeyGen 开源的视频渲染引擎（GitHub 获 7.6 万星）。它将 HTML、CSS、Canvas 与现代动效库抽象为可定轨寻址（Seekable）的时间轴，结合 Chrome DevTools Protocol 的原子级步进帧捕获与 FFmpeg 管道，彻底摆脱了系统时钟依赖，让智能体能够用最基础的 Web 代码高保真输出 4K MP4 视频。

一、为什么 AI 生成视频需要重回 DOM？

在现有视频生产工具链中，让 AI Agent 介入通常面临两个极端：

要么走传统剪辑软件的工程脚本（比如 After Effects 的 ExtendScript 或剪映草稿格式）。这套方案的底层数据结构极其复杂，嵌套图层与专有属性过多，模型生成时很容易出现参数错位，一旦渲染报错，人类排查起来几乎全靠肉眼肉身找错。

要么采用基于 React 的视频框架（如 Remotion）。Remotion 确实规范化了代码渲染，但它将开发者和模型强绑定在 React 生态中。如果只想简单展示一段纯 CSS 关键帧，或者运行一段原生 WebGL / Three.js 场景，引入庞大的打包体积和组件封装往往显得过重。

HyperFrames 选择了一条更贴近现代浏览器本质的路径：任何合法的网页，只要其时间轴状态可寻址，就是一个合法的视频工程。无论是 Tailwind、原生 HTML5、SVG、Canvas 还是 GSAP，模型只需按照常规前端规范编写代码，剩下的音视频编排和帧渲染全部交由底层引擎接管。

二、确定性渲染内核：彻底剥离系统物理时钟

大部分开发者尝试用无头浏览器（Puppeteer / Playwright）做视频渲染时，第一个踩到的深坑就是非确定性（Non-deterministic Rendering）。

普通的网页动画跑在浏览器的物理时钟和 requestAnimationFrame 之上。当你的服务器负载升高、CPU 发生调度抖动时，某些帧的计算时间就会被拉长，导致最终录制下来的视频掉帧、跳跃，甚至音频与画面的时间轴错开几百毫秒。

HyperFrames 保证输出确定性的核心逻辑非常纯粹：在整个渲染生命周期中，引擎从不真正“播放”视频，而是按固定步长“索取”每一帧。

它通过运行时注入拦截了所有物理时间源：

• 整型数学时钟：第 90 帧在 30 FPS 下对应的时间戳严格计算为 t = 90 / 30 = 3.000s，不读取 Date.now() 或 performance.now()。
• 阻断中途异步拉取：字体、图片、外部音视频资源必须在 Frame 0 之前全部预加载并锁定，渲染过程中禁止发起未受控的网络请求。
• 种子伪随机约束：禁止调用原生的未受控 Math.random()，涉及粒子系统或随机位移的动效必须采用可重放的伪随机数种子。

三、Frame Adapter 与 CDP 原子级帧捕获机制

既然不依赖实时播放，引擎如何让复杂的动画库停在指定的时间点？HyperFrames 提出了 FrameAdapter 规范。

以最常见的 GSAP 动画为例，适配器会将整个页面的主 Timeline 处于 paused 挂起状态。当渲染循环递增到目标帧时，适配器调用底层 seekFrame(frame)，直接将虚拟游标移至目标时刻，强制 DOM 与 CSS 属性完成瞬时重绘：