AI 做视频特效，用了 Remotion，我再也不想碰 Hyperframes
BYLINE / 作者 陈与小金 · 聚焦 AI 编程 · 运营干货 · 效率提升
我最近 4 期视频的特效全是 Vibe motion 做的：前两期用 Hyperframes，后两期换成 Remotion。这篇把两个框架放在同一条视频、同一套提示词下实测一遍，讲清三件事——我平时怎么指挥 AI、交流时要注意哪些点，以及为什么实测之后我选了 Remotion。
先认识两个框架
Hyperframes 的热度来自三点：HeyGen 出品、主打 AI 视频、免费开源。Remotion 在个人及 3 人以内小团队场景下同样完全免费。
放到一条视频上，两者的差异集中在三处：
为什么同一句提示词，Remotion 往往能更快反映出你要的效果？ 因为 Remotion 出现已经很多年，在大模型训练语料里的比例特别高； Hyperframes 刚出来不久，相关语料基本都来自 HTML 制作。 落到模型权重上，Remotion 天然比 Hyperframes 高出一截。
上：HyperFrames 官网（hyperframes.heygen.com）「写 HTML，渲染视频，专为 AI agent 设计」；下：Remotion 官网（remotion.dev）用 React 以编程方式制作视频
HeyGen 官方《Hyperframes vs Remotion》对比页节选，含逐项对照的 At a glance 表
怎么选：只比两个成本
这两个工具都靠 AI 指挥，所以选型只需要看两件事：
- 调试要投入的精力
- 消耗的 token 成本
实测就围绕这两点，看在真实制作流程里，哪个工具更能交付可用的视频。
实测设置：左边 Hyperframes，右边 Remotion，喂同一段视频（这期开头那段）和同一套提示词。为了更直观地看出区别，两边都不开计划模式，相同内容直接发送。
这里故意留了一个不对等：Hyperframes 我做过很多视频，给它配了专门的 Skill；Remotion 才做两条，还没配新 Skill。让占优的一方用上 Skill，反而更能看清两个框架本身的制作能力。
实测过程里发生了什么
识别类型、复用历史。 两边都先识别视频类型、去仓库找现成素材。Remotion 还多了一个关键发现：我五天前那条视频里有一段一样的口播，可以直接复用。
取向不同。 Hyperframes 倾向网页那套（HTML 的另一种写法）；Remotion 一上来就给口播配了动态特效、浮卡标注、运镜、对比。这条口播本身就有对比内容、卡片、运镜和 B-roll 对比，相同提示词发过去，Remotion 几乎立刻把这些反映了出来。
流程差异。 Remotion 先写文档，我确认没问题后它再写详细的实施计划，比 Hyperframes 慢一步（多了写文档这步）；Hyperframes 这边直接开干。
完成度差距。 前 30 秒做完，Remotion 拉起本地预览，效果已经能用；Hyperframes 整条都不太对——它把「特效全部由 Claude Code 生成」这句直接盖在我人物上、把人挡住了，从 10 秒到 36 秒整段没有任何动效，这时它已经吃掉 54% 的上下文。
Hyperframes 也有一个亮点：官方示例它能直接从仓库里拔出来（因为我本来就在它的官方仓库里，有对应素材）；Remotion 没有这层，只能用我给的截图。
收尾阶段。 两边把剩下的补完，Remotion 用了 7 分钟，Hyperframes 用了 14 分钟。Hyperframes 后半段虽然多加了几张卡片，但实际播放时出现大片大片的空白，口播一直钉在右边没有任何变换。那段卡片本身的效果是好的，比 Remotion 强——因为 Remotion 除了那一段之外，基本没再做卡片内容。
谁更快更省
渲染导出走的是本地算力，不消耗 token。半成品阶段的实测数据：
Remotion 的花费明显更低，时间也少了约 20 分钟。它做出来的效果如果要求不高，可以马上投入使用。
Hyperframes 还能继续打磨，但要把它磨到同等水平，投入的时间和金钱远大于产出，ROI 很低。
做到完整成品时，Remotion 累计 43 刀、成片约 1 分 24 秒；Hyperframes 停在半成品状态、28 刀。
结论
不论是时间成本、token 成本，还是最终的视觉效果，Remotion 都更可控、更省。半成品阶段如此，完整成品阶段也如此。如果没有大的技术革新，我应该不会再用 Hyperframes 了。
我平时怎么指挥 AI（可复用的操作要点）
这部分是真能省钱省时间的地方，和具体框架无关：
- 只做开头 20–30 秒当样板。 先在开头调好，后面整条直接复用，而不是一上来就做整条。整条做首先耗时长，其次效果是个黑盒，能不能用没法预测。
- 把三件事写进第一条提示词。 先转写口播拿到逐字稿和时间码、产物形态（透明叠加层还是完整 mp4）、占位策略（先压 720P 制作、满意后再导 4K），这三件事写在提示词最前面，能省掉中间一堆来回。
- B-roll 形式让它先给方案再选。 它给了三种：左右分屏的对决、人居中两侧是 B-roll 浮卡、全屏快切的蒙太奇。我选了人居中。选定后它先用占位搭好结构，之后再替换成真素材。
- 讲清产物形态，这是两个框架最大的工作流差异。 Hyperframes 我让它渲染成透明背景叠加层、自己拿去剪（早期发现带着口播做整片很难调）；Remotion 能把视频直接放进去剪，我就明确要一个完整 mp4。
- 调具体效果，用图不用嘴。 找一张想要的效果截图发给它，甚至直接画一个。比如我要求：700 帧时让 Hyperframes 以卡片形式出现，口播在右、文字在中做成卡片样子，左边卡片放官方视频示例——官方那段我录下来、把链接也一起给它。
- 口述说不清就用生图模型补刀。 觉得自己讲不明白时，找个生图模型（任意都行）。我给它一张截图说「人物放右、卡片放左、背景不变」，生成的图完美符合，再拿这张图发给 AI 去改。一个教训：调图时就该让它把文字一起改掉，能省一轮 token，我当时漏看了，白费一轮。
- 别让它自动渲染成片。 Remotion 没给我看效果就要先渲染，我选 No，让它只拉起本地服务、我现场调试。Hyperframes 踩的坑我早犯过——浏览器里用谷歌字体、本地没有、渲染后字体错乱，这条我记在规范文件里，它现在能直接复用。
- 和它探讨，别一次性把指令砸下去。 后续我只调 Remotion。比如直接问它「为什么 30 秒到 1 分 22 秒的动效都在复用前面、没按语义做新效果」，从它的回答里挑出要的和不要的。
- 找素材让它上网，并去看官方/开源模板。 视频类的给链接、我录给它；HTML 代码块这种它能直接做。Remotion 出现得早，你能想到的效果大多有人做过，区别只在收费还是免费。
- 音效也能交给 AI。 让它搜音效网站、给到你的工具，它能按音效命名帮你放到对应位置。
- 越做越省。 两边都会先扫仓库里已有的文件和模板，有可复用的就复用。频道定好基调、边做边改，做得越多，单条成本越低。
SIGNED
我是陈与小金
祝你身体健康，永远平安。
祝你 Token 无限，永远自由。
2026 · 06 · 05
THANKS FOR READING →
本期到这里。如果对你有帮助，欢迎评论转发。
原始逐字稿（备查）
以下为视频口播逐字稿（已做字幕错别字修正，内容未改写），原样保留备查。
我最近四期视频的特效全部都是 Claude Code 做的，前面两期用的是 Hyperframes，然后后面两期用的是 Remotion。如果你也想使用 AI 去帮你做视频特效，那么本期视频将会完全的毫无保留的分享给你，我平时是怎么指挥 AI，以及在交流的过程中你需要注意哪些。
首先简单的介绍一下他们两个。Hyperframes 的热度来自于三件事：首先 heygen 出品，然后 AI 视频，然后免费开源。但是 Remotion 在个人使用的场景下也同样是完全免费的。Hyperframes 仍然是由秒数来控制视频运动的，而 Remotion 是由帧率来控制的。也就是说当你想要更好的一个效果时，帧数控制是远比秒数控制来得更精准的。
然后是第二个差异点：Hyperframes 主要是写网页这一类的东西，在制作上面确实更方便，但是也就造成了它的一个效果简单；而 Remotion 从出现到现在已经很多年了，所有你能够想到的动画效果都已经有人用 Remotion 做出来过了。然后第三个差异点就是调试的精力。如果你想要做一个复杂的动画效果，在 Hyperframes 上所需要投入的一个精力是远要大于 Remotion 的。
那么我们应该如何去选择呢？首先这两个工具都是由 AI 去指挥控制的，所以你只需要考虑两个点：第一个就是你调试的一个精力难度，第二个点就是你消耗的一个 token 成本。本期视频我们来实测一下，在真实的视频制作工作流程里面，哪一个工具能够更好的满足于你的一个视频产出。
可以看到我的左边这边是 Hyperframes，而我的右边呢是 Remotion。我会同时给到他们相同的一个视频，也就是我们刚刚开头的那一段，以及同样的一个提示词，这样去进行真实的一个视频产出。然后为了更直观的看到他们两个的一个区别，所以我这边就不开计划模式了，两边都是一个相同的内容直接发送。
可以看到我的左边这里呢，它是激活了我的一个视频制作的一个 Skill。Hyperframes 呢我已经做过很多视频了，所以我给它做了一个 Skill；而 Remotion 这边呢我才做了两条视频，我还没有给它做好一个新的 Skill，这更能衬托出他们的一个视频制作的能力。Hyperframes 这边它是识别到了我的一个类型，然后会去查一下有没有现成的 Hyperframes 和 Remotion 的一个 logo。OK 现在 Remotion 这一边也出来了，并且呢它还有了一个关键的发现，也就是我五天前做的那一条视频是有一样的、是可以复用口播的。也就是说你之前做过的一些内容，它在后面是可以复用的。这样子的话你只需要把你的频道全部定好一个基调，然后在你制作的过程中不断的进行修改，那么你后面的视频就会制作的越来越好。
我们可以从它的一个片头类型和片头方向就可以看得出来：Hyperframes 这边它更多的就是倾向于网页类型，也就是 HTML 的另一种方式去做；而 Remotion 这边呢它是可以看到给我的口播加动态特效、浮卡标注运镜对比这些的。然后这里的话我两边都不会选。我这一条口播的视频首先它是有对比内容、有卡片、有运镜，然后呢还有 B-roll 的一些对比。同样的两边发送过去，当我说出了这个内容之后，我们可以很明显的看到 Remotion 这一边它其实是能够马上的反映出来它里面的一些内容的。
那么为什么会有这样的一个情况呢？因为我们要知道 Remotion 已经出来很多很多年了，所以它在大模型之中的一个训练比例是特别高的；而 Hyperframes 它是刚出来没有多久，针对于它的一个训练的语言都是基于网页制作来的。也就是说在大模型的权重里面，Remotion 就天然要比 Hyperframes 要高的很多。
然后我们可以看一下 Remotion 的两个问题。问题一：还是说像上次一样只做开头一段，然后只用 20 到 30 秒当样板。这个的话我一般在做视频的时候都是会只做开头的一段，这样子我可以在开头去进行调整，然后后面的视频就可以完全的复用开头的那个内容了，而不是一上来就完整的做。因为如果你要完整的做，那么首先耗时更久，然后效果你也不知道，它完全是一个黑盒，它做出来可用还是不可用你都是没有办法去预测的。所以我这边会选择 A。包括这一个 B-roll 的形式它觉得应该怎么做，然后给了我三种方案：首先第一种左右分屏的对决，还有人居中两侧是 B-roll 的一个浮卡，还有全屏快切的蒙太奇。我这里的话就选择人居中。在我选择好了之后它会直接有一个先用占位搭好结构，之后再补入、补入了直接替换。开头这二三十秒我大概在讲什么，我这里的话选择 2。
然后两边都是殊途同归的，因为他们发现都是需要去看到我的一个内容之后，才能够对应上我的卡片。这一点我觉得是没有问题的，所以这边也是同样的让他们先转写口播。这一步的话，其实我们是可以在制作视频最开始的提示词里面就把它写好的。比如像这样你在最开始发送视频之后呢，你可以直接先让它转写，拿到视频的一个逐字稿时间码，这样子的话刚刚我们所发生的这几步路你都是可以跳过的。
Hyperframes 这边已经转写完成了，并且呢他也看到了我这个片子的一个内容地图，然后也给对应的一个时间 map，写上了一些内容，然后默认用达芬奇，本仓库一贯如此。为什么我会这样子做呢？因为在我最开始做这个 Hyperframes 的时候，它的效果真的是特别的差，就是如果说你是带着视频口播去做完整的视频的话，那么很难调，所以我让它去渲染成了透明背景的叠加层，然后我自己去调。Remotion 呢，它就是可以把视频直接放进去剪的。
所以我这里我就会明确的给他们讲，我要做成一个完整的 mp4 的视频。然后你在制作的时候，由于我的原视频是 4K 的，我最终要导出的也是一个 4K 的视频，但是你在制作的过程中你可以先把视频压缩成 720P 进行占位，在所有的视觉效果我觉得满意了之后，你在渲染导出的时候把它导出成 4K。同时这一句话你依然是可以把它放到你的提示词最前面的。然后你得到的一个提示词应该是这个样子。
这边都是在做同样的一个动作，就是先去跑我之前产出的一些视频结构是什么样子的。Hyperframes 这边呢是看到了背景和叠加脚手架，包括对比卡渲染以及一些零件；然后 Remotion 这边呢也看到了我之前另外一条视频的一个制作的结构，并且模板也是之前做好的一个机制。然后这边我觉得是没有什么问题的，两边我都同时确认了。他们的一个逻辑都是先去进行扫描我仓库里面之前的一些文件以及内容，但有可复用的他们会复用。你使用他们制作视频制作的越多，那么你的一个视频制作的成本就会越低。
然后 Remotion 这一边呢，它是先写了一个文档，文档我觉得没有问题了之后，它又写了一个详细的实施计划。也就是说对比下来 Remotion 这边是要比 Hyperframes 这边要慢一步的，就是要多了一个写文档的步骤；然后 Hyperframes 这边呢它已经开始做了。然后它这里的两个方式，如果说你是在自己制作的一个过程里面，你对于你之前的一些模板特别的自信的话，你是可以选择第二种方式去做的。我这里的话就选择一，我们开始吧。
我们现在可以看到在 Remotion 这边，它没有给到我一个效果的展示，就想要先渲染一个出来的。然后这个时候呢我是不想让它渲染的，所以这里我选择 No，我说我不要你渲染成成片给我，我只需要你拉起来本地的服务，我去现场去观看调试就行。而在我们的 Hyperframes 这边，它其实也快搭完了，但是它遇到了一些问题，这些问题呢都是我之前已经犯过的错。比如说它在浏览器里面拉起来用到的字体是谷歌的字体，但是呢由于我本地没有，所以它渲染之后呢是会发生字体的错乱的。这一点也是记录在我的一个规范文件里面，所以它现在是可以看到的，这样可以直接复用我上一条踩过的坑的一个经验去产出。
我们现在这一边 Remotion 这一边，它已经是做完了前面 30 秒的一个动效，然后我拉起来我们快速的预览一下，它的一个效果能不能够达到初步的使用。我觉得效果还可以，唯一让我不满意的地方其实是 Hyperframes 的这一个地方。我觉得这个地方如果说是放官方的一个示例图在这个位置的话，效果会更好，然后这个卡片是在中间，然后把我的人物它再小一点。
然后我们同时来看一下 Hyperframes 这一边，整体快速的拉看一下，然后它是一整条视频，但是它的这一些内容做的都不太对。包括这里它说出特效全部是由 Claude Code 生成的，它直接把这一段呢覆盖在我的人物上面，直接把我人物给遮挡了。包括从 10 秒到 36 秒这一个过程它是没有任何动效的。
那么我应该如何去调试你的视频的最后成果呢？你只需要去找到你想要实现的一个视频动画的一个效果，把截图发送给他，甚至你还可以像我一样直接画一个出来，再写上一个人，把这一张图片发送给你的 AI。在 700 帧的时候，我想让 Hyperframes 出现的时候是一个卡片，就跟我给你的截图一样，我的口播呢是在右边，然后那些文字他们是在中间，然后做成卡片样子的，左边的卡片放的是 Hyperframes 官方的一个视频的示例。把官方的这一段视频录下来，同样的也是把这个视频链接给到它。然后这是我录的一段官方的素材，如果你觉得这一段素材可以的话，你挑选一个片段把它放进去；如果你觉得这个素材不行的话，你自己去官方抓取一段对应的素材，放到我们的视频制作里面。把同样的内容和图片也一起发送过去。
然后我们可以很明显的看到现在的一个区别，Hyperframes 这边它已经用掉了 54% 的一个上下文。当然最后消耗的一个 token 和时间，我们会在最后进行一个整体的对比。现在两边都是产出了一个相同的结果，我们再次回到浏览器去看一下，快速的过一下。这最后一个我们刚刚修改的地方，可以看到它是很完美的去展现了我要的一个内容。
然后我们去看一下 Hyperframes 这一边，直接拖、播放一下吧。OK 这里其实它是展现了一个官方示例，它是直接从它的仓库里面去拔出来的，因为本身我就是在 Hyperframes 的一个官方仓库里面，所以它有对应的一个仓库；然后 Remotion 这一边没有，所以它只能够用到我的一个截图。那么这一点上面的话，我觉得 Hyperframes 的这一个它是做的是比较好的。
两边我都觉得差不多了，然后我现在会给他说：我看到这一段的一个效果了，所以我觉得你应该整一条视频都做成同一种风格，然后产出一个完整的视频给我。同样的你不要渲染导出，你只是进行修改，然后我在网页端看完确认了之后再导出。为什么我要让他们现在同时做齐呢？因为可以看到，现在我的 Remotion 这一边的完成度很明显要比我的 Hyperframes 这一边的完成度要高很多的。
然后现在我们整体的已经完全做完了。Remotion 和 Hyperframes：Remotion 这边是花了 7 分钟把剩下的去做完了，然后 Hyperframes 是花了 14 分钟把剩下的做完了。我们先来看 Remotion 的吧，我们重点就从刚刚的 30 秒往后去看，然后我拉一下。Hyperframes 的这一边的效果同样的也是从 30 秒这一个位置往后去看。Hyperframes 这边它后面虽然是有多加了几个卡片，但是这几个卡片在真正播放的时候，你会发现是出现了大片大片的空白的，然后同时口播是一直在右边没有进行任何的一个变换。然后还有这里出现一个对我来说是比较莫名其妙的一个卡片。不过这一段卡片的效果它是没有问题的，它是比 Remotion 要做得好的，因为你可以看到我们 Remotion 除了这一段之外，它是没有在做卡片的内容了，然后就这一点它也没有做卡片的一个内容。
用实际的数据去对比一下它们两个的一个实际的情况消耗吧。我们现在看一下 Hyperframes 这边，因为在最后渲染导出的时候，它其实是调用你本地的一些算力去导出，导出渲染之后它是不会消耗你的 token 的。我们可以看一下，Hyperframes 这边一共是消耗了 28 刀，总共花费是两个小时，实际运动的时间是一个小时两分钟；然后 Remotion 这边总共的花费是 19 刀，然后实际运行的时间是 43 分钟，窗口打开的时间也是一样的，可以看到这边打开了一个小时 50 分钟。Remotion 的一个花费比 Hyperframes 的一个花费要少很多，少的 20 分钟。这一个做出来的效果，如果你的要求没有那么高，它是可以马上投入去使用的；但是 Hyperframes 这一边你可以继续打磨把它打磨得更好，但是投入的这一个时间和金钱是远远的要大于你的产出的，也就是说它的 ROI 性价比贼低。
所以最后我们可以看到，你不管是从消耗的一个时间成本，还是说你消耗的一个 token 成本，或者说最终产出的一个视觉效果，Remotion 是要比 Hyperframes 更加可控，并且更加节省成本以及节省时间的。
在后续的话，我就不会再对 Hyperframes 这一边进行继续的一个调试了，我会在我的 Remotion 这一边进行一个调试。然后这里的话我会去问他一个问题，就是为什么在 30 秒之后一直到 1 分 22 秒之间，所有的视频动效都是复用了前面的内容，没有根据语义去做一些视觉效果呢。如果这里你有一些很好的参考的话，你也可以像刚刚我们第一版那样，把你的参考截图丢过去然后让他去做。然后你也可以像我这样去问他为什么没有，因为你每一次做的视频的模板你后面都是可以复用的。所以我的使用方式是更倾向于和他去探讨出来正确的一个做法，因为很多时候你都可以从他给出来的一个答案里面，去寻找你真正要的和不要的内容。
然后这里你不想要去找一些素材的话，你可以告诉他：我希望你可以从网络上面去找到对应的素材放在里面。如果说是视频的话，你可以直接给我链接，我去录制给你；如果说是其他的一些效果，比如你说的那一个展示一段 HTML 的代码块的话，我觉得你是可以直接做出来一个展示的内容的，你可以去看一下社区开源的一些项目，或者说 Remotion 官方的一些模板里面，我觉得应该是有这种内容的。当你不知道的时候，你一定要让他去网络上面找对应的素材，以及一定要让他去看官方的社区以及一些开源的社区的项目。因为 Remotion 就如我开头所说，它已经出现很久了，所以你能够想到的以及市面上很多的效果都是有人已经做出来的，区别只在于它是收费还是不收费。
OK，这里我们可以看到它最终的三个语义视觉已经做好了，我们现在去看一下。我们最终看到的一个效果，对我来说我觉得是比较满意的。这里的话我们把它去掉这两个素材，就是他觉得应该放的。首先我是把它的第一段素材的录屏给录下来了，包括案例墙的这一个视频我也给录下来了，同时我还把之前我们提到的内容、这里的一个占位图的一个截图也给保存下来了，一起给到它。然后其他的地方我就觉得没有什么要修改的了，我们就直接发送给它。
我们现在来整体的看一下，然后我觉得这一个点的一个效果我不是特别的喜欢，我想让它这个样子：我的这个人物从这边再挪到这一边。然后这里有一个很重要的点，当你觉得你自己口述也说不太明白的时候，去找到一个生图模型，任何都可以。比如我这里我就直接告诉他，给了他这一张截图，然后给他说把人物放到图片右边、卡片放到左边、背景保持不变。然后我们可以看到这里大模型生成的一个图片是能够完美地符合我们想要的一个效果的，我们就可以直接把这两张图片截个图，然后让它去修改。
在他把图片调整正确之后，我发现下面有这么一个问题，就是他的文字还是错的。然后这一点的话，其实刚刚我们可以在调整图片的时候就让他同步去调整，这样的话你会省一轮的 token，但是我刚刚没有看到，所以就浪费了一轮 token。
现在视频已经做好了，然后还有音效没有配。音效同样也是可以让 AI 去配的，你们可以让 AI 去帮你们搜索一下音效的一些网站，然后给到你的 AI 工具，它也能够通过你的音效的命名帮你去把它放到对应的一个位置。
然后现在我们整体的来看一下，整个视频做完之后的一个 token 消耗，我们可以看到是 43 刀，然后总共运行时间是 1 分 24 秒。Hyperframes 这边做的一个半成品它就消耗了 28 刀，所以结果就显而易见。不管是刚刚半成品的状态，还是说现在完全品的一个状态，我觉得 Remotion 都是要比 Hyperframes 强的。如果没有什么重大的技术革新，我觉得我应该不会再去使用。所以这就是我的一个结论。如果对你有所帮助的话，那么就点赞评论转发，我们下次再见。对了，我的两个视频制作台的一些文档我都放在了我的 GitHub 上面，如果你们有需要的话可以去 GitHub 上面自取。
本文首发于人人都是产品经理，原文发布于 2026-06-06。