用AI写代码生成视频目前流行的两种视频制作方式Hyperframes和Remotion，两者都代表着视频即网页的概念。
一、AI 写的 React 视频代码，一跑大片红报错
老王用Remotion + AI写代码的方式做了10来个视频了，发现AI写的代码一次就跑通的情况很少，总是有各种奇怪的报错，要花不少时间调试。就想着有没有其他视频制作方案。
然后就发现了Hyperframes。用过后发现AI写的代码基本不会有飘红报错问题，而且代码本身也是html, 直接用浏览器就可以看到效果。然后就用Hyperframes + AI做了下面这个视频。
Remotion还是Hyperframes？AI做视频该选谁｜深度对比
这究竟是什么原因呢？
二、用AI写代码生成视频？
一句话就够了，用代码写视频，就像用Markdown写文档。
传统的视频制作依赖 Pr、AE 这类 剪辑软件，靠鼠标拖拽时间轴。用AI写代码生成视频，把这个过程颠覆了。AI Agent写代码，用对应的开源项目可以帮你渲染成MP4。
所以呢？视频可以参数化、版本控制、自动化批量生产。一百个产品的介绍视频？改个变量跑一百遍。说实话，我第一次听到这个概念的时候也觉得有点玄乎，但真用起来才发现，这在传统的剪辑软件里是不可想象的。
三、两条路线，React写视频 vs 纯HTML写视频
Remotion 和 Hyperframes 都是代码生成视频的框架，但走了完全相反的路。
Remotion 选择了React。你写React组件，每一帧就是组件的一个状态。框架通过React代码驱动虚拟DOM渲染，然后逐帧截图拼成视频。优势是如果你已经有React技术栈，组件可以直接复用。代价是必须配置Webpack打包工具、管理package.json依赖树、处理React生命周期。
Hyperframes 选择了纯HTML。一个视频就是一个标准HTML页面，时间轴用 data-* 属性声明。没有构建步骤，没有框架依赖，index.html 双击就能播放。
关键差异不在语法，在AI写代码的容错上。
| | Remotion | Hyperframes |
|---|---|---|
| 基础语言 | TypeScript + React + JSX | 纯 HTML + CSS |
| 构建要求 | 强依赖 Webpack | 零构建，即存即阅 |
| 组件复用 | 极高（React 生态） | 中等（Web Components） |
| AI 容错率 | 较低（React 生命周期易出错） | 极高（HTML 是 LLM 的母语） |
对人类工程师来说，两个都能用。但对AI Agent来说，差距就出来了。HTML的容错率远高于React，所有大模型对HTML的理解深度都远超对特定React库生命周期的掌握。说到底，HTML是大模型的母语，React顶多算方言。
四、渲染引擎，截图模式 vs 原子级接管
写完代码只是第一步。真正难的是把浏览器里的动态页面变成一个确定性的MP4文件，每一帧都不掉、不多、不少。
Remotion用的是「实时截图模式」。 浏览器按物理时间播放，引擎在每个时间点暂停、截图、编码。大多数场景够用，但遇到复杂的WebGL着色器或requestAnimationFrame循环时，浏览器的实际渲染可能还没完成就被截了图，结果是掉帧或画面撕裂。而且色彩空间被锁死在sRGB，不支持HDR。
Hyperframes用的是「原子级接管模式」。 通过Chrome DevTools Protocol调用beginFrame API，直接接管浏览器的图形合成器。浏览器不再按物理时间渲染，而是完全听从引擎的虚拟时间指令。公式很简单，frame = floor(time × fps)。相同的HTML输入，在任何机器上渲染出的画面是字节级完全一致的。
打个比方，Remotion像是在跑步机上拍照，你按快门的时候，跑步机还在转。Hyperframes是按帧暂停录像，你让它第几帧停，它就第几帧停。
Hyperframes还搞了个双通道合成管道，能输出真正的HDR视频。Remotion锁sRGB，这一项上确实没有还手之力，不过对大多数自媒体创作者来说，HDR可能暂时还用不上。
五、动画同步，GSAP的时钟问题
如果你只用CSS动画，这一节可以跳过。但如果你想在视频里用GSAP、Anime.js、Three.js这些专业动画库，恭喜，你遇到了AI代码生成视频里最头疼的问题。
问题是，这些库都有自己的内部时钟，靠performance.now()或requestAnimationFrame驱动。Remotion暂停截图的时候，物理世界的挂钟时间没有停，GSAP的时钟继续飞速运转。一个4秒的平滑飞入动画，在视频里可能不到1秒就跑完了，后面3秒屏幕上只剩空白。
Remotion的解法，没有官方解法。你得自己写复杂的钩子函数，手动用useCurrentFrame()去覆盖动画库的进度值。侵入性极强，基本等于把动画库的核心机制重写一遍。
Hyperframes的解法，帧适配器模式。框架在运行时劫持外部动画库的时间控制权。你创建GSAP时间轴时声明{ paused: true }，注册到window.__timelines，渲染时Hyperframes主动调用API把时间轴seek到当前帧的精确微秒。动画库和视频帧率保持绝对锁步。
一句话，Remotion需要你手动处理动画库，Hyperframes替你处理好了。
六、杀手锏，AI Agent 技能包
前面说了这么多技术差异，其实都不是最关键的。最关键的是，谁来写这些代码。如果你打算完全让AI来写，那Hyperframes有一个 Remotion目前完全没有的东西。
一行命令就够了
npx skills add heygen-com/hyperframes
这行命令向 Claude Code、Cursor、Gemini CLI 等 AI 编码工具注入完整的视频生产上下文库。注入之后，AI 不只是「能写 Hyperframes 代码」，而是「知道怎么正确地写」。
技能包里有什么
路由指令，/product-launch-video、/website-to-video、/motion-graphics，一句话描述需求，AI 自动选择对应的视频模板
强制约束，禁止在时间轴中使用异步回调（fetch()/async/await）、禁止Math.random()（破坏确定性）、强制所有<video>添加muted属性、强制场景切换添加平滑转场
反模式库，把 Hyperframes 独有的、通用Web语料库里没有的工程陷阱提前喂给模型
效果是什么？你对 AI 说「做一个产品发布的 30 秒宣传视频」，它输出的 HTML 代码一次就能跑通。不需要你debug、不需要你调整时间轴、不需要你处理音画同步。
这不是「AI能写视频代码了」，而是「AI写的视频代码可以直接用了」。 前者是能力，后者是信任。说实话，用Remotion的时候我经常要花半小时debug AI生成的代码，用Hyperframes基本一次过，这个差距是实打实的。
七、选哪个？一张表就够了
不讲「谁更好」，讲「你该用哪个」。
| 你的情况 | 推荐 | 理由 |
|---------|------|------|
| 已有 React 技术栈，自己写代码 | **Remotion** | 组件复用是杀手锏，React生态直接迁移 |
| 要让 AI Agent 自动化生产视频 | **Hyperframes** | HTML 容错率高，Agent 技能包开箱即用 |
| 独立开发者做自媒体内容 | **Hyperframes** | 零构建、低成本、AI 一次跑通 |
| 需要 HDR 商业广告级输出 | **Hyperframes** | 双通道 HDR 合成，Remotion 不支持 |
| 需要复用现有 React 组件库 | **Remotion** | 设计系统直接转视频，这是 Remotion 的主场 |
| 团队已有前端工程师，不需要 AI | **Remotion** | 生态成熟、社区活跃、文档完善 |如果你有编程基础，或者团队已有前端工程师，Remotion的React生态优势确实不可替代。但如果你跟我一样，就想让AI帮你干活、少踩坑，Hyperframes的Agent原生设计目前更值得试试。
八、与其选择性困难，不如自己试试
视频即网页，渲染即排版。想让AI帮你自动化做视频，不妨今天就试试用Hyperframes或Remotion做出你的第一个AI视频吧。
