vibe-motion/remotion-code-motion-explainer

Remotion 動畫解釋影片技能

建立一個連續、可編輯的視覺系統來呈現抽象解釋。展示每個概念如何變化，而非用不相關的動畫來裝飾旁白。

由 Bingo（@DWCD-Bingo）建立，由 Vibe Motion 組織維護。

載入相關指南

• 每次製作前請閱讀 references/code-motion-design.md。
• 每次製作前請閱讀 references/motion-production-patterns.md。
• 在實作和最終交付前請閱讀 references/production-and-qc.md。
• 處理 UI、產品、AI 工作流程、霓虹聚焦、波形、儀表板、設計工具或高擬真介面工作時，請閱讀 references/ui-motion-shot-library.md。
• 在研究或重製參考影片、After Effects 渲染、原型或螢幕錄影時，請閱讀 references/reference-reconstruction.md。
• 使用 assets/shot-library 作為內建的可編輯入門素材庫。在設計新鏡頭前，請先搜尋 assets/shot-library/shot-library.json。當有可重用元件符合語義任務時，將其複製到目標專案中；請勿直接原地編輯已安裝的技能。
• 在使用不熟悉的 API 前，請查閱已安裝的 Remotion 文件或最佳實踐技能。

建立製作合約

1. 確定經批准的腳本或解釋、旁白狀態、字幕權威、長寬比、影格率、時長、品牌系統、技術事實和交付格式。
2. 當有旁白時，將人工驗證的字幕視為時間權威。如果沒有旁白，則建立一個明確的節拍時間軸，並將影片設計為在靜音狀態下也能被理解。
3. 僅使用使用者提供、已授權、公共領域或明確可再分發的素材。
4. 絕不虛構產品行為、數值數據、科學關係或互動結果。
5. 偏好參數化的視覺系統，而非一次性硬編碼的場景。

執行工作流程

1. 將語言轉換為視覺狀態

• 將解釋拆分為子句層級的語義節拍。
• 對於每個節拍，記錄：
  • 旁白或螢幕上的陳述；
  • 敘事目的；
  • 輸入狀態；
  • 主要動詞；
  • 可見的轉換；
  • 輸出狀態；
  • 觀看者焦點；
  • 交接至下一個節拍。
• 將名詞、動作、數字、關係和狀態變化編譯為獨立的視覺演員。
• 識別跨節拍持續存在的持久物件。
• 選擇最簡單準確的表示方式：UI、流程、圖表、波形、公式、圖表、空間模型或 3D。
• 將計畫寫入 src/data/choreography-plan.json。

關卡：每個陳述都必須有可見的推理任務、表演者、結果和交接。

2. 鎖定視覺系統

• 定義網格、安全區域、間距、排版、色彩語義、深度、攝影機和運動曲線。
• 撰寫一個概念性句子來描述視覺世界。
• 為鉤子、最複雜的機制和結尾設計代表性的靜態影格。
• 在設計入場效果之前，先建立資訊量最大的英雄影格。
• 建立持久物件註冊表和世界座標計畫。
• 將複雜物件分解為有意義的移動部件，而非為平面的螢幕截圖製作動畫。
• 在整個過程中保持相同概念的視覺一致性。

關卡：靜態影格讀起來像一個系統，且複雜的影格可以由可編輯的元件組合而成。

3. 實作確定性的 Remotion 動畫

• 使用 useCurrentFrame()、interpolate()、spring() 和明確的影格範圍驅動動畫。
• 請勿使用 CSS 過渡、CSS 關鍵影格、沒有種子確定性的隨機值或獨立計時的瀏覽器動畫。
• 在有用時，透過 Props 和 Zod 模式將值參數化。
• 偏好 React、SVG 和 HTML。僅在概念需要時才使用 Canvas、WebGL 或 Three.js。
• 測量文字、限制範圍、驗證數值輸入，並避免依賴影格的副作用。
• 保持持久物件掛載，並在節拍之間改變其狀態。
• 在每個四到六秒的檢閱視窗中，組合兩到四個相容的運動原子。
• 為每個視窗提供設定、動作、可見結果和交接階段。
• 當結尾必須定住時，從同一個顯示影格凍結所有依賴時間的子元素。

關卡：渲染是確定性的、可編輯的、技術上準確的，並且在任意影格上都穩定。

4. 保持連續性和因果關係

• 在過渡中重複使用位置、物件身份、縮放、遮罩、方向和音效主題。
• 在引入下一個元素之前，先轉換或交接一個有意義的元素。
• 僅在揭示層級或關係時才使用攝影機移動。
• 避免重複的全螢幕淡入淡出和縮放重置。
• 除非是刻意的章節重置，否則在相鄰節拍之間保持至少一個視覺不變量。
• 讓因果關係清晰可讀：輸入移動、流程反應、輸出變得可見，攝影機揭示更大的系統。

關卡：靜音影片在連續解釋中仍能被理解。

5. 綁定旁白、標籤和音效

• 根據確切的字幕提示觸發標籤、數值、狀態和互動回饋。
• 保持旁白明顯優於音樂和效果。
• 僅對可見事件使用剋制的滴答聲、撞擊聲、掃掠聲和音調重音。
• 與運動計畫一同建立音效事件圖譜。
• 以有意的解決方式而非硬切來結束音樂和運動。

6. 審查、渲染和學習

• 優先渲染鉤子、最複雜的機制、方程式/數據狀態、過渡和結尾。
• 檢查入場、中點、資訊量最大、交接和停格影格。
• 審查連續的運動視窗及其重疊部分，而非僅看孤立的螢幕截圖。
• 建立涵蓋完整時間軸的接觸表。
• 透過逐像素比較兩個後期影格來驗證最終影格的停格。
• 檢查文字裁剪、安全區域、色彩對比、波形/數據正確性、遺失素材、音訊峰值、時長、影格率和編解碼器。
• 將審查證據儲存在 qc/workflow-evidence.json。
• 將修復和可重用元件記錄在 qc/production-learning.json。

關卡：完整渲染通過語義、連續性、因果關係、構圖、時機、技術和授權檢查。

拒絕

拒絕不準確的互動、虛構的數據、任意的移動、難以閱讀的標籤、扁平的流程圖、通用的幻燈片重置、旁白/字幕不匹配、未經授權的素材、硬編碼的個人路徑、非確定性的渲染、缺少運動視窗審查、跳過最終影格停格檢查，或將有品牌的參考副本呈現為可重用模板。

交付

傳回最終影片、可編輯的 Remotion 專案、時間軸、元件參數、經批准的輸入素材、使用時的音效分軌、接觸表、QC 證據以及一個簡短的可重用元件清單。

內建範例

• assets/showcase/code-motion-promo-30s.mp4：30 秒能力預告片。
• assets/showcase/ac-to-dc-explainer.mp4：科學解釋範例。
• assets/shot-library：可編輯的 Remotion 鏡頭庫和可搜尋目錄。