Best practices for Remotion - …

# Remotion 30秒产品宣传视频实现方案

一、环境搭建

• 确保已安装 Node.js（建议 16+）
• 创建项目：npx create-video@latest（选择空白模板）
• 安装依赖：npm install 后运行 npm start 打开 Remotion Studio 预览

二、基础配置

• 分辨率：1920x1080（Composition 配置中设置 width/height）
• 帧率：30fps，总时长 900 帧（30秒）
• Composition 示例：

```tsx

<Composition id="PhoneAd" component={PhoneAd}

durationInFrames={900} fps={30} width={1920} height={1080} />

```

三、手机壳旋转动画

• 素材准备：3 个手机壳的 PNG 图片（建议透明背景）或 3D 模型贴图
• 旋转实现：用 useCurrentFrame() 获取当前帧，通过 interpolate() 映射到 rotateY 角度（0~360°），配合 transform: perspective(1000px) rotateY(...) 实现 3D 旋转
• 错峰出场：3 个壳分别在第 0、30、60 帧用 spring() 弹性入场
• 布局：3 个壳横向排布（可用 flex 布局），或轮播式逐个展示（每个 8 秒左右）
• 素材图片序列（更真实）：将手机壳旋转渲染为图片序列（60帧一组），用 <Series> 或 <Img> 按帧切换，模拟 360° 旋转

四、价格字幕

• 组件：使用 <Sequence> 控制字幕出现时间，与对应手机壳同步
• 动效：spring() + opacity 渐入，文字可加缩放强调
• 内容：型号名 + 价格区间文案（如“¥XX–XXX”），避免硬编码无法核实的具体价格
• 字体：加载自定义字体（@remotion/google-fonts 或 staticFile 引入）

五、节奏与收尾

• 0–3s：品牌 Logo 渐入
• 3–24s：三个手机壳依次旋转展示 + 价格字幕
• 24–30s：总结画面 + 行动号召（如“立即购买”按钮样式文字）
• 背景音乐：staticFile 引入音频，用 <Audio> 组件挂载，注意音量淡出

六、导出 MP4

• 本地渲染：npx remotion render PhoneAd out/video.mp4
• 可加参数 --codec=h264（默认）保证兼容性
• 云端渲染（可选）：npx remotion render --cloud 或使用 Lambda 加速

七、注意事项

• 渲染前用 Studio 预览检查动画时序
• 大量图片序列建议开启并发渲染提速
• 商用发布前确认音乐、字体、素材版权