Remotion 是一个基于 React 的程序化视频框架：用 React 编写画面，用帧数控制动画，最后渲染成视频。

下面这张图先看懂它的基本关系：左边是代码，中间是时间轴，右边是生成的视频。

它适合制作片头、产品介绍、知识讲解、数据动画、字幕视频和批量视频。

一、示例效果

公众号发布时，需要把 MP4 上传为视频素材；这里的 video 标签只用于本地预览。

这个视频是 1080×1920、12 秒的竖屏短视频，包含：

1. 标题淡入和上移动画
2. 数字从 0 增长到 10
3. 进度条从 0% 增长到 100%
4. 片尾按钮弹簧动画

二、安装插件

Remotion 是用代码制作视频的框架。Remotion 插件安装在 Codex 中，用来辅助创建项目、组织时间轴、预览和导出。Studio 是 Remotion 自带的预览界面。

安装

在 Codex 左侧边栏点击 插件。入口就是下图红框标出的按钮：

进入插件页面后，在 Creativity 分类中找到 Remotion。点击 Remotion 卡片右侧的 安装 按钮。位置如下图红框所示：

显示“已安装”或“已启用”时，不需要重复安装。

安装完成后，先检查电脑上的 Node.js 环境。

三、准备环境

Remotion 项目需要 Node.js 和 npm。打开终端，执行：

1
2
node --versionnpm --version

两个命令都返回版本号，就可以继续。如果提示找不到 node 或 npm，先安装 Node.js 的 LTS 版本，再重新打开终端。

四、Remotion 的特色功能

1. 每一帧都能控制

画面、位置、透明度、缩放和旋转都可以由帧数计算，动画时间精确到单帧。

2. 模板可以复用

标题、字幕、进度条、图表和片尾按钮都可以写成组件，在不同视频中重复使用。

3. 同一模板可换内容

把标题、作者、阅读量、价格或排名作为参数传入，同一套模板可以生成不同视频。

4. 素材和字幕都能放进时间轴

可以加入图片、视频、音频、字幕、GIF、Lottie 动画和本地字体。复杂项目还可以加入转场、图表、地图和 3D 场景。

Studio 用来查看画面和时间轴。确认后可以导出 MP4、WebM 或单帧图片。

五、使用示例：从创建到导出

下面用一个 12 秒竖屏视频走完整流程。

第一步：生成项目

新建一个 Codex 对话，直接发送下面这段话：

1
2
3
4
5
在当前工作区创建 remotion-demo 项目，使用 Remotion 制作一个 1080×1920 的 12 秒竖屏视频。主题：用代码做视频。画面：标题从下方淡入；数字从 0 增长到 10；中间有进度条；最后出现一个片尾按钮。风格：深色背景，蓝色为重点色，中文字体清楚。项目完成后先停下来，不要导出视频。

Codex 会创建项目和视频代码。

第二步：打开 Studio 检查结果

项目创建完成后，发送下面这句话，让 Codex 打开 Studio：

1
打开 Remotion Studio，我要拖动时间轴检查效果。

Studio 打开后，在左侧点击 RemotionIntro。中间是视频画面，底部是时间轴。拖动时间轴，检查文字、数字和片尾动画是否正常。

如果 Codex 没有打开 Studio，进入项目目录手动启动：

1
2
3
cd remotion-demonpm inpx remotion studio --no-open --port=3100

第三步：修改画面

这个示例主要修改 src/Composition.tsx。最简单的方式是直接告诉 Codex：

1
把标题改成“让文章动起来”，副标题改成“把公众号内容变成视频”，数字改成从 0 增长到 100000。保持当前版式和动画。

如果想自己修改，先打开这个文件：

1
D:\微信公众号\remotion-demo\src\Composition.tsx

下面的代码只用来说明各个参数的作用，不要把这一小段单独复制到文件中：

1
2
3
4
5
6
7
8
9
10
11
12
<Composition  id="RemotionIntro"  component={MyComponent}  durationInFrames={360}  fps={30}  width={1080}  height={1920}  defaultProps={{    title: "用代码做视频",    subtitle: "Remotion = React + 时间轴 + 渲染",  }}/>

width 和 height 是画布尺寸，fps 是每秒帧数，durationInFrames 是总帧数。360 ÷ 30 = 12。横屏使用 1920×1080，竖屏使用 1080×1920。改标题和副标题时，修改 defaultProps 里的文字即可。

