程式碼動態短片（motion）
影片由程式碼製作：每一幀都由時間參數 t 計算產生，因此「這裡慢一點」只需修改一個數字再重新渲染，無需重拍。 不使用任何 AI 生成圖片或影片模型；畫面中的內容皆來自真實素材或程式碼。
先選擇做到哪一層
三層使用同一套流程，越往下越接近實拍，但也越耗時。根據影片需求選擇，亦可混合使用。
| 層級 | 畫面內容 | 適用場景 | 起點 |
|---|---|---|---|
| 1. 平面動畫 | 真實 Logo、真實截圖、形狀持續變形 | App、軟體、品牌開場 | templates/2d.html |
| 2. 瀏覽器 3D | 介面卡片置於三維空間、鏡頭穿梭；剪影轉場銜接實拍 | 多螢幕介面展示、需結合真人實拍的影片 | templates/3d.html、scripts/silhouette.py |
| 3. Blender 棚拍 | 實物產品模型、一盞燈、真實材質 | 耳機、手機、杯子等實物產品 | scripts/blender/studio.py |
詳細說明：references/layers.md。
流程（依序進行，不可跳步驟）
- 確認需求，準備真實素材。 產品是什麼、目標觀眾、影片長度、發布平台、結尾希望觀眾做什麼。素材一律使用真實內容：官方 Logo 檔案、真實裝置截圖（先移除通知、頭像、電話號碼）、品牌色與字型。請勿使用應用商店宣傳圖作為介面，也不要憑記憶繪製 Logo。 製作實物產品需先收集多角度照片，最好是使用者自己拍攝的實物照片，後續用於比對模型比例。
- 確定結尾。 結尾僅保留圖標與文字商標（或銜接實拍）。不加「立即下載」「開啟 XX」等口號，也不放「概念片」免責小字（如需說明請寫在簡介中）。
- 產出帶編號的分鏡，等待對方確認。 5–10 個鏡頭，每個鏡頭標明：時間區段、畫面內容、動作、如何轉場至下一鏡、螢幕上的文字。
撰寫
shots.json，執行node scripts/render.mjs board shots.json board.png產生一張分鏡板圖片供對方檢視。 未獲得確認前不進行成片製作——此時修改成本最低。格式請參閱references/storyboard.md。 - 建立頁面。 複製模板與
templates/motion-kit.js至素材資料夾。所有節拍資訊寫在頁面頂端的BEATS區塊中，調整節奏只需修改此處。 頁面規範請參閱references/html-engine.md。 - 逐幀自我檢查，再給他人觀看。 使用
render.mjs still抽取關鍵時刻（每個轉場抽 3–4 個點，不只看靜止畫面）， 再以scripts/sheet.py拼接成一張檢查圖，自行審視一遍。接著執行檢查腳本：render.mjs probe+scripts/layout_check.py probe：確認文字離主體至少 40 像素（4K），主體位於畫面中央附近。- 3D：
scripts/blender/motion_check.py（檢查穿模、每幀最多旋轉 6°、轉速不跳躍）、scripts/seam_check.py（檢查零件接縫 ≤ 1 像素）。 檢查清單請參閱references/checklist.md。
- 僅輸出 4K 解析度。 執行
node scripts/render.mjs video page.html 片名-4K.mp4 --scale 2（將 1920x1080 頁面放大至 3840x2160）。 同一台電腦同時只能執行一個 4K 渲染或 Blender 渲染任務。從 4K 成片中抽幀檢查：python3 scripts/sheet.py video ...。 - 畫面確定後再加入聲音。 一旦修改畫面，所有節拍都會受影響。配樂與音效皆需具備；配樂中最重的一拍需對齊畫面的關鍵落點；
整體音量 -14 LUFS、真實峰值不超過 -1 dBTP；影片串流原樣複製不重新編碼。詳細說明請參閱
references/sound.md。 - 修改稿件。 每輪修改先進行備份，修改完成後重新抽幀自我檢查，並以白話清楚說明修改了什麼。另存新版本，不覆蓋、不刪除對方的檔案。 如實說明已檢查過哪些項目：靜止畫面不等於播放效果，觀看圖片不等於聽過混音。
讓影片好看的規則
完整說明請參閱 references/transitions.md 與 references/blender-3d.md，以下是必須牢記的重點：
- 每個鏡頭從前一個鏡頭變化而來。 不使用淡入淡出或疊化。透過同一物體的變形、翻面、展開、收回，觀眾的眼睛無需重新尋找目標。
- 動作置於畫面中央。 想像畫面中心有個準星，主角始終位於其附近。
- 畫面持續運動。 即使是靜止的鏡頭也需伴隨極慢的推近或漂移。
- 一個動作遵循一條曲線。 推近就一路推近，不要推了又拉回；旋轉就一路旋轉，不要轉一半回頭。快速啟動、緩慢結束，結束的緩衝時間要留長。
- 文字簡短，從模糊浮現至清晰，不要彈跳或突然放大。文字不能壓在主體上。
- 3D 場景僅使用一盞燈，背景調黑。這是營造「棚拍感」的主要關鍵。
- 3D 需符合物理邏輯： 零件閉合時緊密貼合；物體之間不可穿模；兩個物體交換位置時走 3D 公轉路徑，不要直線穿過對方；轉速平滑不跳躍。
- 拿實物照片比對模型，比例、圓角、開孔位置不對就修改模型。
- 剪影轉場從局部特寫開始，再拉遠、再硬切回實拍。詳細說明請參閱
references/silhouette.md。 - 音畫僅整體平移，不改變速度、不改變音調。
遵守規範
- 品牌： 僅為對方擁有或獲得授權使用的品牌進行創作。他人的品牌只能作為練習作品，不得冒充官方、不得投放廣告、不得模仿對方的真實行銷素材。
- 素材： 僅使用對方自行製作或已取得授權的素材、字型、音樂、模型，並確認授權範圍涵蓋此類用途。
- 說法： 影片中的數字與說法必須真實且有來源，不得編造數據或評價。
- 隱私： 截圖與實拍畫面中的個人資訊須先移除；出現的人物需取得同意。
- 付費服務（如配音、AI 音樂等）會消耗對方的額度，需對方要求後才使用。
腳本一覽
| 腳本 | 功能說明 |
|---|---|
scripts/render.mjs | 將 HTML 頁面轉換為靜幀、4K mp4、位置記錄（probe）、或分鏡板（board） |
scripts/sheet.py | 從靜幀或成片中按時間抽幀，產生一張帶時間標記的檢查圖（從原始解析度抽取） |
scripts/layout_check.py | 檢查文字與主體的距離、主體是否居中 |
scripts/seam_check.py | 檢查兩個零件在真實攝影機角度下的接縫錯位（像素） |
scripts/blender/studio.py | 建立單燈棚拍場景 + 使用 EEVEE/Cycles 渲染，支援 GLB/glTF/USDZ/OBJ/FBX 格式，--demo 參數可載入範例模型 |
scripts/blender/motion_check.py | 逐幀檢查穿模、角速度、轉速突變 |
scripts/silhouette.py | 摳除人物蒙版（macOS Vision，可選），產生平滑矢量剪影，可從特寫拉遠 |
scripts/audio/synth.py | 以程式碼合成音效包與配樂基底（免版權） |
scripts/audio/mix.py | 將配樂對齊關鍵落點、依節拍放置音效、側鏈讓路、響度正規化、合成至影片 |
scripts/encode.py | 將逐幀 PNG 轉換為 mp4 |
scripts/doctor.py | 檢查相依套件，提示缺少哪些與如何安裝 |
何時閱讀哪個檔案
| 當你… | 請閱讀 |
|---|---|
| 選擇層級、評估工作量 | references/layers.md |
| 撰寫分鏡 | references/storyboard.md |
| 撰寫 HTML 頁面、輸出影片 | references/html-engine.md |
| 設計鏡頭之間的轉場 | references/transitions.md |
| 製作實物產品 3D | references/blender-3d.md |
| 製作剪影、銜接實拍 | references/silhouette.md |
| 加入配樂與音效 | references/sound.md |
| 交付前自我檢查 | references/checklist.md |
| 畫面出現異常 | references/pitfalls.md |
環境需求
Node.js 20+、Python 3.9+（需安裝 numpy、Pillow、opencv-python-headless）、ffmpeg、Google Chrome 或 Chromium。
第 3 層需要 Blender（免費）；剪影轉場的自動摳像需 macOS 14+，其他作業系統請使用其他工具產生蒙版。
開始前請執行 python3 scripts/doctor.py，若缺少任何套件，先告知對方如何安裝。
若 Skill 資料夾中存在 .venv 目錄，Python 腳本應使用 .venv/bin/python 執行（Windows 環境：.venv\Scripts\python）；Windows 上請將 python3 替換為 python。