Remotion 教程 07：从视频类型反推技术组合
学 Remotion 很容易卡在生态选择上：库很多，看起来每个都能做视频，但真正落到项目里，应该先问“我要生成什么类型的视频”，再选库。
这篇是生态总览。它不追求把每个库都讲完，而是帮你建立选型地图。后面几篇会分别拆开讲 Lottie / Rive、Three、Skia、D3。
先用视频类型做判断
不要从“我想用哪个库”开始，而要从视频目标开始。
图文短视频 -> media + transitions + motion-blur
口播字幕视频 -> captions + 音频 + 字幕时间轴
动效素材视频 -> Lottie / Rive
3D 产品视频 -> Three.js + React Three Fiber
高级 2D 图形 -> Skia
数据报告视频 -> D3 计算图形，Remotion 控制动画
批量生成平台 -> Player + Renderer + 队列系统这个顺序能避免为了炫技引入过重的库。一个简单图文模板不需要 Three，一个柱状图视频也不需要 Skia。
常用组合一：图文模板短视频
推荐组合：
remotion
@remotion/media
@remotion/transitions
@remotion/motion-blur适合产品介绍、知识卡片、营销视频、短视频模板。
@remotion/media 负责放入音频和视频素材，@remotion/transitions 负责场景切换，@remotion/motion-blur 负责增强运动质感。
常用组合二：口播字幕视频
推荐组合：
@remotion/media
@remotion/captions
TTS / Whisper / 字幕服务适合解说、播客切片、知识类短视频、AI 口播视频。
关键不是“字幕显示出来”这么简单，而是要把音频和字幕时间轴对齐。常见做法是：
音频 -> 字幕时间戳 -> 当前 frame 换算毫秒 -> 当前词高亮常用组合三：Motion 作为表现层
Motion 可以进入生态组合，但不要把它当成视频主动画系统。
安全组合是：
Remotion frame -> spring / interpolate -> motion.div style也就是：Remotion 负责时间，Motion 负责样式表达。不要在 Composition 里依赖 animate、transition.duration、drag、layout 这类运行时能力。
常用组合四：动效资产
推荐组合：
@remotion/lottie + lottie-web
@remotion/rive 或 @rive-app/canvas-advancedLottie 适合复用 AE 或 Lottie 工作流导出的矢量动画，例如图标动效、品牌片头、状态动画。
Rive 适合角色动效、状态机和品牌动态组件。它必须依赖 .riv 资产。较新的 .riv 文件可能需要更新的 Rive Web runtime。
常用组合五：3D 产品视频
推荐组合：
three
@react-three/fiber
@remotion/three适合手机样机、产品旋转、空间转场、3D 标题和立体图表。
关键原则仍然是：
frame -> 相机位置 / 模型旋转 / 材质参数常用组合六：高级 2D 图形
推荐组合：
@remotion/skia
@shopify/react-native-skia适合粒子、光效、路径、手绘风、复杂图形。它的视觉表现力强，但配置和调试成本比 DOM/CSS 高。
如果只是标题、字幕、图片和普通卡片，优先用 DOM。
常用组合七：数据可视化视频
推荐组合：
d3
remotionD3 负责 scale、shape、数据映射和路径生成。动画仍然交给 Remotion。
const progress = interpolate(frame, [36, 72], [0, 1], {
extrapolateLeft: "clamp",
extrapolateRight: "clamp",
});
const height = y(item.value) * progress;不要用 D3 的 transition() 来做视频主动画。那是网页运行时动画，不是逐帧视频动画。
选型表
| 需求 | 优先选择 | 不要急着用 |
| --- | --- | --- |
| 音频、视频、图片素材 | @remotion/media | Three、Skia |
| 场景切换 | @remotion/transitions | 手写复杂转场 |
| 运动质感 | @remotion/motion-blur | CSS blur 动画 |
| 逐词字幕 | @remotion/captions | 手写字幕解析 |
| Web 动效表达 | Motion 作为 style 层 | Motion runtime 动画 |
| 设计动效资产 | Lottie / Rive | 手写复杂 SVG |
| 3D 产品展示 | Three | CSS 3D 硬凑 |
| 光效和路径 | Skia | DOM 堆大量元素 |
| 数据图表 | D3 计算 + Remotion 动画 | D3 transition |
一个实用判断流程
可以按这个顺序问自己：
- 视频里有没有真实音频、图片或视频素材？先看
@remotion/media。 - 有没有多场景切换？看
@remotion/transitions。 - 有没有字幕和口播？看
@remotion/captions。 - 有没有现成设计动效？看 Lottie / Rive。
- 有没有真实 3D 空间？看 Three。
- 有没有复杂 2D 绘制？看 Skia。
- 有没有数据图形？看 D3。
- 是否要做网页预览和批量出片？看 Player / Renderer / 队列。
示例项目位置
这篇文章对应示例项目里的生态总览：
Composition: LessonAdvancedEcosystem
文件: src/lessons/AdvancedEcosystem.tsx后面几篇会拆开讲这些专项示例：
LessonLottieEcosystem
LessonRiveEcosystem
LessonThreeEcosystem
LessonSkiaEcosystem
LessonDataVideo如果你只是想做图文模板和口播视频，前面几篇已经足够开始做项目。如果你要做更强的视觉效果，继续读后面的专项文章。