动画和场景也按帧控制。interpolate 用来让数字、透明度和进度条连续变化。完整项目中，frame 来自 useCurrentFrame()：

1
2
3
4
5
6
7
8
const frame = useCurrentFrame();const metric = Math.round(  interpolate(frame, [70, 180], [0, 100000], {    extrapolateLeft: "clamp",    extrapolateRight: "clamp",  }),);

第 70 帧开始增长，第 180 帧到 100000。30fps 下，30 帧等于 1 秒。

用 Sequence 安排场景出现的时间：

1
2
3
<Sequence layout="none" from={45} durationInFrames={230}>  {/* 数字和进度条 */}</Sequence>

from 是开始帧，durationInFrames 是持续帧数。需要弹性进入效果时，使用 spring。保存后回到 Studio，画面会自动更新。

第四步：按需加入素材和字幕

这一步不是必做的。需要加入图片、音频或视频时，把文件放进项目的 public 文件夹：

1
2
3
4
public/├─ logo.png├─ background.mp4└─ music.mp3

引用本地素材：

1
2
3
4
5
import { staticFile } from "remotion";import { Audio, Video } from "@remotion/media";<Video src={staticFile("background.mp4")} /><Audio src={staticFile("music.mp3")} />

如果项目还没有媒体组件，从项目目录执行：

1
npx remotion add @remotion/media

有字幕文件时，把 .srt 放进 public，再告诉 Codex：

1
把 public/captions.srt 加入视频，显示在底部。字幕按句切换，当前句用蓝色高亮。

如果没有字幕文件，但有音频需要生成字幕：

1
根据 public/voice.mp3 生成中文字幕，并放入 Remotion 时间轴。

第五步：确认并导出

回到 Studio 检查文字、素材位置和动画。确认后导出 MP4：

1
npx remotion render RemotionIntro out/remotion-intro.mp4

视频会保存到项目的 out/remotion-intro.mp4。

渲染单帧图片：

1
npx remotion still RemotionIntro out/remotion-intro.png --frame=120

单帧图片会保存到 out/remotion-intro.png，用于检查文字、字体、素材位置、颜色和空白画面。

六、进阶：批量生成

完成单条视频后，再考虑批量生成。同一套画面可以换标题、数字、颜色和素材。

例如把文章数据写成：

1
2
3
4
5
{  "title": "让文章动起来",  "subtitle": "把公众号内容变成视频",  "views": 100000}

再告诉 Codex：

1
把这份 JSON 作为 RemotionIntro 的输入。保留动画和版式，只替换标题、副标题和阅读量。

需要生成多条视频时，把多份数据交给 Codex，并说明每条视频的输出文件名。

七、常见问题

找不到 Remotion 插件怎么办？

点击 Codex 左侧的“插件”，在 Creativity 分类中搜索 Remotion。如果已经显示“已安装”或“已启用”，直接进入第五点创建项目即可。

输入 node 或 npm 没有反应怎么办？

说明 Node.js 没有安装，或终端还没有加载新的环境变量。安装 Node.js 的 LTS 版本后，重新打开终端，再执行：

1
2
node --versionnpm --version

Studio 打不开怎么办？

先确认终端当前位于 remotion-demo 项目目录，再执行：

1
2
npm inpx remotion studio --no-open --port=3100

如果 3100 端口已被占用，换成 3101，并打开终端显示的新地址。

左侧没有 RemotionIntro 怎么办？

通常是项目目录不对，或者 Codex 没有完成项目创建。回到创建项目的对话，发送：

1
检查 remotion-demo 项目是否创建完成，并启动 Remotion Studio。确认左侧能看到 RemotionIntro。

修改代码后画面没有变化怎么办？

先保存 src/Composition.tsx，再回到 Studio 等待更新。如果仍没有变化，关闭 Studio，进入项目目录重新执行启动命令。

导出时报错怎么办？

确认当前终端位于 remotion-demo 项目目录，并且左侧的组合名称是 RemotionIntro。再执行：

1
2
npm inpx remotion render RemotionIntro out/remotion-intro.mp4

为什么中文显示不正常？

先检查代码中是否指定了中文字体。也可以把字体文件放进 public，再让 Codex 加载这个字体。