remotion-product-demos

Remotion 产品演示视频

使用 Remotion 构建苹果主题风格的高质量产品演示视频。

快速开始

项目：~/Projects/tails-video/ 模板：src/templates/GlassPhoneDemo.tsx

cd ~/Projects/tails-video
npx remotion render src/index.ts GlassPhoneDemo out/demo.mp4 \
  --codec=h264 --crf=18

通过 --props 自定义内容：

npx remotion render src/index.ts GlassPhoneDemo out/custom.mp4 \
  --props='{"scenes":[{"type":"hero","durationInSeconds":3}],"brand":{"name":"YourBrand"}}'

模板：GlassPhoneDemo

模式定义 (Zod)

{
  scenes: Array<{
    type: 'hero' | 'voice' | 'typing' | 'cards' | 'detail' | 'dropdown' | 'endCard',
    title?: string,
    subtitle?: string,
    text?: string,           // typing 场景
    cards?: Array<{ name, category, detail?, emoji? }>,  // cards 场景
    items?: Array<{ name, price? }>,                      // detail 场景
    options?: Array<{ label, sublabel?, icon? }>,          // dropdown 场景
    durationInSeconds: number  // 默认 3
  }>,
  accentColor: string,       // 默认 '#3B82F6'
  bgStyle: 'light' | 'warm' | 'cool',
  deviceAngle: number,       // 默认 8（Y轴旋转角度）
  brand?: { name: string, tagline?: string }
}

场景类型

类型	视觉效果	关键属性
hero	手机显示“点击输入”+ 操作按钮	—
voice	麦克风图标 + 连续涟漪环	—
typing	逐字符文字显示 + 光标	text
cards	交错出现的卡片列表（类似餐厅风格）	cards[], title
detail	筛选标签 + 带价格的项目网格	items[], title, subtitle
dropdown	玻璃态选项选择器	options[], text
endCard	手机淡出，品牌居中显示	— (使用顶层 brand)

推荐的场景流程

典型的演示流程为：hero → voice → typing → results → detail → typing → dropdown → endCard

时长建议：hero 3秒, voice 2秒, typing 每命令3秒, cards/detail 4秒, dropdown 3秒, endCard 2秒。

视觉风格规则

请阅读 references/apple-aesthetic.md 获取完整的样式指南。

关键规则：

• 背景： 柔和的 3D 球体，带有径向渐变、高光反射和投影
• 手机： 类似 iPhone 风格，带有金属边框渐变、灵动岛、侧边按钮、主屏幕指示器、玻璃反射叠加层和接地阴影
• 颜色： 单色白/灰 + 单个可配置强调色
• 动画： 全部通过 useCurrentFrame() + spring({damping: 200}) 实现。零 CSS 动画。

动画模式

请阅读 references/animation-patterns.md 获取弹簧配置、时间公式和缓动模式。

关键模式：

• 入场： spring({ frame: sceneFrame, fps, config: { damping: 200 } }) → 透明度 + 垂直位移
• 交错： 每个项目延迟 i * 6 帧
• 浮动： Math.sin(globalFrame / 45) * 12 实现轻微漂移
• 打字： Math.floor((sceneFrame - delay) * 0.55) 个字符逐步显示
• 涟漪： 通过取模实现连续：(frame + ring * offset) % cycleDuration
• 交叉淡入淡出： 场景重叠，-transitionFrames 到 0 淡入，dur - transitionFrames 到 dur 淡出

改进待办事项

当前状态：良好，但非完美。已知不足：

1. Three.js 背景球体 — CSS 径向渐变球体最多达到 7/10 效果。使用真正的 @remotion/three 配合适当光照可达到 9/10
2. 真实图片 — 彩色占位方块 → 通过 <Img> 组件使用 Unsplash/Pexels 食物照片
3. 可变打字速度 — 常用词更快，空格处略微停顿
4. 屏幕发光 — 手机屏幕边缘的微弱环境光溢出
5. 常量优先模式 — 将所有魔法数值提取为文件顶部的具名常量（Remotion 官方推荐）

创建新模板

构建新的产品演示模板时：

1. 逐帧分析参考视频（以 1 秒间隔提取）
2. 识别视觉组件： 背景、设备、内容、过渡
3. 定义 Zod 模式，包含场景类型和可配置属性
4. 自底向上构建组件： 背景 → 设备框架 → 场景 → 过渡
5. 每一步进行测试 — 在完整视频渲染前先渲染单帧
6. 用视觉模型进行质量评估 — 提取帧，评价质量，迭代优化

严格遵守 Remotion 规则：请阅读 skills/remotion-best-practices/ 规则文件。