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, // 適用於打字場景
cards?: Array<{ name, category, detail?, emoji? }>, // 適用於卡片場景
items?: Array<{ name, price? }>, // 適用於詳細資訊場景
options?: Array<{ label, sublabel?, icon? }>, // 適用於下拉式選單場景
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 } })→ 透明度 + Y 軸位移 - 交錯： 每個項目延遲
i * 6影格 - 浮動：
Math.sin(globalFrame / 45) * 12實現輕微飄移 - 打字：
Math.floor((sceneFrame - delay) * 0.55)個字元顯示 - 漣漪： 透過取餘數持續循環：
(frame + ring * offset) % cycleDuration - 交叉淡出： 場景重疊，從
-transitionFrames到0淡入，從dur - transitionFrames到dur淡出
改善待辦清單
當前狀態：良好，但非完美。已知的不足：
- Three.js 背景球體 — CSS 輻射漸層球體約可達到 7/10 分。使用真正的
@remotion/three搭配適當光影可達 9/10 分 - 真實圖片 — 將彩色佔位區塊替換為 Unsplash/Pexels 的食物照片，使用
<Img>元件 - 可變打字速度 — 常用單字加速，空格處略作停頓
- 螢幕發光 — 手機螢幕邊緣的細微環境光暈
- 常數優先模式 — 將所有魔法數字提取為檔案頂層的具名常數（Remotion 官方建議）
建立新範本
在建立新的產品展示範本時，請遵循以下步驟：
- 逐格分析參考影片（以 1 秒間隔提取影格）
- 辨識視覺元件： 背景、裝置、內容、轉場
- 定義 Zod 模式，包含場景類型及可設定的屬性
- 由下而上建立元件： 背景 → 裝置框架 → 場景 → 轉場
- 每個步驟進行測試 — 先渲染單一影格，再渲染完整影片
- 使用視覺模型進行 QA — 提取影格、評分品質、迭代改進
嚴格遵循 Remotion 規則：請參閱 skills/remotion-best-practices/ 的規則檔案。