用代码做视频，HyperFrames 和 Remotion 到底该选哪个

两个框架我都在用，这篇文章是我经历过几十个小时实测之后的结论，由Claude读取我的全部历史会话记录编写。

HyperFrames 做了我 80% 以上的成片，Remotion 做剩下那 20% 的活。这不是因为 Remotion 不好——恰恰相反，那 20% 的场景换成 HyperFrames 反而做不了。

这篇文章把两个框架拆开讲透，说清楚什么情况选谁。

代码写视频是什么意思

HyperFrames 和 Remotion 做的事情是：你写一段前端代码（HTML 或 React），框架把它逐帧截图，拼成 MP4。

你在浏览器里能做的一切——CSS 动画、GSAP 时间轴、SVG 变形、Canvas 绑数据——都能变成视频画面。不需要剪辑软件，不需要手动对时间轴，代码改了重新渲染就行。

这在 AI 时代有一个巨大的优势：大模型能写代码，意味着大模型能做简单的视频。

我现在的工作流就是这样跑的——Claude Code 写脚本、出交接稿，Codex 写 HTML/React 渲染成片。我自己动手的环节只有审稿、录真人素材、选封面。

HyperFrames：写 HTML，出视频

HyperFrames 是 HeyGen 开源的框架，Apache 2.0 协议，完全免费。

核心思路极简：一个 HTML 文件就是一个视频。你用 data-duration、data-fps 这些属性告诉框架这个视频多长、帧率多少，用 GSAP 写动画（必须设成 paused: true），框架的渲染器不是播放动画，而是逐帧 seek 到对应位置截图，最后用 FFmpeg 拼成 MP4。

这个 seek 模型是 HyperFrames 最核心的设计决策。它意味着：

确定性。同一份 HTML 渲染出来的 MP4 逐帧一致，可以用 SHA-256 校验。不会出现「这次渲染和上次不一样」的问题。

AI 友好。HTML/CSS 是所有大模型训练语料里占比最大的代码类型。让 Codex 写一页 HyperFrames，比让它写正确的 React JSX 稳定得多。有实测数据：同一个 Claude Opus 测试，HyperFrames 的 GSAP 时间轴全部正确捕获，Remotion 的实时时钟模型导致动画提前结束、帧末留空。

零构建。没有 Webpack，没有 node_modules，改了 HTML 直接跑 npx hyperframes render。

HyperFrames 的短板

渲染不算快。30 秒 1080p 视频本地渲染大约 60 秒。比 Remotion 快（Remotion 同片要 160 秒 + 首次构建 4 分钟），但跟剪辑软件的实时预览比还是慢。

不能直接导入视频。这是关键限制。HyperFrames 的设计是「从零构建 HTML 画面」，不是视频合成器。你没法把一段 MP4 当底层画面、在上面叠组件。要合成视频得走 FFmpeg 外部操作。

生态早期。pre-1.0 版本（目前 v0.7.x），组件库还在建设中，Studio 编辑器没有可视化时间轴。和 Remotion 五年积累的生态没法比。

Remotion：用 React 组件定义视频

Remotion 是 2021 年就有的项目，54k GitHub stars，10k+ Discord 成员，五年生产验证。

它的思路也很直接：视频的每一帧是一个 React 组件的渲染结果。组件通过 useCurrentFrame() 拿到当前帧号，根据帧号决定画面长什么样。

渲染时 Remotion 用 headless Chrome 逐帧截图（和 HyperFrames 类似），FFmpeg 拼接输出。

Remotion 的杀手锏：原生视频导入

Remotion 有 <OffthreadVideo> 组件，可以把一段 MP4 直接导入为画面底层，React 组件精确按帧叠加在上面。

这意味着你可以做这样的事：底层是一段真人录制的口播视频，上面用 React 组件画标题卡、数据图表、进度条、代码高亮——全部和口播帧级同步。

HyperFrames 做不到这一点。它的世界里只有 HTML 元素，没有「导入外部视频作为画面层」这个概念。

Remotion 的短板

渲染慢。同样 30 秒 1080p 片，Remotion 本地渲染约 160 秒，加上首次构建 Webpack 还要 4 分钟。不过它有成熟的 AWS Lambda 分布式渲染，长视频可以切片并行跑。

