motion-design：工作坊（Remotion、主題、音效、音樂）
一切都採用本地執行且確定性：相同程式碼 = 相同 MP4。沒有任何 AI 生成的圖片或影片。
技術架構
| 項目 | 工具 | 位置 |
|---|---|---|
| 動畫 | Remotion 4.0.529（React / TSX），版本鎖定在 package.json | src/；npx remotion add <package> 可新增更多模組 |
| 主題 | 顏色、字型、尺寸、邊距 | src/illustration/theme.ts（被 src/illustration/scenes/kit.tsx 中的 C 和 F 常數讀取），字型在 public/fonts/ |
| Remotion 模組 | 轉場、特效、gsap、three、雜訊、路徑、形狀、動態模糊、漏光、星爆、rough-notation、字幕、佈局工具、lottie | package.json |
| 圖形合成 | BrandedVideo（全螢幕場景）、LowerThirdTrack（下方第三行、章節標題）、Screencast（網站示範）、Scene（場景目錄）、ControleTexte（文字檢查）、FondAnime（循環動畫背景；其紋理由 scripts/make-grain.py 產生） | src/illustration/，在 Compositions.tsx 宣告，並在 src/Root.tsx 中連接 |
| 共用時間錨點 | 以秒為單位的關鍵時間點，動畫和音效都會讀取 | src/<project>/cues.json |
| 音樂 | 以 Python 撰寫的樂譜，基於 numpy 合成器（scripts/synth.py：FM 電鋼琴、鋪底、貝斯、打擊樂、黑膠爆裂音、殘響） | music/<project>.py，範例：music/example_pad.py |
| 音效 | 合成音色庫：在使用任何聲音之前請先閱讀 reference/sound-palette.md。合成配方 scripts/make-sfx.py → public/sfx/*.wav + palette.json；手勢詞彙 scripts/son.py（一個計畫命名一個手勢，永遠不指定檔案；清單預設每項一個卡片放置，son.LISTES；son.releve：一個數字的影片聲音清單，供按編號審閱）；scripts/palette-import.py（真實錄製的音色庫，相同檔名，若無則回退至預設）；scripts/sfx.py（幾種額外音效：快門聲、對焦提示音、咻聲） | scripts/ |
| 混音 | 音樂 + 音效 + 人聲，人聲壓低音樂，EBU R128 目標響度，真實峰值限制在 -1.5 dBTP（超取樣限制器，僅在超標時啟用） | scripts/mix.py |
| 檢查 | 每個八度音調平衡、響度 | scripts/ltas.py、mix.py |
授權條款。 Remotion 對個人及不超過 3 名員工的公司免費；超過此規模的公司需購買公司許可證（remotion.pro）。在較大規模的公司商業使用此工具包前，請閱讀其 LICENSE.md。字型 Inter 和 Source Serif 4 採用 OFL 授權（public/fonts/OFL-*.txt）；音效與範例音樂均在此合成，不含任何第三方權利。使用其他來源的音樂時：請檢查其授權條款（在已獲利的頻道上禁止使用 CC-BY-NC）。
安裝，以及 node_modules 行數的作用
外掛安裝一次使用以下指令：
bash "${CLAUDE_PLUGIN_ROOT}/install.sh" --data "${CLAUDE_PLUGIN_DATA}"
（Claude Code 在讀取此檔案時會將兩個變數替換為實際路徑。）為什麼需要資料夾：外掛資料夾在每次外掛更新時都會被取代，而 node_modules 大約 1 GB。因此 npm ci 只在外掛的資料夾（${CLAUDE_PLUGIN_DATA}）中執行一次，該資料夾在更新後仍會保留，而 skills/motion-design/node_modules 會是一個符號連結指向它。如果外掛更新後缺少 node_modules（新外掛資料夾沒有連結），請重新執行上述指令：它只會補足缺少的部分，並在下一秒重新建立連結。
手動安裝（將四個 skills/ 資料夾並排複製到 ~/.claude/skills/）：從工具包根目錄執行 bash install.sh；此時 node_modules 是透過 npm ci 安裝的一般資料夾。Python 端：python3 -m pip install numpy scipy soundfile pillow，以及 brew install ffmpeg。詳細資訊與整個流程的檢查：請參閱工具包的 INSTALL.md。
此技能的所有指令應從工作坊資料夾（skills/motion-design）執行。
完整動態設計影片的工作流程
- 設定框架：決定影片長度、格式（預設為 1920×1080，30 fps；直向為 1080×1920；正方形為 1080×1080）、用途及平台限制。撰寫
src/<project>/cues.json：關鍵時間點同時驅動畫面與聲音。 - 製作動畫：在
src/<project>/中為每個交付物建立一個合成元件，並在src/Root.tsx中宣告，屬性使用 zod 定義型別。所有內容皆從useCurrentFrame()衍生：絕不使用自由的 CSS 動畫，也絕不使用Math.random()（改用random(seed)或noise2D）。僅使用主題顏色與字型。 - 在渲染前檢查畫面：在關鍵幀上執行
npx remotion still src/index.ts <Id> out.png --frame=N，然後建立 MP4 的接觸表（ffmpegtile）。以手機尺寸判斷：影像縮小至 390 像素寬時仍需保持可讀性。 - 旁白（若有的話）：由使用者錄製（48 kHz WAV），使用
--voice-at放置。此工具包不複製人聲。 - 音樂與音效：
python3 music/<project>.py <duration> music.wav；透過son.py處理音效，將其放置在與畫面相同的時間點（計畫中呼叫son.releve(...)以寫出供聆聽的編號清單）；使用python3 scripts/ltas.py music.wav檢查（相對於平緩斜率，沒有超過約 6 dB 的明顯凹陷）。 - 混音：
python3 scripts/mix.py --music ... --sfx ... [--voice ... --voice-at s] --lufs -16 --out public/audio/<project>_mix.wav（Reel 使用 -14，YouTube 使用 -16；--sfx-voix-ref -22根據實際人聲重新調整音效音量）。 - 渲染：
npx remotion render src/index.ts <Id> out.mp4 --props='{"audio":"audio/<project>_mix.wav"}' --codec=h264 --crf=16 --audio-bitrate=320k。 - 交付：不要覆蓋既有的交付檔案（加上
-v2後綴），並提供預覽。
放置在 Premiere 中的渲染圖形
- 場景、全螢幕圖形或下方第三行中不要有標誌：它會白白載入圖片。
- 用於 29.97 fps 序列的檔案必須覆蓋其剪輯的整個長度：n 個序列幀的長度為 n x 1.001 / 30 秒。
src/illustration/中的合成元件接受tailFrames：TenirFin元件（src/illustration/tenir-fin.tsx）會在其持續時間內播放動畫，然後保持最後一幀；退出動畫不會移動。overlays技能的scripts/render-segments.py會計算tailFrames。 - 圖形合成元件由
scripts/render-segments.py、scripts/screencast-render.py和overlays技能的scripts/montage-tella.py渲染（工作資料夾 = 此工作坊，PNG 幀，4 個核心），絕不應在remotion still檢查之外手動執行。透過staticFile呼叫的媒體應放置於public/scenes/<video>/。
自訂主題（更換品牌風格）
此工具包附帶一個中性主題：藍色強調色 #2F5BEA、Inter 和 Source Serif 4 字型、一個主題檔案 src/illustration/theme.ts。若要使用自己的品牌：
- 顏色：
src/illustration/theme.ts（color：底色、對比色、軟墨色、低飽和色、表面色、線條色、強調色、深強調色、洗淡強調色、深色背景、暖紙色）；場景透過C讀取。在某些地方仍有硬編碼的強調色及其淺色調：grep -rn "#6B8CFF\|rgba(47,91,234\|rgba(214,224,252" src/（preuves.tsx、Screencast.tsx、compositions/FondAnime.tsx中的PALETTES變體中），以配合新的強調色。只使用一個強調色，作為信號使用，絕不作為填充色。 - 字型：將
.woff2檔案放入public/fonts/，然後在載入清單（src/illustration/scenes/kit.tsx、compositions/BrandedVideo.tsx、compositions/LowerThirdTrack.tsx、compositions/Screencast.tsx）和theme.ts（font.display、font.sans）中更改檔案名稱和系列名稱。確認字型包含數字與重音符號（僅 "latin-ext" 子集沒有數字和基本字母，且所有內容會回退到 Georgia）。系列名稱不要有數字（或在 CSS 中加引號）。 - 動畫曲線：
scenes/kit.tsx中的easeStd和scripts/make-sfx.py中的EASING必須一致（聲音跟隨畫面的曲線）。 - 檢查：執行
npx tsc --noEmit，然後對每個合成元件（引言、下方第三行、章節卡片、數字...）執行remotion still，接著在下一次執行render-segments.py時加上--force（其快取會跟隨src/illustration/的程式碼）。
新增場景或音效
- 場景：在
src/illustration/scenes/opaque.tsx（全螢幕）或alpha.tsx（疊層）中建立元件，在其上方以註解說明data契約，在註冊表scenes/Scene.tsx中新增一行，在overlays的 SKILL.md 目錄中新增一行。所有時間點皆來自cues。檢查：在數個幀上執行remotion still，並將疊層合成在剪輯的某個幀上。 - 音效：請參閱
reference/sound-palette.md中的「新增或調整音效」。
同步資料夾陷阱
如果工作坊位於同步資料夾（Dropbox、iCloud、Google Drive 等），另一台機器可能會回傳舊版檔案並將新版重新命名為「衝突的副本」。症狀：Could not find composition with ID ...。應對方式：find . -name '*conflicted copy*' -not -path './node_modules/*'，進行比較，保留最新版本。webpack 快取（node_modules/.cache）也可能發生衝突：刪除它，Remotion 會重新建立。更好做法：將 node_modules 排除在同步之外。