用代码做视频：HyperFrames 和 Remotion 选型指南

✍ 雪踏乌云🕐 2026-07-28📦 9.2 KB 🟢 已读 𝕏 文章列表

文章对比了 HyperFrames 和 Remotion 两个代码生成视频框架。HyperFrames 基于 HTML/GSAP，零构建、AI 友好，适合从零构建的动画和 AI 自动化管线；Remotion 基于 React，支持视频导入叠加和批量渲染，适合在已有视频素材上合成。作者建议根据底层是否含视频、AI 参与度等场景按需选型。

视频生成前端开发工具对比 AI工作流 Remotion HyperFrames

# 用代码做视频，HyperFrames 和 Remotion 到底该选哪个 **作者**: 雪踏乌云 **日期**: 2026-07-28T08:13:32.000Z **来源**: [https://x.com/Pluvio9yte/status/2082016592872050945](https://x.com/Pluvio9yte/status/2082016592872050945) --- ![Image](/doc/3509/image/img_e343fe09fdfa.jpg) 两个框架我都在用，这篇文章是我经历过几十个小时实测之后的结论，由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 官方文档： ![Image](/doc/3509/image/img_030e7a7d19bc.jpg) 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 ## 相关链接 - [雪踏乌云](https://x.com/Pluvio9yte) - [@Pluvio9yte](https://x.com/Pluvio9yte) - [7.4K](https://x.com/Pluvio9yte/status/2082016592872050945/analytics) - [https://x.com/Pluvio9yte/status/2081580929492131947?s=20](https://x.com/Pluvio9yte/status/2081580929492131947?s=20) - [https://x.com/Pluvio9yte/status/2081648099680743554?s=20](https://x.com/Pluvio9yte/status/2081648099680743554?s=20) - [https://x.com/Pluvio9yte/status/2081929824256643221?s=20](https://x.com/Pluvio9yte/status/2081929824256643221?s=20) - [Upgrade to Premium](https://x.com/i/premium_sign_up) - [4:13 PM · Jul 28, 2026](https://x.com/Pluvio9yte/status/2082016592872050945) - [7,407 Views](https://x.com/Pluvio9yte/status/2082016592872050945/analytics) --- *导出时间: 2026/7/28 21:51:16*

🔗 相关文档