# 💡Summary
> [!Info]
> 视频 = 帧序列，
> 帧 = React 组件的某一时刻状态
# Cues
[[AI剪辑]]
# Notes
他是先算，生成密集的帧，然后并行独立渲染。到那时用户视角依次播放，就给人一种视频
![CleanShot 2026-01-28 at
[email protected]|1000](https://imagehosting4picgo.oss-cn-beijing.aliyuncs.com/imagehosting/fix-dir%2Fmedia%2Fmedia_bGJgBmI163%2F2026%2F01%2F28%2F16-37-01-711e1333b4b7fe3e3fb8e0420287b088-CleanShot%202026-01-28%20at%2016.36.21-2x-729ddc.png)
⏺ Remotion 完整能力体系图谱
1. 数据驱动视频生成
| 能力 | 说明 | 应用场景 | 代码示例 |
|-------------|------------|-------------------|------------------------------------------------|
| API 数据集成 | 实时拉取数据生成视频 | 股票行情、天气预报、体育比分 | fetch(api).then(data => <Chart data={data} />) |
| CSV/JSON 批量 | 批量生成个性化视频 | 千人千面营销、证书生成、年终总结 | parameterized rendering |
| 数据可视化 | 图表动画、数据故事 | 数据报告、信息图表、统计动画 | <BarChart />, <LineGraph /> |
| 参数化模板 | 一个模板，多个输出 | 广告投放、多语言版本、A/B 测试 | getInputProps() |
2. 编程化合成能力
| 能力 | 说明 | 应用场景 | 特点 |
|-------|--------------|-----------------|----------------------------|
| 程序化时序 | 用代码控制时间线 | 音乐可视化、节奏同步、精确到帧 | 帧级精度控制 |
| 条件渲染 | if/else 控制内容 | 动态字幕、响应式布局、交互逻辑 | {condition && <Element />} |
| 循环生成 | 批量创建元素 | 粒子系统、弹幕墙、矩阵动画 | array.map() |
| 算法动画 | 数学函数驱动 | 物理模拟、分形艺术、生成艺术 | Math.sin(), noise() |
3. 三维与高级图形
| 能力 | 说明 | 应用场景 | 依赖库 |
|-------------|------------------|-------------------|------------------|
| Three.js 集成 | 3D 场景渲染 | 产品展示、3D 标题、空间动画 | @remotion/three |
| WebGL 着色器 | GPU 加速特效 | 流体效果、粒子风暴、光影效果 | GLSL shaders |
| SVG 动画 | 矢量图形动画 | Logo 动画、路径动画、形态变换 | <Svg /> |
| Canvas 绘制 | 自定义绘图 | 手绘效果、签名动画、实时绘制 | <Canvas /> |
| Lottie 动画 | After Effects 导入 | 复杂动效、设计师协作 | @remotion/lottie |
4. 音视频处理
| 能力 | 说明 | 应用场景 | API |
|-------|------------|---------------------|----------------------|
| 音频可视化 | 频谱分析、波形图 | 音乐 MV、播客视频、DJ 混音可视化 | getAudioData() |
| 音频处理 | 音量控制、淡入淡出 | 背景音乐、音效叠加、混音 | volume, playbackRate |
| 视频操作 | 裁剪、变速、反向播放 | 慢动作、倒放、画中画 | startFrom, endAt |
| 实时预览 | 浏览器实时渲染 | 开发调试、客户预览、在线编辑 | Remotion Player |
| 字幕生成 | 自动/手动字幕 | 多语言字幕、歌词同步、实时翻译 | <Subtitle /> |
5. 云端与自动化
| 能力 | 说明 | 应用场景 | 工具 |
|----------------|-----------|--------------------|-------------------|
| Lambda 渲染 | 无服务器云渲染 | 大规模并行、自动扩容、按需付费 | @remotion/lambda |
| GitHub Actions | CI/CD 自动化 | 提交即渲染、定时生成、自动发布 | .github/workflows |
| Webhook 触发 | 事件驱动生成 | 用户注册欢迎视频、订单确认、通知提醒 | REST API |
| 渲染农场 | 分布式渲染 | 长视频、4K/8K、批量任务 | renderMedia() |
6. AI 集成能力
| 能力 | 说明 | 应用场景 | 示例 |
|----------|--------------|----------------|----------------------|
| TTS 语音合成 | 文字转语音 | 新闻播报、教程配音、有声书 | Google TTS, OpenAI |
| AI 生成图像 | 集成 DALL-E/SD | 动态背景、场景生成、创意素材 | Stable Diffusion API |
| 智能剪辑 | AI 辅助决策 | 精彩片段、去除静音、场景检测 | ML 模型 |
| 内容理解 | 视频分析 | 自动标签、内容审核、情感分析 | Computer Vision |
7. 交互与游戏化
| 能力 | 说明 | 应用场景 | 技术 |
|--------|--------|------------------|------------|
| QR 码生成 | 动态二维码 | 营销视频、教程引导、社交分享 | qrcode |
| 游戏引擎 | 简单游戏逻辑 | 互动广告、小游戏录屏、教育内容 | React 游戏逻辑 |
| 物理引擎 | 真实物理模拟 | 碰撞效果、重力模拟、布料动画 | matter.js |
| 手势动画 | 模拟用户操作 | App 演示、教程指引、交互展示 | 自定义动画 |
8. 独特优势能力
| 特性 | 传统剪辑软件 | Remotion | 优势场景 |
|------|---------|--------------|------------|
| 版本控制 | ❌ 二进制文件 | ✅ Git 管理 | 团队协作、历史追溯 |
| 组件复用 | ❌ 复制粘贴 | ✅ React 组件 | 设计系统、品牌统一 |
| 单元测试 | ❌ 无法测试 | ✅ Jest 测试 | 质量保证、回归测试 |
| 类型安全 | ❌ 无 | ✅ TypeScript | 减少错误、智能提示 |
| 包管理 | ❌ 插件市场 | ✅ npm 生态 | 无限扩展、开源社区 |
| 响应式 | ❌ 固定尺寸 | ✅ 自适应 | 多平台适配、动态布局 |
9. 生产力工具
```
// 实用工具集
- measureSpring() // 计算弹簧动画时长
- interpolateColors() // 颜色渐变
- random() // 确定性随机（同seed同结果）
- staticFile() // 静态资源管理
- continueRender() // 异步加载等待
- delayRender() // 延迟渲染
- getInputProps() // 获取输入参数
- getRemotionEnvironment() // 环境检测
```
10. 输出格式支持
| 格式 | 用途 | 配置 |
|---------|--------|--------------------|
| MP4 | 通用视频 | codec: 'h264' |
| WebM | Web 优化 | codec: 'vp8' |
| GIF | 动图表情 | codec: 'gif' |
| PNG 序列 | 后期合成 | imageFormat: 'png' |
| ProRes | 专业剪辑 | codec: 'prores' |
| WAV/MP3 | 纯音频 | codec: 'mp3' |
# 🧩 Cues
# 🪞Notes
为什么用 React？
| 优势 | 说明 |
| :------- | :----------------------------------------- |
| 声明式 | 描述"每一帧应该长什么样"，而不是"如何从上一帧变到下一帧" |
| 组件复用 | 动画组件可以复用、组合、参数化 |
| 生态 | 可以用任何 React 库（Three.js、Charts、Lottie...） |
| 类型安全 | TypeScript 全程支持 |
| 热更新 | 开发时实时预览，改代码立刻看效果 |
与传统视频软件对比
| 方面 | Premiere/AE | Remotion |
| :------- | :---------- | :------------------- |
| 界面 | GUI 时间轴 | 代码 |
| 数据驱动 | 困难 | 天然支持（props/JSON） |
| 批量生成 | 手动 | 脚本自动化 |
| 版本控制 | 困难 | Git |
| 复用 | 模板/预设 | React 组件 |
| 可编程 | 表达式/脚本 | 完整 JS/TS |
渲染性能
- 并行渲染：多核 CPU 同时渲染不同帧
- 增量渲染：只重新渲染改动的帧
- 云渲染：Remotion Lambda (AWS) 可以几秒渲染完整视频