Remotion 产品宣传视频生成（从分镜脚本 + 参考图）
何时使用
当用户提交以下需求时触发：
- "帮我生成一个产品介绍视频"
- "根据分镜脚本做视频"
- "把这些参考图做成宣传片"
- 任何包含「场次/时间码/画面描述/镜头运动/时长」的表格 + 图片素材
核心流程
1. 需求确认
使用 AskUserQuestion 确认 4 个关键参数：
- 投放平台与尺寸（默认 16:9 横屏 1920×1080）
- 视频时长（按分镜总时长或标准 30 秒）
- 参考图使用方式（直接作为主视觉 / 参考风格重绘 / 混合）
- 结尾信息（Slogan+Logo / 联系方式）
2. 项目结构
在现有 Remotion 工程中新增 Composition：
remotion-videos/
├── public/<project>/ # 复制并重命名参考图
├── src/compositions/<id>/
│ ├── VideoComposition.tsx # Sequence 串联所有场景
│ ├── Scene1XXX.tsx # 每个场景独立组件
│ └── ...
├── src/utils/animationHelpers.ts # fade / kenBurns / typewriter / spring / countUp
└── src/Root.tsx # 注册新 Composition，保留旧的
3. 动画工具函数
在 src/utils/animationHelpers.ts 中封装：
- fadeTransition(frame, totalFrames, fadeIn, fadeOutStart)
- kenBurns(frame, start, end, fromScale, toScale, fromX, toX, fromY, toY)
- typewriterText(frame, start, end, fullText)
- springReveal(frame, fps, startFrame, config?)
- countUp(frame, start, end, from, to)
注意：Remotion 的 SpringConfig 必须包含 overshootClamping。
4. 场景组件设计原则
- 每个场景文件顶部使用 Constants-First 块：
CONTENT、COLORS、TIMING、IMAGES - 图片通过
staticFile("<project>/<image>.png")加载 - 竖版图片居中，左右用渐变/纯色填充到 16:9
- 横版图片使用
objectFit: "cover"全屏 - 多场景蒙太奇：用
backgroundImage+backgroundPosition从大图裁剪子区域
5. 注册与渲染
- 在
Root.tsx中新增<Composition id="<id>" ... />，与已有 Composition 并行 - 渲染命令（Windows + 系统 Chrome）：
bash cd remotion-videos npx remotion render src/index.ts <id> output/<filename>.mp4 --browser-executable="C:/Program Files/Google/Chrome/Application/chrome.exe" - 验证
output/<filename>.mp4存在并交付
常见问题
- Chrome Headless Shell 下载卡住：使用
--browser-executable指向本地 Chrome - SpringConfig 类型错误：所有 spring config 必须包含
overshootClamping - 字体加载请求过多：可通过
loadFont("normal", { subsets: ["latin"], weights: ["400", "700"] })限制 - 竖版图片适配：居中 + 左右渐变填充，避免黑边