构建步骤。改一行文字要重新跑构建再渲染。对 AI 自动化管线来说，这个等待时间不可忽略。

AI 写 React 容易出错。JSX 语法、hooks 规则、组件生命周期——LLM 在这些地方的出错率明显高于 HTML/CSS。我实际跑下来，Codex 写 HyperFrames 的成功率比写 Remotion 高不少。

企业要付费。Remotion 不是 MIT 协议。个人和三人以下团队免费，超过就要买授权，企业版 $500/月起。

性能实测对比

这组数据来自公开的 Claude Opus benchmark 和 Remotion 官方文档：

HyperFrames 在本地单机场景明显快。Remotion 在 Lambda 分布式场景可以通过并行补偿回来。

我的实际选型

说结论：两个都用，按场景切。

HyperFrames 覆盖的（占我产量 80%+）

白底页式讲解视频。我做 AI 教程的主力形态——白底 + 透视网格背景 + 信息卡片 + 插画，按口播词级时间戳逐个入场。HyperFrames 的 data-* 时间属性天然就是这个模型，paused timeline + 逐帧 seek 完美匹配「讲到才出现」的节拍。

连续舞台概念片。一种不换页的动画形态：所有概念做成组件，在同一个画布上装配、变形、折叠。HyperFrames 的单一 paused timeline 就是「一块恒定的画布」，不需要额外抽象。

短动效和视频组件。7 秒的品牌动效、标题卡、转场组件。快速迭代，改了直接渲染，不需要构建步骤。

数字人圆形头像叠加。HeyGen 生成的数字人视频已经是最终 MP4，用 FFmpeg 裁成圆形贴到主视频左下角就行，不需要帧级交互。

Remotion 守着的（那 20%）

全身出镜视频 + overlay 组件。这是 Remotion 不可替代的场景。当底层是一段真人录制的口播、上面要叠标题卡、流程图、代码高亮——需要 <OffthreadVideo> 把 MP4 导入为画面底层，React 组件帧级同步叠加。

实操长片的动画段。我做 B 站实操视频有个模式：全身出镜段全屏展示，录屏讲解段口播缩成左下角小窗。全身出镜段需要在真人画面上叠组件 overlay，只有 Remotion 能做。

批量数据视频。如果要用同一个模板批量生成几百条个性化视频（比如每个客户一条），Remotion 的 Lambda 批量渲染管线更成熟。

选型决策树

遇到一个新视频项目，按这个顺序判断：

底层有没有真人视频需要叠组件？

• 有 → Remotion。<OffthreadVideo> 原生导入 MP4 + 帧级组件叠加。

• 没有 → 继续往下。

是不是 AI Agent 自动化管线？

• 是 → HyperFrames。LLM 写 HTML 的成功率远高于 React。

• 人工为主 → 继续往下。

团队有没有 React 基础？

• 有，而且需要可视化调试 → Remotion。Studio 的时间轴 scrubber 很好用。

• 没有，或者不想维护构建工具链 → HyperFrames。零构建，上手快。

需不需要批量渲染几百条视频？

• 需要 → Remotion。Lambda 生态成熟。

• 不需要 → HyperFrames。单条渲染更快，免费。

一个容易踩的坑

有人觉得「HyperFrames 更新、肯定更好」或者「Remotion 星多、肯定更稳」。都不对。

这两个框架解决的问题有交集但不完全重叠。HyperFrames 的核心假设是「视频是 HTML 页面的时间轴展开」，Remotion 的核心假设是「视频是 React 组件的帧函数」。

前者天然适合 AI Agent 管线和从零构建的图形内容。后者天然适合在已有视频素材上做合成。

不要想着只用一个。我的做法是：HyperFrames 当默认，遇到需要视频合成的场景切 Remotion。工程上保持两条渲染管线并存，根据交接稿里的形态字段自动路由。

往期精彩

必看：Codex + Hyperframes + HeyGen +声音克隆：全部开源❗如何零基础开始自媒体变现

https://x.com/Pluvio9yte/status/2081580929492131947?s=20

我的 55 个 AI视频 Skill 全部开源，这是每一个的用法

https://x.com/Pluvio9yte/status/2081648099680743554?s=20

从 MiniMax 到本地声音克隆，再到数字人：一个人的 AI 视频生产线是怎么跑起来的

https://x.com/Pluvio9yte/status/2081929824256643221?s=20