Remotion 渲染
驱动“渲染与迭代”循环：将构图转为 MP4，获取自然语言反馈，做出满足反馈的最小修改，然后重新渲染。代价高昂的失败模式是相反的循环——为了一个复制修改而重写整个场景文件，或者为了每次检查而全质量重新渲染——这会破坏已批准的工作以及让 Remotion 值得使用的迭代速度。
操作流程
第 1 步：收集输入
- 构图 ID（
src/Root.tsx中<Composition>上的id，不是文件名）和入口点（调用registerRoot的文件，通常是src/index.ts）。 - 目标：平台/宽高比（横屏 16:9、竖屏 9:16、正方形）、分辨率（默认 1080p；仅按要求提供 4K）以及是否需要透明通道。
- 机器核心数（用于并发）以及这是单次渲染、迭代会话还是批量渲染。
第 2 步：基础渲染
npx remotion render src/index.ts <CompositionId> out/video.mp4
默认输出为 H.264 MP4，使用构图自身的宽度/高度/帧率；如果 out/ 目录不存在，Remotion 会创建它。
第 3 步：分辨率、帧率和编解码器预设
分辨率和帧率存在于 <Composition> 上（width/height/fps）——在源代码处更改它们。仅在需要缩放和容器时使用标志：
# 1080p 横屏 - 构图作者设置为 1920x1080@30
npx remotion render src/index.ts ProductDemo out/1080p.mp4
# 4K - 在不影响布局的情况下对 1080p 画布进行缩放
npx remotion render src/index.ts ProductDemo out/4k.mp4 --scale=2
# 9:16 竖屏 - 渲染一个作者设置为 1080x1920 的构图
npx remotion render src/index.ts ProductDemoVertical out/vertical.mp4
编解码器规则：
- 社交媒体/网络分发保持 H.264 MP4（默认）——最大兼容性。
- 透明通道：
--codec=vp8或vp9（WebM），或用于剪辑工作流的--codec=prores（带 alpha）。H.264 无法承载 alpha 通道。 - 真正的 60fps 意味着在构图上的
fps={60}，并且帧数相应缩放——仅通过标志更改 fps 会使所有按帧计时的动画不同步。
第 4 步：调优并发度
渲染是 CPU 密集型的（每一帧都是无头 Chromium 的截图）。默认大约是核心数的一半；显式调优是最简单的本地加速方式：
npx remotion render src/index.ts ProductDemo out/video.mp4 --concurrency=8
从物理核心数开始（--concurrency=50% 接受百分比）；如果机器发生交换或热节流则减少——超过最佳点后，更多的 Chromium 标签页会使其变慢，而不是变快。
第 5 步：运行迭代优化循环
保持 Studio 打开（npx remotion studio，http://localhost:3000），以便用户即时预览；只在确认时进行完整渲染。
- 用户在 Studio 中预览并用自然语言给出反馈。
- 将其转换为外科手术式编辑——只更改相关值：
- “太快了” → 扩大
interpolate输入范围或提高弹簧damping值。 - “Logo 应该更突出” → 降低弹簧
damping值 / 添加过冲。 - “更改 CTA 文案” → 编辑 prop /
defaultProps，不碰其他东西。 - “不同的强调色” → 更改颜色对象中的一个十六进制值。
- “让最后一个特性停留更久” → 增加该
<Sequence>的durationInFrames，并重新推导构图的durationInFrames总数。
- “太快了” → 扩大
- 重新渲染，或让 Studio 热重载以进行视觉检查。
外科手术式编辑 vs 重写：当更改是值、prop、颜色或一个场景的时序时，原地编辑；仅当场景结构发生改变（添加/删除/重新排序场景——并将结构性创作路由到 remotion-compose）时，才重写。默认为外科手术式：它保留所有已批准的内容。
第 6 步：批量变体
构图是数据驱动的，因此 N 个变体 = JSON 文件中的 N 个 prop 集：
[
{ "out": "out/acme.mp4", "props": { "logoText": "Acme", "colors": { "accent": "#6C5CE7" }, "cta": "Try Acme" } },
{ "out": "out/globex.mp4", "props": { "logoText": "Globex", "colors": { "accent": "#00B894" }, "cta": "Try Globex" } }
]
--props 接受内联 JSON 或文件路径；对于超过几个变体的情况，编写一个小的 Node 脚本，读取 JSON 并为每个条目执行 shell 命令，或者使用 @remotion/renderer 的 renderMedia() 进行类型安全的循环。通过编辑 JSON 来本地化或 A/B 测试文案和颜色。
第 7 步：当本地成为瓶颈时使用 Lambda
当单次渲染在本地需要几分钟，或者批量很大时，再考虑使用 Lambda——它会将帧分发到无服务器工作进程中。否则本地更简单且免费。
npx remotion lambda functions deploy # 每个 AWS 账户/区域只需一次
npx remotion lambda sites create src/index.ts --site-name=product-demo
npx remotion lambda render product-demo ProductDemo --props='{"logoText":"Acme"}'
需要根据 Remotion 的 Lambda 设置提供 AWS 凭据和 IAM 权限。
第 8 步：排查三个常见故障
- 帧数不匹配 - 动画提前结束或片段有死尾。原因：
<Sequence>持续时间更改了，但构图总数没变。修复：确保总数等于其所有序列之和；每次编辑时序后重新计算。这是渲染中排名第一的意外情况。 - 缺少
staticFile()引用 - 渲染失败或资源为空。原因：通过路径或public/目录之外导入的资源。修复：将其放在public/assets/中并引用staticFile("assets/<name>")。 - 字体闪烁/回退 - 文本以错误的字体渲染或发生位移。原因：
@remotion/google-fonts的loadFont()缺失或调用太晚。修复：在模块顶层调用loadFont()并应用返回的fontFamily；然后渲染会等待字体。
交付物
out/ 目录中按请求预设渲染的文件，加上——对于迭代会话——循环提议：命名可调整的维度（节奏、文案、颜色、时序）并根据反馈重新渲染。对于批量渲染，则提供变体 JSON 和每个变体的输出。
禁止事项
- 禁止为值级别的更改重写场景文件——外科手术式编辑可以保留已批准的工作。
- 禁止仅通过标志更改帧率——需在构图上设置并重新缩放帧数。
- 禁止更改 Sequence 持续时间而不重新推导构图的总
durationInFrames。 - 禁止每次迭代都进行完整渲染——Studio 热重载是预览循环；在确认时渲染。
- 禁止在机器正在交换或节流时，将并发度推高到物理核心数以上。
- 禁止在本地渲染仅需几秒钟时使用 Lambda——它会增加 AWS 设置和成本，毫无意义。
- 禁止在此创建新场景或重组构图——那是 remotion-compose 的职责。
质量标准
- 输出以请求的分辨率/宽高比/帧率播放，没有死尾，也没有提前结束（构图总数与序列总和匹配）。
- 资源和字体从第一帧开始就正确渲染——没有回退字体闪烁，没有空白资源。
- 一次迭代只更改了反馈所需的那些行；所有先前已批准的内容保持不变。
- 批量输出仅通过其 prop 集相互区分。
升级路径
场景创作、动画设计和组件结构转到 remotion-compose；项目脚手架转到 remotion-setup；评分和音频时序转到 sound-and-music-sync。