Instagram Reels 產品展示卡：9:16 直式品牌動畫
做一支 15 秒 9:16 直式 Reels——產品圖浮出、價格數字跳動、漸層背景飄移。完全用 Claude Code 指令驅動，一次學會短影音專屬的尺寸、字型、視覺節奏。
成品預覽
這支 10 秒的 Reels demo 完整跑一次接下來的步驟——漸層底、產品圖彈跳進場、價格 $0 跳到 $4,280、三個賣點依序滑入、CTA 按鈕脈動。沒有剪輯軟體、沒有手動 keyframe。
這篇會做出什麼
一支 15 秒 9:16 直式短影音，用來在 IG Reels / TikTok / YouTube Shorts 上架新產品：
- 0~2 秒：漸層背景從右上滑到左下（alive 感）
- 0.5~3 秒：產品圖從底部彈跳進場、微幅 3D 傾斜
- 2.5~5 秒：產品名稱從右側滑入
- 4~7 秒：價格數字從 0 跳動計數到目標價
- 7~13 秒：三點賣點（✓ bullet）依序淡入
- 13~15 秒：CTA 按鈕脈動 +「馬上購買」標語
做完可以直接換產品、換顏色、換文字，變成你品牌的模板。
前置知識
- T1 Remotion Skills 安裝指南
- T3 用 Remotion 做 YouTube 片頭動畫——如果你已經懂
<Sequence>跟spring()那這篇會很順
素材準備：
- 一張產品圖（PNG 去背，正方形最好）
- 產品名稱與價格
- 3 個賣點（每個不超過 10 個字）
Step 1：建立 9:16 Composition
Claude Code：
在現有 Remotion 專案新增一個 Composition：
- id: "ReelsProductCard"
- 尺寸 1080x1920（9:16 直式）
- fps: 30
- durationInFrames: 450（15 秒）
- 背景色 #111827
- 新建 src/compositions/ReelsProductCard.tsx
- 在 src/Root.tsx 註冊
先留一個空的 <AbsoluteFill>，後面往裡面加東西。
Studio 的預覽區會切換成直式比例。
💡 為什麼短影音要用 1080×1920？這是 Instagram/TikTok/YouTube Shorts 的官方推薦解析度，fps 30 足夠，再高沒幫助。完整說明在 /docs/composition。
Step 2：漸層背景動畫
Claude Code：
在 ReelsProductCard 最底層加一個會動的漸層背景：
1. 用 <AbsoluteFill> 包一個 div 填滿畫面
2. 背景用 linear-gradient，從 #1e3a8a 到 #0f172a 到 #1e40af
3. 漸層角度用 interpolate 從 135deg 飄到 315deg
（全程 15 秒，慢慢飄）
4. 加一個疊加的 radial-gradient 光暈，從畫面中上方
rgba(59, 130, 246, 0.3) 淡出到透明
5. 整層 filter: blur(60px) 讓它看起來「柔焦 + 活的」
這一步做完你會看到背景有一個緩慢飄動的藍色光。這就是「alive 感」——畫面不是死的，就算沒有主體在動也有節奏。
💡 漸層、濾鏡、背景圖進階技巧在 /docs/background-image 和 /docs/designing-visuals。
Step 3：載入產品圖
把產品圖放到 public/products/sneaker.png，然後：
在 ReelsProductCard 中央放產品圖：
1. 用 <Img src={staticFile("products/sneaker.png")} />
2. 尺寸 720x720，置中
3. 加一個 drop-shadow 40px 黑色 50% 透明度
4. 先不做動畫
Step 4：產品圖彈跳進場 + 3D 傾斜
讓產品圖動起來：
1. 用 <Sequence from={15}> 包住（0.5 秒後才進場）
2. 進場動畫：
- translateY 從 300 彈跳到 0，用 spring() stiffness 100 damping 14
- opacity 從 0 到 1，前 10 幀完成
- scale 從 0.6 到 1.0 同步 spring
3. 進場後加「漂浮」效果：
- 用 Math.sin(frame / 30) 做 translateY 的微幅浮動 (± 15px)
- 同時做微幅 rotate 3deg 的搖擺
4. 加一層 perspective(1200px) + rotateY 做 3D 立體感，
讓產品看起來有點立體，不是平貼
💡
Math.sin()驅動的循環動畫是 Remotion 最常用的「持續動」技巧。spring()用來進場，sin 用來持續運動。細節在 /docs/animation-math。
Step 5：產品名稱滑入
在產品圖下方加產品名稱：
1. 用 <Sequence from={75} durationInFrames={300}>（2.5 秒開始，顯示 10 秒）
2. 文字內容 "Air Max 2026"
3. 字型 Inter Bold 100px 白色，置中
4. 位置：畫面下半部，產品圖下方 80px
5. 進場動畫：
- translateX 從 600 到 0，用 spring() stiffness 90 damping 18
- opacity 從 0 到 1
- 進場完成約 20 幀
6. 字元依序進場用 stagger 效果（第一個字 0 幀，第二個字 2 幀...）
要用 Noto Sans TC + Inter 的 fallback，英文數字用 Inter 中文用 Noto Sans TC。
字型為什麼這麼重要？
Reels 類型的短影音，文字占畫面的比例高，字型糊一點整支影片就廢了。永遠用 @remotion/google-fonts 而不是 CSS @import——前者會在渲染前確保字型載入完成。
💡 字型完整說明在 /docs/fonts。
Step 6：價格數字跳動計數
這是整支影片最吸睛的一步：
在產品名稱下方加價格數字動畫：
1. 用 <Sequence from={120} durationInFrames={300}>（4 秒進場）
2. 目標價格 $4,280，從 $0 跳動計數上去
3. 用 interpolate 把 frame 映射到當前數字：
- frame 0 ~ 45（1.5 秒）：從 0 到 4280
- frame 45 之後：固定顯示 4280
4. 用 Math.round 確保顯示整數，用 toLocaleString() 加千分位逗號
5. 字型 Inter Black 160px 亮黃色 #facc15
6. 在數字前加 "$" 符號（同色同字重但小一號）
7. 計數完成時加一個 scale 彈跳：1.0 → 1.15 → 1.0（8 幀完成）
這一步結束，你會看到價格從 $0 快速跳到 $4,280 然後「咚」一下彈一次。這是數字計數最關鍵的細節——結尾一定要「咚」一下，讓觀眾注意到「計數完成」。
💡 數學驅動動畫的設計思路（ease、spring、sin、interpolate 各適合什麼場景）在 /docs/animation-math 和 /docs/animation-basics。
Step 7：三點賣點依序淡入
在價格下方加三個賣點 bullet：
1. 用一個 <Sequence from={210} durationInFrames={180}>（7 秒進場）
2. 三行文字：
- "✓ 氣墊升級，跑 10 公里不累"
- "✓ 透氣網布，夏天不悶腳"
- "✓ 限量 500 雙，現貨最後機會"
3. 字型 Noto Sans TC Regular 42px 白色 90% opacity
4. 每一行隔 15 幀（0.5 秒）進場：
- 用 interpolate 計算每一行的開始 frame
- 每行動畫：opacity 0→1, translateX -40→0
5. 對齊：靠左，左邊距 120px
6. 行高 72px
為什麼要 stagger 進場而不是同時？ 觀眾的視線一次只能讀一行。依序進場會強迫觀眾的視線從第一行跟到第三行，讀完整段文字；同時進場會讓觀眾只看到其中一行。
Step 8：CTA 按鈕脈動
畫面底部加 CTA 按鈕：
1. 用 <Sequence from={300} durationInFrames={150}>（10 秒進場）
2. 按鈕樣式：
- 圓角 100px，padding 32 80，背景亮黃色 #facc15
- 文字 "馬上購買" 黑色 56px 粗體
3. 進場動畫：從 scale 0 彈跳到 1（spring stiffness 150 damping 12）
4. 進場後持續脈動：scale 在 1.0 ~ 1.08 之間 sin 循環
5. 加一個向外擴散的光圈：
- 另一個同樣圓角的 div 在按鈕下方
- scale 從 1 擴散到 1.4，同時 opacity 從 0.5 到 0
- 每 30 幀重複一次
6. 位置：畫面底部往上 300px，置中
完成！回到 Studio 從 frame 0 播到 frame 450 看整段流程。
Step 9：Safe Zone 檢查
短影音有一個陷阱——上下會被平台 UI 蓋住。Instagram Reels 大概上方 180px、下方 300px 會被遮擋（帳號、按讚、留言按鈕）。
在 ReelsProductCard.tsx 中加一個開發用的 safe zone overlay：
1. 只在 Studio 中顯示（用 process.env.REMOTION_STUDIO 判斷）
2. 上方 180px 畫一條半透明紅線（只在開發看）
3. 下方 300px 畫一條半透明紅線
4. 所有重要內容（產品圖、名稱、價格、CTA）都要在紅線之間
5. 渲染時這個 overlay 要自動隱藏
這一步是短影音專業 vs 業餘的分界線。素人做的 Reels 常常價格被按讚按鈕蓋住，專業的永遠會留 safe zone。
💡 用
measureText/ getBoundingClientRect 量測元素實際尺寸是進階技巧，完整用法在 /docs/measuring。
Step 10：渲染輸出
渲染 ReelsProductCard 成 MP4：
1. 輸出到 out/reels-product.mp4
2. 1080x1920 H.264
3. CRF 20 高品質
4. 不需要音訊軌
渲染完你就有一支可以直接上傳 IG Reels、TikTok、YouTube Shorts 的短影音。
完成！回顧學到的概念
| 概念 | 用在哪 |
|---|---|
<Composition> 9:16 尺寸設定 | Step 1 |
| 漸層 + filter blur 背景 | Step 2 |
<Img> + staticFile() | Step 3 |
spring() 進場 + Math.sin() 持續動 | Step 4、8 |
<Sequence from> 控制進場時機 | Step 4~8 |
@remotion/google-fonts 中英混排 | Step 5 |
interpolate() + toLocaleString() 數字計數 | Step 6 |
| Stagger 進場節奏 | Step 7 |
| Safe zone 短影音平台規範 | Step 9 |
| 3D transform（perspective + rotate） | Step 4 |
本篇涵蓋的官方文件
- /docs/composition — Composition 尺寸與時長設定
- /docs/fonts — 字型載入與
@remotion/google-fonts - /docs/animation-math — interpolate、spring、sin 的應用場景
- /docs/animation-basics — 動畫基礎概念
- /docs/designing-visuals — 視覺設計最佳實踐
- /docs/background-image — 背景圖與漸層技巧
- /docs/measuring — 量測元素尺寸做動態排版
- /docs/img — 渲染安全的圖片元件
- /docs/staticfile — 載入
public/資源
常見問題
Q：中文字跟英文數字一起排版時高度對不齊？
A：中文字（Noto Sans TC）的 baseline 跟 Latin 字（Inter）不同，要把兩個 font-family 都宣告，讓瀏覽器選最適合的 glyph。或者用 CSS font-feature-settings: "tnum" 讓數字用 tabular 寬度，計數時不會跳動。
Q：上傳到 Instagram 後顏色變灰了？ A：IG 會把 sRGB 再壓縮一次，深色底的畫面特別容易被壓扁。對策：把主體顏色飽和度再拉高 10%，或用更亮的漸層底色。
Q：產品圖邊緣有鋸齒？
A：<Img> 預設不會對邊緣做反鋸齒。如果你的 PNG 去背不乾淨，可以在 CSS 上加 filter: drop-shadow(0 0 0.5px transparent) 強制觸發瀏覽器的 edge smoothing。
Q：Safe zone 的具體尺寸？ A：IG Reels 上 180、下 300；TikTok 上 200、下 280；YouTube Shorts 上 160、下 320。折衷方案：上 220、下 340 都留出來，任何平台都安全。
下一步
- T05：轉場特效大全——多場景影片 — 產品卡做完想接第二個場景？學轉場
- T12：短影音自動上字幕 — 加旁白字幕讓 Reels 更有說服力
- T14：參數化影片模板 — 把這個產品卡改成讀 JSON 批量產 100 張不同產品
有問題歡迎到 FB 社群 討論！