YouTube 縮圖產生器：用 Remotion Stills 批量產品牌化縮圖

成品預覽

14 秒的示範：先把一張「React 完整教學 #01」縮圖從零組出來（紅條、大字標題、作者 badge、集數標籤），然後展示用同一個模板批量產出 6 張不同的縮圖（#02 ~ #07）。renderStill() 一秒就能跑完。

這篇會做出什麼

一個可以讀 JSON 批量產 YouTube 縮圖的系統：

一個 Still Composition（不是影片，是單張圖）
品牌化設計：背景漸層、大字標題、表情符號、頻道 Logo、閃亮裝飾
讀 src/data/episodes.json 裡的 10 集資料，批量產 10 張 PNG
每張 1280×720，上傳 YouTube 正好的規格

做完後，以後錄新一集只要在 JSON 加一筆就能產縮圖，不需要打開 Photoshop。

前置知識

T2 第一支影片
有一張頻道 Logo（PNG 去背）

Step 1：新增 Still Composition

Claude Code：

新增一個 Still Composition（不是 Composition）：

1. id: "YouTubeThumbnail"
2. 用 <Still> 而不是 <Composition>
3. width 1280, height 720
4. 新建 src/compositions/YouTubeThumbnail.tsx
5. 在 src/Root.tsx 註冊

<Still> 跟 <Composition> 差在哪？ <Still> 沒有時間軸，只有「這一幀」。沒有 durationInFrames，沒有 fps，也不能用 <Sequence> 或 <Audio>。就是一張圖。

💡 Stills 完整用法在 /docs/stills。

Step 2：做縮圖的底層設計

YouTubeThumbnail.tsx 畫面分三層：

1. 背景：深藍到紫的對角漸層 (#0f172a → #581c87)
2. 中央：標題文字「這篇文章」，96px 白色粗體 Noto Sans TC
3. 左上角：Logo 「Debug 土撥鼠」120x120
4. 右下角：集數標籤 "EP 12" 黃色 #facc15

先 hardcode，下一步再 props 化。

Step 3：加「吸睛元素」

YouTube 縮圖的黃金公式：大字 + 表情 + 對比色箭頭。

在縮圖加更多吸睛元素：

1. 右邊一個大表情 🎬（320px）旋轉 -8 度
2. 中央標題加黃色下劃線
3. 左下角加一個紅色圓形背景 + 白字 "NEW"
4. 右上角加爆炸裝飾（SVG，黃色星形）
5. 整張圖加細微的 box-shadow inset 做「深度感」

為什麼要這樣設計？ YouTube 的演算法會把縮圖縮到很小顯示在推薦欄，所以對比要強、文字要大、主題要明確。你的縮圖在手機上是 200px 寬——細節看不到，輪廓要清楚。

Step 4：把縮圖參數化

把 YouTubeThumbnail 改成接 props：

interface ThumbnailProps {
  episode: number;
  title: string;
  emoji: string;
  isNew: boolean;
  accentColor: string;  // 預設黃
}

1. 所有 hardcode 值改用 props
2. Root.tsx 用 defaultProps 傳入一集範例
3. 註冊一個第二個 composition 示範不同 props

Step 5：建立集數資料庫

新建 src/data/episodes.json：

[
  { "episode": 12, "title": "用 AI 寫 React 到底行不行", "emoji": "🤖", "isNew": true, "accentColor": "#facc15" },
  { "episode": 11, "title": "我的終端機速度暴增 10 倍的秘密", "emoji": "⚡", "isNew": false, "accentColor": "#10b981" },
  { "episode": 10, "title": "為什麼你的 Postgres 查詢這麼慢", "emoji": "🐘", "isNew": false, "accentColor": "#3b82f6" },
  ...（10 集）
]

然後在 Root.tsx 用 .map() 為每一集註冊一個 Still composition：
id 為 "Thumbnail-EP{episode}"

Step 6：批量輸出 PNG

終端機執行：

npx remotion render YouTubeThumbnail out/thumbnails/ep12.png

但是 10 集手動執行很笨。寫腳本：

新建 scripts/render-thumbnails.mjs：

1. 從 src/data/episodes.json 讀所有集數
2. 對每一集執行 bundle + renderStill（用 @remotion/renderer）
3. 輸出到 out/thumbnails/ep-{n}.png
4. 執行完顯示總計時間

在 package.json 加 "thumbnails": "node scripts/render-thumbnails.mjs"
npm run thumbnails 就能一次產完 10 張。

renderStill vs renderMedia：

renderStill 只產一張圖，快很多（不用編碼影片）
renderMedia 才是產影片
縮圖專用 renderStill

💡 renderStill 的完整 API 在 /docs/renderer/render-still。SSR 的概念在 /docs/ssr。

Step 7：字型最佳化

縮圖字型一定要載入——不然 Render 時會 fallback 到系統字型，中文變醜。

用 @remotion/google-fonts 載入 Noto Sans TC：

1. npm install @remotion/google-fonts
2. 在 src/fonts.ts：
   import { loadFont } from "@remotion/google-fonts/NotoSansTC";
   const { fontFamily } = loadFont("normal", { weights: ["700", "900"] });
   export { fontFamily };
3. 在 YouTubeThumbnail 用 fontFamily

💡 字型載入的所有方法（Google Fonts、本地字型、WOFF）在 /docs/fonts。

Step 8：加預覽頁面

Remotion Studio 的 Thumbnails 頁籤會顯示所有 Still composition 的預覽——打開就是 10 張縮圖並排。可以即時切換 props 看效果。

這是 Remotion 比 Photoshop 好用的地方：你可以拖 props slider 即時看結果。

💡 Visual editing 與 schema 驅動的預覽在 /docs/visual-editing 和 /docs/schemas。

完成！回顧學到的概念

概念	用在哪
`<Still>` 靜態 composition	Step 1
Props 化 + defaultProps	Step 4
JSON 驅動批量註冊	Step 5
`renderStill` 批量渲染腳本	Step 6
`@remotion/google-fonts`	Step 7

本篇涵蓋的官方文件

/docs/stills — Still compositions
/docs/parameterized-videos — Props 驅動
/docs/fonts — 字型載入
/docs/ssr — Server-side rendering 概念
/docs/renderer/render-still — renderStill API

常見問題

Q：縮圖字型載入失敗變方框？ A：Remotion 的 Render 是在一個空的 Chromium，沒有系統字型。必須用 @remotion/google-fonts 或 loadFont 明確載入。

Q：能產透明背景的 PNG 嗎？ A：可以。renderStill 加 imageFormat: "png"，然後把背景 backgroundColor 設成 rgba(0,0,0,0)。

Q：縮圖的字太長跑出邊界？ A：用 @remotion/layout-utils 的 fitText 或 measureText 量測文字寬度，動態調整 fontSize。看 /docs/measuring。

Q：能產圖又產影片片頭嗎？ A：可以——同一個設計拆成一個 <Still>（縮圖）和一個 <Composition>（片頭），共用相同的視覺元件。這才是 Remotion 真正的價值。

下一步

T14：參數化影片模板 — 影片版的縮圖產生器
T16：批量渲染——CSV 一次產 100 支影片 — 更大規模的自動化

有問題歡迎到 FB 社群討論！