我用 Codex + Remotion，做了一條唐朝紙片分層動畫

原始來源與檔名：2026-07-14T091951+0800-我用 Codex + Remotion，做了一条唐朝纸片分层动画.md

SOURCE | 資訊源評估

• 準確性: 高 - 作者提供了從工具清單、腳本、依賴套件到具體配置參數 (如 zIndex, CSS filter) 的完整實戰細節，可復現性強。
• 易理解性: 高 - 採用流水線式 (Pipeline) 的拆解結構，將複雜的影片製作過程按步驟、按圖層、按工具清楚劃分。
• 閱讀策略建議: 建議重點閱讀第四段的「提示詞工程」與第五、六段的「層級動畫設計」，這體現了軟體工程中「關注點分離 (Separation of Concerns)」在視覺設計上的應用。

NAPKIN | 餐巾纸

餐巾纸公式

高質感紙片動畫 = Codex(調度中樞) + Imagegen(獨立素材生成) + Remotion(可編程動畫與排版) + F5-TTS(語音)

真正的紙片動畫核心不是「生成一張漂亮的圖」，而是「生成可解耦的圖層元件」並以代碼控制其時空關係。

一句话

透過將大語言模型 (Codex) 作為總控中樞，串聯生圖、去背、語音與代碼動畫引擎 (Remotion)，我們能打造一條可程式化、可批量復用的 AI 本地影音生產流水線。

餐巾纸草图

[ AI 生成 Pipeline ]
Imagegen(綠幕圖) -> Python(去背/拆圖)
F5-TTS(音訊) -> FFmpeg(微調)
       |
       v
[ Codex 控制台 (生成 React 程式碼) ]
       |
       v
[ Remotion 渲染引擎 ]
   z: 1 (背景：推鏡 1%)
   z: 2 (後排群臣：微動)
   z: 3 (主角皇帝：大幅入鏡 + 音效)
   z: 4 (前景：白邊 + 陰影)

NAPKIN | 餐巾紙

餐巾紙公式

N/A

一句話

N/A

餐巾紙草圖

N/A

ROUND 1: SKELETON | 骨架掃描

“這本書在說什麼”

• 核心問題: 如何打破 AI 一鍵生成影片「缺乏層次感與深度」的痛點，製作出精緻的、具備前後遮擋與景深的紙片分層動畫？
• 核心答案: 放棄讓 AI 直接生成影片。改由 AI 總控 (Codex) 調度多種專用工具，將畫面解構為背景、主角、配角等獨立圖層 (Imagegen + Python)，再用 React 程式碼 (Remotion) 賦予各圖層獨立的入場時間、動畫軌跡與音效。
• 論證結構: 實作教學型。先定義工具鏈，接著依序從「定鏡頭」、「拆圖層」、「生圖與去背」、「靜態排版」、「動態與遮擋設置」到「音效與渲染」，完整展示 10 個步驟的流水線。

章節骨架

1. 工具全景: 定義 Codex, Imagegen, Python, F5-TTS, Remotion, FFmpeg 的職責。
2. 確定鏡頭 (前置): 全景 vs 特寫，決定主次。
3. 四層拆解: 背景、後排、主體、前景。
4. 底板生成: 製作無人物純環境底圖。
5. 角色生圖與去背: 設定綠幕、白邊提示詞，再以 Python 腳本批量切割。
6. Remotion 靜態排版: 定義大小比例與 zIndex 遮擋。
7. 分類動畫設計: 依據角色重要性給予不同距離與延遲 (Delay) 的動效。
8. 立體感塑造: 利用 CSS drop-shadow 製作剪紙陰影與厚度。
9. 音訊合成: 旁白定時長，加上環境音與專屬入站音效。
10. 預覽與渲染: 以 FFmpeg 抽幀驗收並最終輸出。

ROUND 2: DISSECTION | 血肉解剖

“憑什麼這麼說”

論證鏈

單一影片生成模型無法精確控制畫面層次 --> 必須轉向模組化生產 --> 將視覺元素解耦為獨立 PNG (生圖+去背) --> 利用現代前端技術 (Remotion) 對圖層進行精確的數學與時間軸控制 --> 讓 Codex 擔任此工作流的自動化編排者 --> 實現可高度客製化且具立體感的紙片動畫

