用 Claude Code + Remotion，靠打字就能做影片
你有沒有想過，做一支有動畫、有轉場、有字幕的影片，完全不用打開 Premiere 或 After Effects？
不是用 AI 生成那種模糊的、無法編輯的影片片段，而是精準可控、每一幀都能調整的專業級動畫。而且整個過程，你只需要「打字」。
這就是 Remotion + Claude Code 帶來的全新工作流。
想跟一群 vibe coder 一起動手做？加入「用AI發電」社群 →
Remotion 是什麼？
Remotion 是一個用 React 寫影片的框架。你沒看錯——就是前端工程師熟悉的 React。
傳統影片製作是在時間軸上拖拽素材。Remotion 的做法完全不同：你寫 React 元件，Remotion 把它逐幀渲染成 MP4。
一個按鈕淡入？那是一段 interpolate() 函式。Logo 彈跳出場？那是 spring() 物理動畫。文字一段一段出現？那是 <Sequence> 元件控制時間軸。
核心概念很簡單：
- Composition — 定義影片的長寬、幀率、總時長
- useCurrentFrame() — 取得當前幀數，所有動畫靠這個驅動
- interpolate() — 在指定幀範圍內做數值映射（淡入、位移、縮放）
- spring() — 彈簧物理動畫，自帶阻尼設定
- Sequence / Series — 控制元素出現的時序
import { useCurrentFrame, interpolate } from 'remotion';
const FadeInTitle: React.FC = () => {
const frame = useCurrentFrame();
const opacity = interpolate(frame, [0, 30], [0, 1], {
extrapolateRight: 'clamp',
});
return (
<h1 style={{ opacity, fontSize: 60, color: 'white' }}>
用 AI 發電
</h1>
);
};
30 幀內，標題從透明漸變為完全可見。就這麼直覺。
Claude Code 怎麼進場？
Claude Code 是 Anthropic 推出的 CLI 工具。你在終端機裡跟 Claude 對話，它直接幫你讀檔、寫程式、跑指令。
Remotion 團隊最近推出了 Agent Skills——一組教 Claude 理解 Remotion 架構的指令集。裝上之後，Claude 就知道：
- 怎麼用
<OffthreadVideo>嵌入影片 - 怎麼用
<TransitionSeries>做轉場 - 怎麼用
spring()配彈簧動畫 - Remotion 元件不能用
useState（因為是逐幀渲染，不是互動式 UI）
這代表你可以用自然語言描述你要的影片，Claude 直接幫你寫出能渲染的 React 程式碼。
五分鐘上手流程
1. 建立 Remotion 專案
npx create-video@latest
選擇：
- 安裝 Skills（讓 Claude 理解 Remotion）
- 啟用 TailwindCSS
- 選 Blank 模板
2. 啟動預覽
cd my-video
npm install
npm run dev
瀏覽器會打開即時預覽視窗，你改程式碼，影片即時更新。
3. 開啟 Claude Code
另開一個終端機：
cd my-video
claude
4. 開始下指令
直接用中文或英文描述你要的影片：
「做一個 10 秒的開場動畫，深藍色背景，白色標題『用 AI 發電』從下方彈入，3 秒後淡出，換成三個功能卡片從左側滑入。」
Claude 會：
- 建立 React 元件
- 設定 Composition 參數
- 用
spring()+interpolate()寫動畫 - 用
<Series>排列時序
你在預覽視窗馬上看到結果。不滿意？繼續跟 Claude 說：
「標題再大一點，彈跳幅度小一點，卡片之間加 fade 轉場。」
它會直接改程式碼。這就是 vibe coding——你描述感覺，AI 負責實作。
5. 渲染成 MP4
滿意之後：
npx remotion render MyComp out/video.mp4
完成。一支專業動畫影片，從頭到尾你只打了字。
Remotion 元件 ≠ 一般 React 元件
這是很多人容易搞混的地方。Remotion 元件看起來像 React，但行為完全不同：
| Remotion 元件 | 一般 React 元件 | |
|---|---|---|
| 動畫驅動 | useCurrentFrame() 幀數 | 事件、useState |
| 互動性 | 無（不能 onClick） | 完整事件處理 |
| 副作用 | 禁止 useEffect | 自由使用 |
| 渲染方式 | 逐幀確定性渲染 | 即時互動渲染 |
| 隨機性 | 必須用 random('seed') | 可用 Math.random() |
記住這個原則：Remotion 元件的一切變化，都來自幀數，而不是使用者操作。
實際能做什麼？
有了 Remotion + Claude Code，你可以快速產出：
- 產品介紹影片 — 截圖 + 動畫文字 + 轉場，自動化量產
- 社群媒體短影片 — 統一模板，改文字就能批量生成
- 課程片頭/片尾 — 品牌動畫，一次做好反覆使用
- 數據視覺化動畫 — 圖表、數字動態展示
- YouTube 頻道開場 — 粒子效果、文字動效、品牌色系
關鍵優勢：因為是程式碼驅動，一個模板可以生成上千種變體。改個文字、換張圖，就是新影片。這在傳統影片編輯器裡要做到，是不可能的工作量。
CLAUDE.md：讓 AI 更懂你的專案
Remotion + Claude Code 的秘密武器是專案根目錄的 CLAUDE.md 檔案。這是給 Claude 的「使用說明書」，告訴它：
- 專案結構長怎樣
- Remotion 的核心 API 怎麼用
- 元件規則是什麼
- 跟一般 React 有什麼不同
Thariq Shihipar（Claude Code 團隊成員）公開分享了一份 Remotion 專用的 CLAUDE.md，涵蓋了完整的 Remotion 元件規則、動畫 API、和最佳實踐。
如果你要認真用 Claude Code 做影片，強烈建議把這份文件放進你的專案。它會讓 Claude 生成的程式碼品質大幅提升——從「堪用」直接跳到「可直接渲染」。
這跟 AI 影片生成工具有什麼不同？
市面上有很多 AI 影片工具（Sora、Runway、Pika 等），它們用 diffusion model 從文字生成影片畫面。
Remotion + Claude Code 走的是完全不同的路線：
| AI 影片生成（Sora 等） | Remotion + Claude Code | |
|---|---|---|
| 輸出 | AI 生成的畫面 | 精確的程式碼渲染 |
| 可編輯性 | 幾乎不能改 | 每一行程式碼都能調 |
| 一致性 | 每次生成都不同 | 確定性渲染，結果永遠一致 |
| 規模化 | 一次一支 | 一個模板生成千支 |
| 適合場景 | 創意探索、概念影片 | 品牌影片、產品行銷、自動化 |
它們不是競爭關係，而是互補。AI 生成工具適合「我不知道要什麼，讓 AI 給我靈感」。Remotion 適合「我知道要什麼，讓 AI 幫我快速做出來」。
給你的行動建議
如果你是 vibe coder，Remotion 值得你花一個下午試試：
- 不需要影片製作經驗 — 會用 Claude Code 寫網頁，就會用它做影片
- 中文指令完全 OK — Claude 理解中文描述，直接生成對應程式碼
- 從簡單開始 — 先做一個 5 秒的標題動畫，感受一下流程
- 善用 CLAUDE.md — 裝上 Remotion Agent Skills，或手動放入 CLAUDE.md
- 拿來做你的專案影片 — Hackathon demo、產品介紹、課程素材都是好起點
這就是 vibe coding 的精神——你負責想像，AI 負責實現。只是這次，實現的不是網站，而是影片。
想要更多實戰指導？
看完教學，最怕的就是「然後呢？」——自己試了兩下卡住，沒人問，就放棄了。
在「用AI發電」社群，Serena 和其他全端工程師每週都在帶大家用 Claude Code 動手做專案。從網頁到影片、從 prompt 到部署，有人一起走，進步快很多。
遇到問題？社群裡隨時有人回應。想看別人怎麼做？每週都有成員分享自己的作品和踩坑經驗。
社群成員專屬福利：
- 每週直播教學 + 專案實作
- 跨領域會員互助（設計、行銷、開發都有人）
- 完整課程庫持續更新
- Hackathon 挑戰 + Meetup 線下聚會
透過 Serena 的邀請連結加入，可享 早期成員限定價 $25 $20.50/月，終身鎖價：