Motionite：專為代理設計的動態設計工具
Motionite 能將一份簡要需求轉化為完成、確定性且具有設計感的 Remotion 影片。它由三個部分組成：
| 部分 | 位置 | 用途 |
|---|---|---|
| 15 種 NxrStyles | styles/ · 比較與選擇工具 | 為每部影片選擇一套完整的視覺系統 |
| 70 種技術 | techniques/ | 使用經過驗證的數字（ID：T、N、X、C、U、H、R）建構每個動作 |
| 工作程式碼 | examples/ | 複製 lib/anim.ts 中的標記、示範元件與風格元件 |
提示詞並非關鍵差異。同一行展示片的提示詞可能產出截然不同的影片。真正關鍵的是在靜止畫面與審美回饋迴圈中的迭代。這個技能就是那個迴圈。
工作流程（按順序執行）
1 · 簡要需求 → 事實 vs 選擇
寫下：
- 事實： 你擁有的真實素材（標誌檔案、螢幕截圖、影片片段、品牌色碼、字型、旁白、音樂與 BPM）、主張、長寬比、時長與平台。
- 選擇： 其他所有事項。如果缺少真實產品的 UI 或標誌，請詢問或留下帶標籤的佔位符號。切勿憑空捏造。
- 一句話 讓觀眾記住。一部影片每個節拍只有一個想法，整體只有一個訊息。
2 · 情緒板
收集 2–3 部情緒板影片，並寫下每部影片值得借鏡的內容，以數字表示：剪輯節奏（每秒鏡頭數）、色碼、字型家族、招牌動作。你可以在 techniques/README.md 中找到 ID。如果可以，為每部影片製作一張連拍圖（ffmpeg -vf fps=2,scale=480:-1,tile=6x5）並仔細檢視。
3 · 挑選 一種 NxrStyle
使用 styles/COMPARISON.md 中的決策表，然後打開該風格的檔案，遵循其視覺基因（色調、字型、版面、動態、轉場、時序、音訊）及其注意事項。
- 提供的品牌指南會覆蓋風格的色調與字型，以及任何禁止事項。
- 你可以從另一種風格借用一種技術。切勿借用完整的色調或字型系統。
| # | 風格 | 感覺 | # | 風格 | 感覺 |
|---|---|---|---|---|---|
| 01 | 節奏展示片 | 大膽、條狀切割色塊 | 09 | 即時 Bento 網格 | 1:1 循環海報，即時方塊 |
| 02 | 夜間字幕解說片 | 9:16 旁白字幕，大數字 | 10 | 像素條狀網格預告片 | 像素遊戲預告片，抖動剪輯 |
| 03 | 浮動產品 UI | 3D 手機，大數字，晶片 | 11 | 一鏡到底入口縮放 | 一次對數縮放穿越世界 |
| 04 | 編輯墨水 | 紙張、襯線字體、螢光筆 | 12 | 主機即影片 | 物體即世界 |
| 05 | 單一水平世界 | 單一鏡頭橫移，天空依 x 軸 | 13 | 簡潔發布片 | 節制，一個強調色 |
| 06 | PRESS START 選單 | 復古 8 位元選單 | 14 | 紙偶定格動畫 | 以 12 格切割紙張、RISO 印刷 |
| 07 | 霜凍收藏品 | 冰冷、軌道、薄荷計數器 | 15 | 手繪墨水 | 自繪沸騰、墨漬 |
| 08 | 雙色調故事書 | 蝕刻海軍藍 + 一種暖色 |
4 · 以影格為單位的鏡頭清單
在編碼前先製作表格：
| 鏡頭 | 影格 | 第一影格畫面內容 | 移動內容（影格精確） | 文字 | 技術 ID | 音訊提示 |
|---|
規則：
- 選擇 fps（大多數工作用 30，UI 流暢影片用 60），然後設定節拍網格：
BEAT = fps·60/BPM。鏡頭持續整小節，剪輯點落在節拍前 2 影格。 - 影格 0 是海報，因此必須已經構圖完成。
- 每個鏡頭一個想法，每行文字至少有 ≥ 0.8 秒的可讀停留時間。
- 切勿連續使用兩種轉場手法。視覺變化應落在硬剪輯上，且持續時間 ≥ 1 秒。
5 · 在 Remotion 中建構
從 examples/ 開始。複製 src/lib/anim.ts（緩動函數 E、彈簧 SPR、prog、spr、lmix、track、hitPulse、blurIn/blurOut、rand、onTwos），以及 src/styles/kit.tsx 與所選風格的元件。
建構規則：
render(frame)是純函數：不能使用Math.random、Date.now、計時器、CSS 轉場/動畫，或跨影格狀態。僅使用種子隨機數rand(key)。從影格 0 以固定步長重新模擬任何物理效果。- 進入使用
E.out，退出使用E.in。次要動作在主要動作的 55–75% 時開始。 - 在對數空間中進行縮放移動（
lmix）。重新定位的值是彈簧的總和（track）。 - 速度限制：≤ 25 像素/影格 @60，除非有殘影或模糊效果。
- 超調：每部影片 ≤ 2 次，且絕不用於文字。閃爍：每部影片 ≤ 2 次，亮度限制在 65–85%（絕不能是全白影格）。
- 文字模糊進入（12–20 像素 → 0，在移動的 60% 時清晰）。不要使用單純的不透明度淡入淡出。
- 每個計數器上都要使用
fontVariantNumeric: 'tabular-nums'。包含數字的字型名稱要用引號括起來：'"Press Start 2P"'。 - 切勿在
preserve-3d元素上設定不透明度或濾鏡，切勿在攝影機縮放的文字上設定will-change，切勿在無頭渲染中使用backdrop-filter。 - 圖層節奏：UI 用 1 格一動，繪製角色用 2 格一動，紙偶用 12 格一動。紋理永不煮沸。
- 循環：最後一格等於第一格。
6 · 送審用的靜止畫面（在任何完整渲染之前）
每個節拍渲染一張靜止畫面，再加上每個轉場前後 3 個影格：
npx remotion still src/index.ts <CompId> out/s_<f>.png --frame=<f> --scale=0.5
將它們放入連拍圖並仔細檢視。在此階段修正構圖、可讀性與色調，因為一張靜止畫面只需幾秒，而一次渲染則需要幾分鐘。如果流程中有真人參與，請在靜止畫面上取得批准。
7 · 渲染
npx remotion render src/index.ts <CompId> out/raw.mp4 --codec=h264 --crf=18 --pixel-format=yuv420p
ffmpeg -i out/raw.mp4 -c:v copy -af loudnorm=I=-14:TP=-1:LRA=11 -c:a aac -b:a 192k -movflags +faststart out/film.mp4
8 · QA（完整命令）
ffprobe：編碼器、大小、fps 與影片時長 = 音訊時長（±1 影格）。- 響度：−14 LUFS 整合值（±1），≤ −1 dBTP。
- 從最終 MP4（而非靜止畫面）製作連拍圖：2 fps，6×5 方格。
- 確定性：將同一影格渲染兩次並進行像素差異比對（必須完全相同）。
- 影格差異曲線：無單一影格 spike 超過相鄰影格 3 倍。
- 從靜止畫面取樣品牌色碼，且音訊起點與視覺撞擊點相差在 ±1 影格內。
9 · 自我評論（三輪）
根據 qa.md 中的六項測試對連拍圖評分：海報、可讀性、節拍、預算、風格與品牌。修正最嚴重的三個問題，重新渲染，並重複最多三次。每輪報告你做了哪些修改。
通用審美規則（簡短版）
- 影格 0 是海報，且每個暫停的影格都經過構圖。
- 文字模糊進入，不使用單純淡入淡出，退出要加速。
- 只使用一個強調色，且它必須有意義。
- 縮放應在對數空間中進行，保持攝影機移動連續而非分段（像素風格除外）。
- 在小節上剪輯，每個小節一個想法，並有可讀的停留。
- 閃爍亮度限制在 65–85%，最多兩次。超調最多兩次，絕不用於文字。
- 轉場是設計好的手法（光圈、殘影、墨漬、縮放穿越、極性翻轉），絕不使用交叉溶解。
- 使用真實素材勝過繪製素材。切勿偽造真實產品的 UI。
- 確定性是一個特色：相同影格始終渲染出相同的像素。
- 美學禁令（襯線字體、奶油色、發光、玻璃、表情符號、粒子）是通用產品影片的預設值。品牌或其情緒板可以覆蓋它們。物理法則不可更改。
完整法則：techniques/laws.md。簡要模板：techniques/prompt-skeleton.md。
輸出約定
當你交付影片時，請報告：
- 使用的風格
- 鏡頭清單（影格 + 技術 ID）
- MP4 與連拍圖的路徑
- ffprobe 列、LUFS 讀數與確定性結果
- 每輪評論中改變的內容
- 任何佔位符號或憑空創造的素材