Adaptive React & Remotion Motion Graphics Skill（自適應 React 與 Remotion 動態圖形技能）
本技能引導使用 React 和 Remotion 設計、情境感知藝術指導、流暢敘事結構編排，以及無頭渲染工作室級動態圖形。
核心哲學： 「形式追隨脈絡。」 切勿將僵化的模板或固定的幕數強加於每個影片。首先評估品牌、時長、長寬比和受眾，然後自主選擇理想的結構原型和現代設計語言，以構建專屬的 React 組合。
1. 飛行前資產查詢與評估（第 0 步）
在編寫程式碼或渲染之前，執行資產查詢與脈絡診斷：
🎯 強制資產查詢規則（Asset Inquiry Rule）
除非使用者已在提示中明確提供圖像檔案、標誌或設計 token，否則你必須主動詢問使用者現有資產：
查詢標準模板（Asset Inquiry Template）： 「請問您是否有要用於影片的品牌標誌（SVG/PNG）、產品截圖、實拍照片、官方色碼（HEX）、標語/文案等資產？
- 若有現有資產：請提供檔案路徑或放入專案
public/資料夾，我們將為您精確對應到影片中。- 若無資產或希望我們自行製作（說『幫我處理』）」：我們將自行還原品牌/組織的官方 CI 向量，並設計電影級視覺與自訂 UI 元件，為您完成影片。」
3 軌資產執行路線：
- 路線 A（使用者提供資產）：
- 優先檢查本地工作區 /
public/資料夾。 - 透過
staticFile('...')匯入 SVG 向量路徑、高解析度圖片和截圖。 - 應用 Ken Burns 微平移（參考
references/asset-orchestration.md）和 3D 透視模型。
- 優先檢查本地工作區 /
- 路線 B（零資產 / 自主生成）：
- 如果使用者說「沒有」或「幫我處理」，或未提供任何資產：絕不卡住或受阻。
- 自主重建官方企業識別（CI）向量標記（參考
references/brand-identity-and-ci.md）。 - 綜合領域真實的視覺隱喻、風格化卡片、向量徽章和幾何元素。
- 路線 C（混合編排）：
- 使用者僅提供標誌或網址：提取顏色 token，並圍繞其自主建構產品 UI、儀表板和敘事世界。
專案脈絡診斷（4 個維度）
1. 目標平台與長寬比：
• 16:9 橫向 (1920×1080) -> YouTube、首頁登陸頁、主題演講展示影片
• 9:16 直立 (1080×1920) -> TikTok、Instagram Reels、YouTube Shorts
• 1:1 正方形 (1440×1440) -> Twitter/X 動態、Instagram 貼文、觸感 UI 循環
• 4:5 直向 (1080×1350) -> 社交行銷動態
2. 時長與節奏：
• 超短 (3–7s) -> 動態標誌開場、循環簽名元素、微互動
• 短篇 (8–15s) -> 高留存社交 Reels、病毒式產品特色、電梯簡報
• 中篇 (15–30s) -> 完整品牌識別影片、全面的產品發表
• 長篇 (30–60s) -> 多章節產品解說、公司週年慶、展示影片
3. 實體身份與調性：
• 企業 / 航空公司 / 汽車 -> 莊重、恢弘、流線、奢華
• 高成長科技 / SaaS / AI -> 俐落、觸感、超快節奏、鈦金屬暗色
• 學術 / 大學 / 文化機構 -> 歷史感、權威、編輯襯線、知性
• 消費 / 創意 / 生活風格 -> 活潑、觸感、彈性、文字排版遊戲
4. 敘事弧線與訊息層級：
• 鉤子 (0–20%) -> 論證/功能 (20–70%) -> 品牌收束與 CTA (70–100%)
2. 自適應結構原型
選擇自然契合時長與目標的敘事結構——當靈活循環或雙拍點更優時，切勿強制使用僵化的 4 幕結構：
| 原型 | 典型時長 | 節奏與場景結構 | 最佳用途 |
|---|---|---|---|
| A. 動態開場 / 微循環 | 3s – 6s (6–12 拍) | 單焦點動量：即時視覺鉤子 → 連續無縫變形 → 英雄標誌鎖定（循環接縫 delta < 0.05）。 | 標誌揭示、簽名 UI 循環、應用程式載入狀態 |
| B. 直立社交 Reel / Shorts | 8s – 15s (16–30 拍) | 3 秒規則：0–1s 大膽拇指停止鉤子 → 2–10s 快速動態論證（3 個交錯快切） → 11–15s 有力 CTA。 | Instagram Reels、TikTok、YouTube Shorts |
| C. 敘事品牌影片 | 15s – 30s (30–60 拍) | 4 幕交響弧線：出發/鉤子 (0–20%) → 實質/網絡 (20–55%) → 高空提升 (55–80%) → 標誌性收束 (80–100%)。 | 主要品牌影片（例如大韓航空、Apple 級別發表） |
| D. 多章節解說影片 | 30s – 60s (60–120 拍) | 章節旅程：痛點鉤子 → 架構剖析 → 深度功能展示 → 社會證明與生態系統 → 最終品牌鎖定。 | SaaS 解說、機構概覽、投資者簡報 |
| E. 連續形狀變換 | 任意時長 | 不間斷身份：一個主要容器從不切出或離開畫面；連續變換尺寸、圓角和內部內容。 | 觸感 UI 展示、產品變形循環 |
3. 現代設計語言光譜
自主選擇符合實體個性的視覺語言：
[1. 瑞士新粗獷主義] 超嚴謹網格、大膽無襯線黑體（Geist、Inter）、高對比紙張/墨水、零廢話。
[2. 奢華暗鈦金屬] Apple/Stripe 美學、深黑曜石 (#0B0C10)、1px 細線邊框、金屬光澤、暖金/硃紅。
[3. 編輯襯線與電影風格] 學術與文化莊重，大膽現代襯線（Instrument Serif、Editorial New）、溫暖紙張、字距。
[4. 光學網點與圓點] 工作室圖形工藝，響應式動態點陣、網點波紋轉場、復古現代風格。
[5. 觸感實體 UI] SaaS 與工具掌握，物理按壓彈簧、橡皮筋拖曳、液體標籤、物理游標。
[6. 電影級流體] 航空、汽車、移動性；弧形飛行路徑、遙測 HUD、地平線照明、恢弘尺度。
[7. 活潑流行與幾何] 創意應用、消費工具；大膽平面色塊、彈性形狀轉換、有力文字排版。
(請參閱 references/design-styles.md 以獲取每種風格的代碼配方、調色板和字體配對。)
4. Remotion 專案架構
每個專案使用經過驗證、無魔術數字的 Remotion 結構：
my-motion-project/
├── package.json # remotion、@remotion/cli、react、react-dom
├── remotion.config.ts # 系統 Chrome/Edge GPU D3D11 加速
├── tsconfig.json # ES2022、NodeNext、jsx: react-jsx
└── src/
├── index.ts # registerRoot(Root) 入口
├── Root.tsx # <Composition> 註冊（尺寸、fps、時長）
├── compositions/ # 主合成時間軸
├── scenes/ # 模組化 <Sequence> 場景
├── components/ # 可複用 UI、品牌標誌、游標、模型
└── constants/ # 調色板、120 BPM 時序輔助函數、字體
remotion.config.ts（系統 Chrome 整合）
import { Config } from '@remotion/cli/config';
import fs from 'node:fs';
const chromePath = 'C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe';
const edgePath = 'C:\\Program Files (x86)\\Microsoft\\Edge\\Application\\msedge.exe';
if (fs.existsSync(chromePath)) {
Config.setBrowserExecutable(chromePath);
} else if (fs.existsSync(edgePath)) {
Config.setBrowserExecutable(edgePath);
}
Config.setVideoImageFormat('jpeg');
Config.setChromiumOpenGlRenderer('angle');
Config.setConcurrency(4);
5. 執行與渲染 CLI
# 1. 互動式工作室預覽（可拖曳時間軸與即時 HMR）
npm run preview # 或：npx remotion preview src/index.ts
# 2. 渲染 60fps 主 MP4
npm run build # 或：npx remotion render src/index.ts <CompId> out.mp4
# 3. 捕捉高解析度關鍵幀靜態圖
npx remotion still src/index.ts <CompId> still_frame.png --frame=60
6. 參考文件索引
在創作動態圖形的特定面向時，請查閱這些深入指南：
- structural-archetypes.md：5 種結構藍圖（微循環動畫、社交 Reels、品牌影片、多章節解說影片、連續形狀變換）。
- design-styles.md：7 種現代設計風格（瑞士新粗獷主義、暗鈦金屬、編輯襯線、光學網點、觸感 UI、電影級流體、活潑流行）含調色板與字體。
- brand-identity-and-ci.md：自主向量 CI 重建、標誌揭示機制、顏色規則與品牌元素。
- storytelling-and-narrative.md：敘事弧線、視覺隱喻、共享物件轉場與節奏。
- asset-orchestration.md：Ken Burns 平移/縮放、透視模型、SVG 向量徽章與視覺層級。
- remotion-patterns.md：彈簧力學、
interpolate()、攝影機容器、階梯式級聯與<Sequence>編排。 - ui-motion-recipes.md：游標、即時計數器、滑桿、模態框、通知卡片與圖表。
- remotion-qa-and-verification.md：3 步驟 QA 循環、10 點海報檢查清單與無頭 GPU 渲染。
- timing.md：120 BPM 音樂節拍網格、幀數計算、交錯偏移與保持限制。
- motion-math.md：諧波彈簧、種子偽隨機數產生器與對數攝影機縮放。
- gotchas.md：Chromium 渲染陷阱、
preserve-3d、溢出遮罩與文字模糊避免。