用 Remotion 做 YouTube 片頭動畫：Logo 揭露 + 品牌標語
5 秒的 YouTube 頻道片頭——Logo 從中央彈跳進場、光暈擴散、品牌標語滑入。全程 Claude Code 指令驅動，做成可重用的元件庫。
成品預覽
這支 5 秒的影片就是用接下來的步驟做出來的——完全用 Claude Code 指令驅動，沒有手繪、沒有剪輯軟體。繼續往下讀，你就能做出同樣的東西（或換成你的品牌色、Logo、標語）。
這篇會做出什麼
一支 5 秒的 YouTube 頻道片頭：
- 第 0~1.5 秒：深色背景 + 光暈從中央擴散
- 第 0.8~2.5 秒：Logo 從中央縮放彈跳進場
- 第 2.0~3.5 秒：頻道名稱從下方滑入
- 第 2.5~4.0 秒：品牌標語淡入
- 第 4.0~5.0 秒：全部一起向上滑出，為主影片內容讓路
做完之後會是一個可重用的元件——換 Logo、換標語、換顏色，直接套到任何頻道。
前置知識
建議先完成：
- Remotion Skills 安裝指南
- 第一支影片：從開啟 Remotion 到 AI 生成動畫 — 至少要懂
useCurrentFrame()跟interpolate()在幹嘛
素材準備：
- 一張 Logo 圖（PNG 去背，至少 512×512）
- 你的頻道名稱（例如「Debug 土撥鼠」）
- 一句品牌標語（例如「把複雜的工程講給你聽」）
Step 1：建立 Intro 專屬 Composition
Claude Code：
在現有 Remotion 專案新增一個 Composition：
- id: "YouTubeIntro"
- 尺寸 1920x1080
- fps: 30
- durationInFrames: 150（5 秒）
- 背景色 #0f172a
- 新建 src/compositions/YouTubeIntro.tsx
- 在 src/Root.tsx 註冊
元件內部先留一個空的 <AbsoluteFill>，後面再往裡面放東西。
打開 Studio 應該會看到一個全黑的 5 秒 Composition。
💡 為什麼用
<AbsoluteFill>？因為我們要做的是疊圖層——背景光暈、Logo、文字要同時存在於螢幕上但各自獨立動畫。完整概念見 /docs/absolute-fill 和 /docs/layers。
Step 2：放好 Logo 素材，讓 AI 能取得
把 Logo 檔案放進 public/：
public/
└── brand/
└── logo.png
Claude Code：
在 YouTubeIntro.tsx 中：
- 用 staticFile("brand/logo.png") 載入 Logo
- 改用 <Img> 元件顯示（不要用 <img>）
- Logo 放中央，尺寸 320x320
- 先不做動畫，單純放著就好
為什麼用 <Img> 而不是原生 <img>？
Remotion 會確保圖片在渲染前完整載入，避免「渲染出來缺圖」的問題。這是 Remotion 新手最常踩的雷之一。詳見 /docs/img。
💡
staticFile()把public/檔案轉成安全 URL 的細節在 /docs/staticfile。
Step 3：光暈背景動畫
Claude Code：
在 YouTubeIntro.tsx 的 Logo 下方（圖層順序上）加一個光暈背景：
1. 用一個 <AbsoluteFill> 包住
2. 中央放一個 800x800 的圓形 div
3. 背景用 radial-gradient，從 rgba(59, 130, 246, 0.4) 到透明
4. filter: blur(100px)
5. 動畫：從 scale 0 到 scale 1.5，用 spring() 彈跳
- frame 0 開始
- damping: 20
- stiffness: 80
6. 同時 opacity 從 0 到 1，用 interpolate()
回到 Studio，你應該會看到一個藍色光暈從中央擴散開來。光暈動畫到 45 幀左右（1.5 秒）停下。
💡
spring()物理參數的調整感（damping、stiffness、overshoot）看 /docs/spring 最直觀。
Step 4：Logo 彈跳進場
Claude Code：
現在讓 Logo 動起來：
1. 用 <Sequence from={24}> 包住 Logo，也就是 0.8 秒後才出現
2. 進場動畫（前 0.7 秒 ≈ 21 幀）：
- scale 從 0 彈跳到 1，用 spring() stiffness 120 damping 10
- opacity 從 0 到 1，前 5 幀完成
3. 第 2 ~ 3 秒：靜止停留
4. 第 3 秒起微幅呼吸：scale 在 1.0 ~ 1.03 之間來回
5. 圖層順序：光暈在後、Logo 在前
為什麼用 <Sequence from={24}>？
<Sequence> 是 Remotion 時間控制的核心工具——它會把內部的 useCurrentFrame() 重置為 0，讓你可以當成「這是一段獨立的動畫」來寫。想做「2 秒後才開始的動畫」幾乎一定要用 <Sequence>。
💡
<Sequence>的from、durationInFrames、layout完整 API 在 /docs/sequence。
Step 5：頻道名稱滑入
Claude Code：
在 Logo 下方加頻道名稱文字：
1. 用 <Sequence from={60} durationInFrames={45}> 包住
（從第 2 秒開始顯示 1.5 秒）
2. 文字內容先 hardcode 為 "Debug 土撥鼠"
3. 字型 Noto Sans TC，粗體，80px，白色
4. 位置：中央 Logo 下方 200px
5. 進場動畫：
- translateY 從 40 到 0
- opacity 從 0 到 1
- 用 spring() stiffness 100 damping 15
6. 完成動畫大約 20 幀內完成
Step 6：品牌標語淡入
Claude Code：
在頻道名稱下方加副標語：
1. 用 <Sequence from={75} durationInFrames={45}> 包住
2. 文字 "把複雜的工程講給你聽"
3. 字型 Noto Sans TC Regular，36px，顏色 #94a3b8
4. 位置：頻道名稱下方 30px
5. 進場：純淡入，前 15 幀從 opacity 0 到 1
6. 字間距 letter-spacing 0.1em（讓它有質感）
回到 Studio 從頭播放一次，你應該會看到完整的進場序列。
Step 7：全部一起退場
Claude Code：
最後 1 秒（frame 120 ~ 150）所有東西一起退場：
1. 整個 <AbsoluteFill> 根容器在 frame 120 之後套用：
- translateY: 從 0 到 -200
- opacity: 從 1 到 0
2. 用 interpolate() 加 Easing.in(Easing.quad) 讓退場有加速感
3. 注意不要影響到光暈、Logo、文字各自的進場動畫
這樣完整的 5 秒片頭就結束了。
Step 8：改成可重用元件
現在把所有東西參數化——這才是 Remotion 相比其他工具真正的殺手級優勢：
把 YouTubeIntro.tsx 改成可重用元件：
1. 定義 props interface：
- logoSrc: string
- channelName: string
- tagline: string
- primaryColor: string // 光暈顏色
- backgroundColor: string
2. 元件用這些 props 而不是 hardcode
3. 在 src/Root.tsx 用 defaultProps 傳入預設值
4. 註冊第二個 Composition "YouTubeIntroAlt"，用不同的 props
示範：橘色系的頻道
記得：
- 用 TypeScript interface
- defaultProps 要能通過 Remotion 的 type check
Claude 會把整個元件重構成接收 props 的版本，並且在 Root 註冊兩個不同品牌色的範例。
為什麼要這樣？ 因為以後你想做「某某頻道的片頭」，不需要 copy-paste 整個檔案——只要換 props 就好。甚至可以讀 JSON 批量產 100 個不同品牌的片頭。
💡 元件重用與
<Sequence>的最佳實踐在 /docs/reusable-components。更進階的 props-driven 做法會在 T14 參數化影片模板深入。
Step 9：預載 Logo 圖避免第一次播放閃爍
Claude Code：
用 @remotion/preload 預載 Logo 圖：
1. 在 src/Root.tsx 最上方加入：
import { preloadImage } from "@remotion/preload";
preloadImage(staticFile("brand/logo.png"));
2. 這樣 Player 第一次播放就不會閃一下再出現
順便把字型也預載，如果專案裡有用 @remotion/google-fonts 的話。
💡 預載為什麼重要、支援哪些資源類型、如何在 Player 和 Studio 中正確使用，完整說明在 /docs/preload。
Step 10：渲染輸出
幫我渲染 YouTubeIntro，輸出 1920x1080 MP4，
存到 out/youtube-intro.mp4，用 H.264，CRF 18 高品質
渲染完成後就有一支 5 秒的片頭可以直接接到你的 YouTube 影片前面。
完成！回顧學到的概念
| 概念 | 用在哪 |
|---|---|
<AbsoluteFill> 疊層容器 | Step 1、3 |
<Img> + staticFile() | Step 2 |
spring() 物理動畫 | Step 3、4、5 |
<Sequence from> 控制開始時間 | Step 4、5、6 |
interpolate() 線性映射 | Step 3、7 |
useCurrentFrame() | 全程 |
| 圖層順序（z-index 靠寫法順序） | Step 3、4 |
| 元件 props 化 | Step 8 |
@remotion/preload 預載資源 | Step 9 |
| 渲染 MP4 H.264 | Step 10 |
本篇涵蓋的官方文件
- /docs/sequence —
<Sequence>時間控制核心 - /docs/absolute-fill — 全螢幕疊層容器
- /docs/spring — 物理彈簧動畫
- /docs/staticfile — 載入
public/資源 - /docs/img — 渲染安全的圖片元件
- /docs/layers — 用 AbsoluteFill 疊圖層
- /docs/preload — 資源預載入
- /docs/reusable-components — 元件重用與 Sequence 最佳實踐
常見問題
Q：Logo 的 PNG 在 Studio 裡有時候會閃一下才出現？
A：這就是 Step 9 要解決的問題——@remotion/preload 會讓資源在第一次播放前就載入完成。沒做預載的話，Studio 第一次滑過圖片出現的幀會短暫看不到圖。
Q：spring() 的參數怎麼調才不會看起來很假？ A：兩個原則：
- 短動畫（< 0.5 秒）用
stiffness: 150~200、damping: 15~20，要有衝勁 - 長動畫（> 1 秒）用
stiffness: 50~80、damping: 20~30，要優雅 然後用 Studio 的 timeline 來回拖，看不順眼就改。
Q：為什麼我的 Logo 位置變成左上角而不是中央？
A：<AbsoluteFill> 預設是 display: flex，要把 Logo 放中央記得加 justifyContent: "center" 跟 alignItems: "center"。或者直接用 CSS transform。
Q：文字會糊掉怎麼辦？
A：Remotion 預設不會對 transform 做子像素反鋸齒。如果文字在 translateY 動畫中看起來糊，試試 willChange: "transform" 或把動畫結束位置的 translateY 設成整數。
下一步
- T04：Instagram Reels 產品展示卡 — 同樣是品牌視覺，但換成 9:16 直式
- T05：轉場特效大全——多場景影片 — 片頭做完接什麼？學轉場
- T12：短影音自動上字幕 — 把片頭跟正片字幕串起來
有問題歡迎到 FB 社群 討論！