Remotion Video Pro
范围
此技能拥有使用Remotion进行程序化视频生产的一切所需：
- 项目搭建和合成架构
- 基于帧的动画数学（interpolate、spring、measureSpring）
- 时间设计思维（安全区域、钩子窗口、时序）
- 音频同步（旁白、字幕、节拍检测）
- 视觉设计系统（排版、色彩、运动原则）
- 性能优化（memoization、OffthreadVideo、包大小）
- 渲染管道（Lambda、CloudRun、CI/CD）
- Webhook驱动的数据视频（CRM → 队列 → Lambda → S3）
- 批量渲染规模化（10,000+个性化视频）
- 合成验证（预提交钩子、CI门控）
快速参考
| 问题 | 加载规则 |
|---|---|
| 项目搭建、Zod模式、Composition结构 | 01-scaffolding.md |
| interpolate、spring、过渡、时序 | 02-animation-physics.md |
| 移动端安全区域、帧时序、响应式布局 | 03-temporal-design.md |
| 旁白同步、字幕、节拍检测、频谱 | 04-audio-sync.md |
| 排版、色彩、禁止模式、运动原则 | 05-anti-slop-aesthetics.md |
| 缓慢渲染、memoization、包大小、Lambda | 06-performance.md |
| 社交媒体、演示、解说视频的现成提示 | 07-prompt-templates.md |
| CI/CD、Lambda、CloudRun、快照测试 | 08-rendering-pipeline.md |
| CRM Webhook → Lambda → S3 管道 | 09-webhook-integration.md |
| 批量渲染扇出、/api/render/batch | 10-batch-rendering.md |
| 预提交钩子、CI门控、合成linting | 11-validation-pipeline.md |
黄金法则
- 帧为王。 所有动画都源自
useCurrentFrame()。没有CSS动画，没有定时器。 - 仅确定性。 不使用
Math.random()。使用Remotion的random(seed)。 - Spring 优先于线性。 默认使用
spring()进行运动。线性感觉机械。 - 所有输入视频使用 OffthreadVideo。 绝不使用
<Video>处理MP4输入。 - 异步数据必须门控渲染。 对于字体、数据、外部资源使用
delayRender()/continueRender()。 - 每个Composition使用Zod。 运行时验证防止不良属性导致的渲染崩溃。
- 每个场景使用React.memo。 不必要的重新渲染会浪费Lambda上的渲染时间和金钱。
- 提交前验证。 预提交钩子捕获全部7种致命错误。绝不禁用它。
- 部署前测试。 测试工具在Lambda站点创建前运行。损坏的合成永远不会到达Lambda。
- 视频是数据库行。 规模化个性化视频意味着将渲染视为数据管道输出。
- 要么反低质，要么不做。 默认使用Inter、紫色渐变和表情符号图标是被禁止的。绝对不行。
- 版本化你的合成。 部署v2，测试它，激活它。旧的Webhook渲染旧版本。永远不要破坏生产环境。
决策树
构建视频？
├── 社交媒体短视频（TikTok/Reels）→ 加载 03, 04, 05, 07
├── 产品演示/解说 → 加载 02, 03, 04, 05
├── 规模化个性化 → 加载 06, 08, 09, 10
├── CI/CD管道 → 加载 08, 11
└── 只需基础 → 加载 01, 02, 06, 11