關鍵證據

1. 生圖反模式 (Anti-pattern)：作者明確指出「不要讓繪圖模型直接生成整段動畫，也不要把主要人物畫進背景」，這解決了 AI 生成常遇到的元素沾黏問題。
2. 角色分級程式碼: 展示了 primary, secondary, tertiary 角色的 distance, rise, startScale 參數差異，證明了程式化動畫能精準控制視覺焦點。
3. 錯峰入場 (Delay): 程式碼中 delay: 4, delay: 18 等設定，實證了「敘事建立順序」的重要性，打破了一次性全圖載入的生硬感。

隱形假設與邊界條件

• 隱形假設:
  • 使用者熟悉基本的終端機操作、React 開發環境 (Node.js/npm) 以及 Python 腳本執行。
  • AI (如 Codex) 具備足夠的上下文能力，能理解並修改包含 TypeScript, JSON, 音訊路徑的專案結構。
• 邊界條件:
  • 這套方案極其適合「紙片風」、「拼貼風」等 2D 平面元素營造 2.5D 立體感的視覺風格。
  • 若要製作高度擬真的 3D 空間運動或複雜的物理碰撞，Remotion 的 CSS 動畫會顯得力不從心。

ROUND 3: SOUL | 靈魂提取

“還能怎麼用”

• 作者盲點: 由於是一套本地端的重度開發流水線，對於缺乏程式背景的內容創作者來說，上手門檻極高，作者未提供一鍵封裝的 GUI 工具或自動化腳本來降低這段落差。
• 知識連接: 與軟體工程中的「資料驅動視圖 (Data-Driven View)」與「組合模式 (Composition Pattern)」完全契合；影片不再是像素的線性流，而是一個可被解析、覆寫、復用的 React 元件樹。
• 行動觸發: 若要進行大批量的短影音產出（如歷史解說頻道），這套架構是最佳實踐。立刻在本地初始化一個 Remotion 專案，並嘗試用程式碼讓兩張圖片產生不同的位移速度（視差滾動 Parallax）。

留白提問 (Guided Reflection)

• 當影片的本質從「像素」變成了「React 程式碼」與「JSON 設定檔」時，影片的 SEO 與可檢索性會發生什麼革命性的變化？
• 如果我們把這套流程打包成一個自動化 Agent，使用者只需輸入一句話，Agent 自動完成從拆解圖層到寫 Code 渲染的全部流程，那還剩下什麼是需要人類設計師介入的？

跨域映射

• 在 軟體架構，這叫 微服務架構 (Microservices) + 服務編排 (Orchestration)
• 在 動畫工業，這叫 多平面攝影機系統 (Multiplane Camera) (華特·迪士尼在 1930 年代發明的技術，如今在代碼中重現)

DEEP READ | 精讀指引 (Must-Read Segments)

[!IMPORTANT] 學習的本質需要「認知阻力」。請親自回到原文閱讀以下核心段落，感受原始論述的阻力，不要只依賴 AI 的總結。

1. 零、这条视频用了哪些工具: 強烈推薦閱讀這份工具清單。它完美示範了如何將 AI 從一個「許願池 (Prompt-in, Magic-out)」轉化為一個「工程系統 (Engineering Pipeline)」。
2. 四、用 Imagegen 生成角色，再用 Python 抠图拆层: 這裡的 Prompt 撰寫邏輯（純綠背景、白色剪紙描邊、完整不裁切）是將非結構化的生成式 AI 降維打擊成結構化素材的標準教材。

我用 Codex + Remotion，做了一條唐朝紙片分層動畫 (Architectural Deep Dive)

前言/背景

當前的 AI 影片生成工具多數採用「圖片轉影片 (Image-to-Video)」的整體生成模式，往往導致畫面缺乏景深層次、元素邊界沾黏且無法進行精確修改。本文作者打破此困境，提出了一套「工程化、代碼化」的 AI 影片製作工作流 (Pipeline)。透過將大語言模型 (Codex) 作為自動化總控端，串聯生圖、去背、語音與 React 動畫引擎 (Remotion)，成功實現了具備物理空間感與精準時間軸的「唐朝紙片分層動畫」。

