从零理解 Remotion：安装项目、认识文件结构、跑起第一个视频
如果你会 React，又想做可复用、可批量生成的视频，Remotion 是一个很自然的选择。它不是让你在网页里嵌播放器或录屏幕，而是让你用 React 组件描述每一帧画面，再把这些画面渲染成视频文件。
这篇文章先不去讲复杂动画。我们先把第一件事讲清楚:一个 Remotion 项目从哪里来,安装后有哪些文件,Root.tsx 为什么重要,以及第一个 Composition 到底是什么。
Remotion 是什么
Remotion 可以理解为"用 React 写视频"的工具链。你写的仍然是组件、props、样式和 TypeScript,但最终产物不是网页,而是视频。
它适合这些场景:
- 短视频模板
- 产品介绍视频
- 口播字幕视频
- 数据报告视频
- AI 批量生成视频
- 需要参数化换标题、换素材、换主题色的视频
传统剪辑软件适合一次性创作。Remotion 更适合把视频做成模板,输入不同数据,生成不同视频。
创建一个 Remotion 项目
新项目可以用官方脚手架创建:
npx create-video@latest
进入项目后安装依赖并启动 Studio:
npm install
npm run dev
npm run dev 会打开 Remotion Studio。你可以把它理解为视频开发时的预览工具,左侧选择 Composition,中间看画面,时间轴上拖动帧号。
如果你使用的是配套课件,已经可以直接运行:
npm run dev
然后在 Studio 左侧选择 LessonCoreBasics。
安装后有哪些关键文件
Remotion 项目看起来像一个 React 项目,但有几个文件特别重要。
package.json
package.json 里有项目命令和依赖。常见命令包括:
{
"scripts": {
"dev": "remotion studio",
"build": "remotion bundle",
"lint": "eslint src && tsc"
}
}
dev 用来启动 Studio。真正渲染视频时,可以使用:
npx remotion render FinalTalkingVideo
src/index.ts
src/index.ts 是 Remotion 的入口文件。它会把根组件注册给 Remotion。平时你不需要频繁改它,但它是整个项目启动的入口。
src/Root.tsx
src/Root.tsx 是新手最应该先看的文件。它决定 Studio 左侧有哪些视频入口。
在 Remotion 里,一个视频入口叫 Composition。比如:
<Composition
id="LessonCoreBasics"
component={CoreBasics}
durationInFrames={150}
fps={30}
width={1920}
height={1080}
/>
这段配置的意思是:
id:Composition 的名字,Studio 左侧会显示它,命令行渲染也会用它。component:真正负责画面的 React 组件。durationInFrames:视频总帧数。fps:每秒多少帧。width/height:输出尺寸。
这里 durationInFrames={150},fps={30},所以这个视频时长是 5 秒。
src/lessons/CoreBasics.tsx
Root.tsx 只负责注册入口。真正显示画面的代码在 src/lessons/CoreBasics.tsx。
这个文件是第一节课的画面组件,它显示标题和四张概念卡片,帮助你认识 Composition、fps、frame 和 Sequence。
public/
public/ 放静态素材,例如图片、音频、视频。配套课件里有一个口播音频:
public/audio/talking-demo.wav
在 Remotion 组件里可以用 staticFile() 引用它。
remotion.config.ts
remotion.config.ts 是 Remotion 配置文件。比如这套课件里启用了 Tailwind 和 Skia 支持:
Config.overrideWebpackConfig((currentConfiguration) => {
return enableSkia(enableTailwind(currentConfiguration));
});
新手一开始不需要深入配置文件,但要知道它会影响打包和渲染。
什么是 Composition
Composition 是 Remotion 的视频入口。你可以把它理解为"一个可以预览和渲染的视频模板"。
一个项目里可以有多个 Composition。比如这套课件里有:
LessonCoreBasicsLessonAnimationMethodLessonLottieEcosystemLessonThreeEcosystemFinalTalkingVideo
这意味着你可以在同一个项目里同时维护很多视频模板。
第一段代码:CoreBasics 做了什么
打开 src/lessons/CoreBasics.tsx,你会看到:
const frame = useCurrentFrame();
这行代码会拿到当前正在渲染的帧号。如果你在 Studio 里拖到第 60 帧,frame 就是 60。
再看:
const blockOpacity = interpolate(frame, [24, 44], [0, 1], {
extrapolateLeft: "clamp",
extrapolateRight: "clamp",
});
这段代码把帧号转换成透明度:
- 第 24 帧之前,透明度是 0。
- 第 24 到第 44 帧之间,透明度从 0 变成 1。
- 第 44 帧之后,透明度保持 1。
这就是 Remotion 动画的基本思路:不要让浏览器自己跑动画,而是用当前帧号算出这一帧应该是什么样子。
最后看:
<Sequence from={36}>
Sequence 用来安排内容出现在时间轴上的位置。from={36} 表示里面的内容从第 36 帧开始。
你应该先记住什么
学 Remotion 的第一天,不需要记住所有 API。先记住这条路径:
Root.tsx 注册 Composition
Composition 指向一个 React 组件
组件用 frame 计算画面
Remotion 把每一帧合成视频
这条路径理解了,后面再学字幕、音频、Lottie、Three、Skia、批量渲染,都会更顺。
动手练习
打开 LessonCoreBasics,做两个小改动:
- 把四张卡片的顺序前后交换。
- 把其中一张卡片的颜色换成黄色。
然后在 Studio 里拖动时间轴。你会发现,只要停在同一帧,画面始终是稳定的。
下一篇我们继续讲这个稳定性的来源:为什么 Remotion 动画必须由 frame 决定。