Remotion 生成原理很简单，就是**“用 React（一个前端框架）写动画”**，所有动画都来自当前帧数，从而实现逐帧处理的逻辑。

1. Remotion 相关背景

当然为了写这篇文章，特意了解了下 Remotion 的背景，惊讶发现这个项目实际起源于2021 年，比 ChatGPT 还早，详见这个视频，是他们创始人在 YouTube 上分享使用 Remotion 实现 Spotify Wrapped 2020。

为什么现在火起来了呢？

也很容易理解，看作者 2021 年的实现视频是2 小时+，但是有了 Claude Code 加持，可以看到他的 Spotify Wrapped 2025 变成了4 分 39 秒😂

所以一个高门槛的项目有了AI 加持，变得全民普及了。

2. 实践教程

今天又实现了一个类似的视频，我们就以此为例：

2.1. 安装

选择一个目录安装该项目库：

npx create-video@latest

会让你选一个模板，这个随意就好。

安装配套的 remotion-dev/skills：

npx skills add https://github.com/remotion-dev/skills --skill remotion-best-practices

当然也可以直接安装 skill 然后让 AI 帮你安装项目库。

2.2. 视频制作

2.2.1. 使用 Code Agent 创建基础动画

使用 Claude Code 或者 Cursor 等任意 Agent（后面统称 Code Agent），输入如下提示词：

使用 remotion-best-practices skill 创建一个终端安装 npx skills add
https://github.com/cclank/news-aggregator-skill
--skill news-aggregator-skill 的演示动画视频，孟菲斯配色风格，打字机效果

然后你就可以先让 Code Agent 帮你启动这个项目，就可以看到如下界面，可以看到一个简单的视频就实现了，你可以根据自己的喜好告诉 Code Agent 进行微调，比如配色、播放速率、画面运转等等。

2.2.2. 实现执行过程展示场景

第二个提示词如下：

我希望续写这个视频。接下来是终端以一种动态翻书扩散到整个视频页面，然后进行展示命令执行过程。过程数据如下，注意要逐步显示，有一种真实安装的感觉，执行过程数据如下：

Selected 1 skill: news-aggregator-skill

...后面省略（真实情况需全部粘贴给code agent）

注意：过程数据需要自己真实安装执行获取。

2.2.3. 嵌入跳舞视频

将跳舞视频嵌入到我们的视频里，提示词如下：

将这个视频完美嵌入到视频右侧 '~/Downloads/跳舞小视频.mp4'

PS：这个跳舞小视频需要自己找资源下载，我是通过抖音里找了一段，下载到本地，将路径告诉 Code Agent 即可。

2.2.4. 微调嵌入视频效果

后面就是个人喜好的微调了，比如我想 Code Agent 帮我实现一个裸眼 3D 的效果，提示词如下：

大概在270帧的时候，我希望将嵌入的视频向左copy两次（带有动画特效），大概撑满屏幕实现裸眼3d的效果画面

2.3. 视频导出

方式一：直接告诉 Code Agent：将目前的视频丝滑地渲染出来。视频保留到当前目录。

方式二：在浏览器页面，找到 Render 按钮，渲染导出即可。

完事～

实现逻辑一张图表示：

当然，里面有不少需要微调的地方，需要自己根据视频效果去调整，尤其是做一个好的视频，还是需要对话多轮的。

但基本上通过自然语言就可以实现逐帧编辑的效果，这个很赞。

3. 资源推荐

Remotion 官方还有很多新的玩法和教程，详见这个链接，前期可以根据喜好来模仿学习：

https://www.remotion.dev/docs/resources

4. 附项目开源地址

• Remotion Skills：https://github.com/remotion-dev/skills
• Remotion 主项目：https://github.com/remotion-dev/remotion