章節詳細總結

1. 系統架構與工具鏈職責 (Toolchain Architecture)

這不是一套單一軟體，而是一個由多節點組成的本地微服務架構：

• 總控層 (Orchestrator)：Codex。負責將文案拆解為分鏡，並生成/修改專案中的 TypeScript 程式碼 (.tsx)、設定檔 (.json) 與指令稿。
• 資產生成層 (Asset Generation)：
  • 視覺：Imagegen (生成素材) + Python/NumPy (自動化去背、切割)。
  • 音訊：F5-TTS (零樣本語音克隆)。
• 渲染引擎層 (Rendering Engine)：Remotion。以 React 開發框架為核心，透過 CSS 控制動畫、圖層與音頻，最終渲染為 MP4。
• 驗證層 (Validation)：FFmpeg 用於抽幀測試與音軌檢查。

2. 資產解耦與模組化生成 (Asset Decoupling)

• 反模式 (Anti-Pattern)：禁止讓繪圖模型直接生成整段場景。一旦人物與背景合併，便無法實現視差滾動與獨立動效。
• 背景底板分離：只生成純粹的環境（山水、宮殿、紙張紋理）。
• 角色素材工程化 Prompting：要求模型生成帶有「白色剪紙描邊」、「純綠色背景」、「完整不裁切」的圖集 (Sprite Sheet)，再以 Python 腳本 (split_sheet.py) 自動切割為獨立具備透明通道的 PNG。

3. 基於 Remotion 的可程式化場景重構 (Programmable Scene Composition)

將解耦後的素材導入 React 專案中，以程式碼定義其物理與時空關係。

• Z軸與遮擋 (Z-Index & Depth)： 透過嚴格的圖層順序 (背景 -> 後排 -> 主體 -> 前景) 與 CSS Filter (陰影 drop-shadow)，以平面的前後關係建立 2.5D 的空間深度。
• 動態抽象與分類控制 (Categorized Animation Logic)： 不為每個物件硬編碼 (Hardcode) 動畫，而是設計統一的資料結構對角色進行分類：

  const roleMotion = {
    primary:   {distance: 78, rise: 55, startScale: 0.86},
    secondary: {distance: 58, rise: 38, startScale: 0.90},
    tertiary:  {distance: 38, rise: 22, startScale: 0.95},
  };

  主體 (primary) 擁有最大的移動幅度與縮放，配角 (tertiary) 僅微動。背景則僅作 1% 的極慢速推鏡 (Dolly in)。
• 時間軸錯峰 (Temporal Delay)： 利用 delay 屬性錯開各角色的入場時間（例如主角先入，配角隨後補充），避免畫面瞬間擁擠，建立流暢的敘事節奏。

4. 影音同步與自動化渲染 (A/V Sync & Rendering)

• 音訊分為四個獨立軌道：旁白 (驅動鏡頭時長)、背景音樂 (BGM)、章節轉場音效 (Impact/Riser) 與角色入場音效 (與角色 role 綁定的客製化音效)。
• 最終透過 NPM 腳本與 FFmpeg 完成本地的幀級預覽與 MP4 渲染輸出。

總結與結論

• 從「像素生成」走向「元件編排」：AI 視覺生成的最優實踐，是將其降維為「原子級素材」的生產器，再透過強大的傳統軟體工程 (如 React/Remotion) 進行確定性的排列組合。
• Pipeline as Code (流水線即代碼)：這套架構最大的價值在於「可復用性」。一旦場景邏輯、圖層結構與音效系統在代碼中被定義，未來只需抽換 PNG 與 JSON 文案，即可批量生產同風格的歷史、科普影片。
• AI 代理的理想落腳點：在這個工作流中，Agent (Codex) 不做粗放的端到端生成，而是精確地扮演「工程師與剪輯師」的角色，修改座標、調整延遲、調度終端指令，展現了高可控性 AI 協作的未來範式。