Codex + Remotion 教學：3分鐘教你使用 AI 製作動畫
用 Codex 搭配 Remotion 製作 AI 動畫，不用自己寫程式。從 Remotion 安裝、影片規則設定、Prompt 製作動畫，到透明背景輸出，完整整理實作流程。
以前要做 AI Agent、Transformer、GPU 這類知識型動畫，通常得自己想畫面、做動態設計。
但我最近實際用 Codex 搭配 Remotion 後，發現流程比想像中簡單很多。第一次把字體、影片規則和輸出格式設定好之後，後面甚至只要告訴 Codex「幫我用動畫解釋 AI Agent 的運作原理」，它就能自己製作、開啟預覽，再讓你直接用自然語言調整。
這篇會從零開始整理完整流程，包括 Remotion 安裝、素材與影片規則設定、AI 動畫 Prompt、如何讓動畫少一點文字多一點圖示，以及最後怎麼輸出透明背景影片。
Remotion 是什麼？為什麼可以搭配 Codex？
Remotion 是一套用 React 製作影片與動畫的工具，和一般剪輯軟體不同，它可以直接透過程式控制文字、圖形、動畫時間與畫面元素，因此很適合拿來製作流程圖、知識型動畫或大量需要重複產出的影片。
不過過去使用 Remotion 最大的門檻，就是需要具備一定的程式能力。
現在搭配 Codex 後，這件事簡單很多。你不一定要自己寫 React 或研究 Remotion 語法，只要告訴 Codex 想做什麼，例如「製作一支動畫，解釋 AI Agent 的運作原理」，Codex 就能協助建立動畫、開啟 Remotion 預覽，之後也可以直接用文字告訴它要修改哪個部分。
整個流程會變成：
描述動畫 → Codex 製作 → Remotion 預覽 → 調整 → 輸出影片
接下來就從安裝 Remotion 開始。
Step 1：安裝 Remotion
先到 Remotion 官網，首頁會看到一段安裝指令的Button(灰色那顆)：
npx create-video@latest
點一下就可以直接複製。
接著打開 Codex，建立一個新的工作區，例如命名為 remotion。
再把剛剛複製的指令貼進去，直接告訴 Codex：
npx create-video@latest
安裝這個。
接下來 Codex 就會開始執行安裝，並建立一個新的 Remotion 專案資料夾。
之後所有動畫、字體、Logo、影片素材與輸出內容，都可以放在這個專案中，不需要自己先理解 Remotion 的檔案結構。
Step 2：建立影片素材資料夾
專案建立完成後，直接將這串Prompt丟給Codex：
我要配置之後 Remotion 製作影片會使用的內容，包括字體、顏色、風格與輸出格式。
請幫我建立適合存放字體、Logo 與其他影片素材的資料夾，之後 Codex 製作影片時可以直接使用。
Codex 完成後會顯示整個資料夾結構。
如果要加入自己的字體，也不用自己找路徑，直接輸入：
打開字體資料夾。
接著把字體檔拖進去即可。
之後製作影片時，就可以直接要求 Codex 使用這套字體，不需要每支影片重新設定。
Step 3：設定 Remotion 影片製作規則
素材準備完成後，下一步是設定之後製作影片都會遵守的固定規則。
這一步的好處是，只需要設定一次。之後不管要做 AI Agent、Transformer 或其他動畫，Codex 都可以先讀取這份規則，不需要每次重新指定字體、顏色與輸出格式。
可以直接把以下 Prompt 丟給 Codex：
以下是影片整體的製作規則，請將這些規則放到適合的位置，讓 Codex 每次使用 Remotion 製作影片前都會先讀取。
・字體：使用我放在 fonts 資料夾中的字體。
・標題：水平置中，距離畫面上方保留 100px，標題文字使用白色。
・強調色：#00FF00
・透明背景：影片背景需保持透明。
・每次影片製作完成後不要直接輸出，先開啟預覽讓我確認。
・輸出設定：
General 裡的 Codec 設定為 ProRes。
ProRes Profile 設定為 4444 XQ。
Picture 裡的 Image Format 設定為 PNG。
其他要求：
1. 能用動畫表達的內容就不要使用文字，文字盡量少。
2. 如果需要呈現分類內容，使用漸層懸浮卡片。
3. 使用 Logo 時，先將 Logo 去背成透明背景；如果 Logo 是黑色，請先處理成白色。
4. 每張卡片出現的間隔時間為 1 秒，上一張卡片動畫完整結束後，再開始下一張卡片動畫。
請將以上內容整理成 Remotion 專案的固定製作規則，之後每次建立新影片時都先讀取這份規則。
這裡的字體、顏色、卡片樣式都可以依照自己的影片風格修改。
Step 4：讓 Codex 開始製作 AI 動畫
基礎設定完成後，就可以正式開始做動畫。
如果已經知道畫面想怎麼呈現，可以直接把內容告訴 Codex，例如：
幫我用 Remotion 做一個新的影片，標題是：「AI 如何回答你的問題」
畫面呈現 5 個步驟：
1. 接收問題
2. 拆解 Token
3. 理解上下文
4. 預測下一個 Token
5. 產生回答
如果連動畫要怎麼呈現都還沒想好，其實還可以更簡單：
製作一支新的影片，用動畫講解 AI Agent 的運作原理。
Codex 會根據主題自己設計動畫內容，完成後再開啟 Remotion 預覽，讓你直接確認效果。
Step 5：預覽並直接用文字修改動畫
影片製作完成後，Codex 會開啟 Remotion Studio，讓你直接預覽動畫效果。
這時如果有任何地方不滿意，不需要自己進去改程式，可以直接回到 Codex 描述要調整的地方，例如：
動畫速度慢一點，圖示放大，文字再少一點。
或是：
第二段出現太快，請延後一秒再出現。
Codex 修改完成後，再回到 Remotion Studio 確認即可。
整個流程其實很接近一般和設計師溝通修改，只是現在改動畫的人變成 Codex。
Step 6：輸出影片與透明背景設定
確認動畫沒有問題後，就可以從 Remotion Studio 輸出影片。
先點擊左側的影片名稱，再開啟 Render 視窗。如果只是一般影片，確認格式後直接輸出即可。
如果希望影片是透明背景，方便之後放進 Premiere Pro、Final Cut Pro 或 DaVinci Resolve 疊在其他畫面上，記得檢查以下設定：
General
- Codec：ProRes
- ProRes Profile：4444 XQ
Picture
- Image Format：PNG
確認完成後，點擊 Render Video，Remotion 就會開始輸出影片。
完成後可以在專案的 out 資料夾找到剛剛輸出的檔案。
常見問題 FAQ
一定要會寫 React 才能用 Remotion 嗎？
不一定。Remotion 本身是以 React 為基礎，但這套流程主要是讓 Codex 處理程式部分。你只需要描述想做的動畫、確認預覽效果，再用文字告訴 Codex 要怎麼修改。
為什麼 Codex 做出來的動畫都是文字？
通常和 Prompt 有關。如果你只提供標題與文字內容，Codex 很容易做成文字卡片。想讓動畫更有視覺效果，可以直接要求使用圖示、節點、箭頭、連線與流程動畫，並減少文字。
Remotion 可以輸出透明背景嗎？
可以。輸出時使用支援 Alpha Channel 的 ProRes 4444，並將 Picture 的 Image Format 設定為 PNG，就可以保留透明背景，之後再放進剪輯軟體使用。
更多 AI 動畫可以怎麼做？
前面的環境與規則都設定完成後，之後其實不用每次都寫很長的 Prompt。
你只需要在第一次把 Remotion、字體、影片規則與輸出設定準備好後，後面的流程其實就剩下：
告訴 Codex 想做什麼 → 預覽動畫 → 用文字調整 → 輸出影片。
對原本不熟 Remotion 或不會寫 React 的人來說，這也是 Codex + Remotion 最方便的地方：不用先學完整套動畫語法，也可以直接從想做的內容開始。
Resource:
