UI動態演示片 是做什麼的？
演示片是由一個HTML場景逐幀渲染而成。每個動畫值（形狀大小、圓角半徑、顏色、鏡頭縮放、游標、控制項）都是一個阻尼彈簧，預先以8倍幀率模擬一次，因此任何影格都能獨立且並行渲染。配樂從同一時間軸合成，讓每個節拍、點擊和嗖聲都能完美對應畫面。
打包的元件：
assets/engine/reel.js：引擎（彈簧、測量、游標腳本、鏡頭、內容模糊切換、懸停與按壓、無縫循環、里程計數器、圖示集）。assets/engine/score.js：原創循環配樂（合成墊、撥弦琶音、貝斯、鼓、漸強音、鐘聲）加上UI音效（點擊、嗖聲、打字、卡榫、滑動），以OfflineAudioContext渲染。assets/template/index.html：24秒入門場景，包含每種互動類型：列表行懸停、滑桿拖曳、開關、里程計、長按確認環、成功藥丸、摘要卡片、循環返回。scripts/setup.sh：建立演示片資料夾（引擎+模板+腳本+node依賴）。scripts/render.mjs：靜態圖片、音訊，以及並行MP4渲染，並混入配樂與音量正規化。scripts/qa.mjs：連拍、原始循環接縫檢查、轉場條帶、音量與頻譜圖。references/api.md：完整的Reel.define設定參考。撰寫場景前請先閱讀。references/craft.md：動態與設計規則，以及已解決的常見錯誤。設計狀態前請先閱讀。references/score.md：如何塑造音樂與音效設計，以及如何檢查無法聽到的混音。references/examples/stockback.html：此技能最初提取的原始60秒、14狀態演示片（一款金融收據到股票的應用程式）。閱讀以獲取內容靈感與更密集的編排。此範例早於引擎API，請參考模式而非直接複製程式碼。
工作流程
-
先了解產品。 閱讀產品的網站或程式碼，了解其調色盤、字型、標誌，以及5-8個能敘述故事的重點時刻（輸入、魔法、證明、回報）。盡可能使用真實文案與資料：真實的數字與標誌能讓演示片更具說服力。如果使用者指定了特定風格，則以該風格優先於產品原有風格。
-
撰寫標記前先擬定狀態腳本。 為每個狀態決定其尺寸（寬、高、圓角半徑）、填色（調色盤中的3-4種顏色之一）、鏡頭縮放（約佔畫面高度或寬度的80%）、持續時間，以及游標的動作。完整演示片目標為45-60秒與10-14個狀態，預告片則為20-30秒與5-7個狀態。在120 BPM下，一拍為0.5秒，一小節為2秒。每個狀態的持續時間應為0.5秒的倍數，並將重要時刻落在小節線上（2秒的倍數），以便音樂能精準配合。總持續時間必須完全等於總長。
-
建立基礎結構。
bash ~/.claude/skills/ui-motion-reel/scripts/setup.sh <專案>/video，然後編輯<專案>/video/index.html。除非演示片需要新的引擎功能，否則保持引擎檔案不變；若有修改，請在專案中保留副本並告知使用者。 -
建立場景，遵循
references/api.md：每個狀態一個.content區塊（id="c-<id>"、data-w/data-h等於該狀態的寬高）、為游標目標或需動畫的元素設定id，然後使用Reel.define({...})定義狀態、游標事件、自訂通道（滑桿、開關、長按、滾動）以及每個狀態的update函數進行內部動畫。 -
及早且頻繁地檢查靜態圖片。
node render.mjs --stills 0,1.5,4,...，然後檢視圖片（使用node qa.mjs --every 2建立連拍）。檢查每個狀態的靜止狀態以及幾個中途變形影格。渲染靜態圖片只需幾秒鐘；完整渲染60秒的影片在6個工作線程下約需一分半鐘。 -
配樂。 設定
score（進展、關鍵狀態的節拍、停頓）以及sx鉤子用於場景特定音效（打字、卡榫、計數器、滑動）。node render.mjs --audio，然後node qa.mjs並讀取音量數據及out/qa/spectrum.png（參見references/score.md：由於無法實際聆聽，需透過數字與圖表判斷混音品質）。 -
渲染與QA。
node render.mjs --mp4 --with-audio --out <名稱>.mp4，然後node qa.mjs --transitions --video out/<名稱>.mp4。確認原始循環接縫為1.000000，檢查transitions.png是否有灰色中途變形或內容溢出畫面，並再次查看連拍。 -
交付 MP4（如果檔案傳輸可能因大小而失敗，可額外提供720p版本），以及簡短的內容說明：狀態、互動方式、音樂特色。誠實告知使用者音訊是透過分析而非實際聽覺檢查。主動提供重新調整時間或主題的選項：重新渲染的成本很低。
不可妥協的原則（視覺風格）
這些是讓演示片看起來像設計師作品而非模板的關鍵。references/craft.md中有詳細說明。
- 單一形狀，從不剪接。每個狀態都是同一個元素改變大小、圓角與填色；內部內容透過短暫模糊切換（引擎自動處理）。
- 所有變化皆由游標觸發：點擊、拖曳或長按。除非是真正的系統回應（如長按完成），否則狀態不會自行改變。
- 全彈簧動畫；最多僅有微量超調（大小約0.86，顏色與鏡頭約1.0）。絕不使用彈性緩動。
- 鏡頭自動適應每個狀態；最後一格與第一格相同，使影片可循環播放。
- 無空白時間：每一刻都有重要元素在移動，且游標等待時間不超過約一秒。
- 無粒子爆炸、光暈、鏡頭耀光、UI鍍鉻上的漸層、或不相符的圖示筆畫（使用引擎的圖示集：24像素網格、1.75像素筆畫）。
- 一種UI字型，可選擇一種顯示強調字型（模板搭配Geist與Instrument Serif斜體）。當產品本身有字型時，請使用產品字型。
效能備註
- 60秒、1080p60的演示片共3,600影格。在Apple Silicon Mac上使用6個工作線程，約需80-90秒渲染完成。
- 腳本結尾會呼叫
process.exit，因為puppeteer可能在工作完成後仍讓Node保持運作。如果自行撰寫腳本，請做相同處理，否則長時間執行的命令可能看起來像當機。 - 在大型檔案上傳可能逾時的網路環境中，請另外輸出720p版本：
ffmpeg -i reel.mp4 -vf scale=1280:720 -c:v libx264 -crf 25 -c:a aac -b:a 160k reel-720p.mp4（ffmpeg位於node_modules/@ffmpeg-installer/*/ffmpeg）。