第一支影片：從開啟 Remotion 到 AI 生成動畫

這篇會學到什麼

1. 啟動 Remotion Studio 即時預覽
2. 用 Claude Code 下指令生成第一支動畫
3. 在 Studio 裡調整、預覽
4. 匯出 MP4 成品

開始前先完成：T1 安裝 Remotion Skills（包含 npx create-video、安裝相依與 Skills）。本篇不重複安裝步驟，專注在「怎麼做第一支片」。

完全不需要會寫 React，只需要會打字。

Step 1：啟動 Remotion Studio

npm run dev

瀏覽器會自動打開 Remotion Studio（通常在 http://localhost:3000）。

你會看到：

• 左側 — Composition 列表（你的影片清單）
• 中央 — 影片預覽畫面
• 下方 — 時間軸，可以拖拉播放

目前是空白的，沒關係，接下來讓 AI 幫你填滿。

Step 2：啟動 Claude Code

開一個新的終端機視窗（不要關掉 Studio），進入同一個專案：

cd my-first-video
claude

Claude Code 啟動後，它會自動讀取 .agents/skills/ 裡的 Remotion Skills，準備好了。

Step 3：下你的第一個指令

範例 1：基礎文字動畫

直接在 Claude Code 裡輸入：

建立一支 5 秒的影片：
- 深藍色背景（#1e293b）
- 白色標題文字「Hello Remotion」
- 文字從透明淡入到完全顯示，花 1 秒
- 停留 3 秒
- 最後 1 秒向左滑出畫面
- 影片尺寸 1920x1080，30fps

Claude 會自動：

1. 建立一個新的 Component（例如 HelloRemotion.tsx）
2. 在 src/Root.tsx 註冊 Composition
3. 使用 useCurrentFrame()、interpolate() 寫動畫邏輯

回到 Remotion Studio，你應該就能看到影片出現在左側列表裡。點擊播放，確認效果。

範例 2：多段出場動畫

建立一支 8 秒的影片，背景色 #0f172a：

1. 第 0-2 秒：標題「為什麼要用 Remotion？」從上方滑入 + 淡入
2. 第 2-4 秒：三個要點依序從左邊滑入，每個間隔 0.5 秒
   - 「✅ 用程式碼控制每一幀」
   - 「✅ React 生態系全部能用」
   - 「✅ AI 一句話生成動畫」
3. 第 4-7 秒：停留展示
4. 第 7-8 秒：全部一起淡出

文字用白色，要點文字大小比標題小一點。用 spring 動畫讓滑入有彈性感。

這個範例會用到 <Sequence>（控制出場順序）和 spring()（彈跳效果），是很常見的解說影片片段。

範例 3：數字跳動動畫

做一個 6 秒的數據展示動畫：

- 背景：白色
- 中央顯示一個大數字，從 0 跳動到 12,847
- 數字下方有一行小字「總觀看次數」
- 數字用 spring 動畫，前 3 秒跳動，後 3 秒停留
- 數字顏色用藍色（#3b82f6），要有千分位逗號
- 字體要大，數字至少 120px

這種數據動畫在商業簡報、年度回顧影片裡超常用。

Step 4：不滿意？直接跟 AI 說

生成後覺得哪裡不對，不需要自己改程式碼，直接用自然語言修正：

調整速度：

動畫太快了，淡入的時間從 1 秒改成 2 秒

改顏色：

背景改成漸層色，從 #1e293b 到 #0f172a，由上到下

加元素：

在右下角加一個半透明的 Logo 浮水印，圖片路徑是 public/logo.png

改字型：

標題改用 Noto Sans TC 字體，粗體

每次修改後，Remotion Studio 會即時更新預覽，你可以馬上看到效果。

Step 5：渲染輸出 MP4

滿意了？渲染成影片檔：

方法一：在 Studio 裡渲染

點擊 Studio 右上角的 Render 按鈕，選擇：

• 格式：MP4
• Codec：H.264（通用）或 H.265（更小檔案）
• 畫質：CRF 18（高品質）

方法二：用指令渲染

npx remotion render src/index.ts MyComposition out/video.mp4

把 MyComposition 換成你的 Composition ID（在 Root.tsx 裡定義的那個 id）。

方法三：叫 Claude 幫你渲染

幫我渲染剛才做的影片，輸出成 MP4，存到 out 資料夾

完整流程回顧（假設已照 T01 安裝好專案 + Skills）

1. npm run dev                  → 開 Studio
2. claude                       → 開 AI
3. 用自然語言描述你要的影片       → AI 寫程式
4. Studio 即時預覽              → 確認效果
5. 不滿意就跟 AI 說             → 修改
6. 渲染輸出                     → 拿到 MP4

就這麼簡單。整個過程你不需要寫任何一行程式碼。

Prompt 小技巧

寫 prompt 的時候，越具體效果越好：

關鍵原則：

• 明確指定秒數和時間點
• 給出精確色碼而不是「藍色」
• 說清楚動畫類型（淡入、滑入、縮放、彈跳）
• 指定尺寸（1920x1080、1080x1080 等）

下一步

學會基礎之後，可以挑戰：

• 動畫基礎：interpolate 與 spring 深入理解
• Sequence 與時間控制
• 加入圖片、影片、音訊素材
• 作品展示 — 看看別人做了什麼

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