產品動態設計
製作一個連貫的故事，而不是一堆不相關、只求吸引眼球的卡片輪播。透過「意圖 → 動作 → 結果 → 產品價值 → 品牌」來保持觀眾對物件的注意力。
選擇起點
閱讀相關範例的 README，然後再讀原始碼。路徑皆相對於此技能解析；切勿假設前次工作階段的檔案仍然存在。
| 任務 | 由此開始 |
|---|---|
| iOS 風格的滾輪、滾動數字、區段、尺規 | examples/controls/README.md |
| 動態排版、變形 UI 進場、游標引導的展示 | examples/relay/README.md |
| 大型編輯器、與打字連動的攝影機、傳送 → 生成結果 | examples/composer/README.md |
| 短版 9:16 真正 3D 裝置旋轉 | examples/device-studio/README.md |
| 完整的 22 秒手機發表影片 | examples/milo-launch/README.md |
| MIDI 編曲、取樣樂器、混音 | examples/midi-score/README.md |
請閱讀 references/direction.md 了解場景調度與 timing，references/deterministic-rendering.md 了解影片匯出前的須知，以及 references/asset-rights.md 了解發布或重新散布素材前的權利事項。官方的第三方靈感連結位於 references/gemini.md；這些影片僅作為參考，並非隨附的開源素材。
建立鏡頭
- 重複使用已提供的產品、觀眾、畫面比例、時長與調性。僅針對會改變工作的遺漏資訊提出詢問。如果是虛構產品，應選擇一個連貫的概念，而非詢問每個細節。
- 在做出產品宣稱前，務必檢視真實的產品/品牌素材。切勿虛構功能、指標、見證或生產截圖。
- 若要進行新的視覺方向，除非明確要求製作完整影片，否則先從一個 2–3 秒的完整 HTML 鏡頭開始。在擴展時，保留已獲批准的編排。
- 預設使用自包含的 HTML/CSS/JavaScript 製作原型。一個 HTML 請求並非許可去執行成本高昂的影片渲染、上傳或雲端發布。僅在要求或必要時才切換技術棧。
- 在編碼前簡短陳述動作序列與攝影機交接。確保每個鏡頭的焦點物件清晰明確。
導向動態，而非裝飾
- 在實際字型載入後才測量文字。當新文字到來時，重新排列之前的文字，並保持構圖中心。
- 將位置、不透明度與模糊曲線分離。讓動態早期可見，並在最終 overshoot 前清除模糊。刻意設計退場動畫，而非使用預設的淡出。
- 使用簡短、可讀的 overshoot 並穩定下來；不要讓每個物體都晃動。
examples/relay/scripts/motion-core.mjs包含經過測試的文字/攝影機彈簧、貝茲曲線與圓柱形扭曲函數。 - 當曲率很重要時，使用多個水平條帶變形面板；單純的平面旋轉並非彎曲表面。從一個進度值驅動對角線移動的兩個軸。
- 放大至實際的動作，而非顯示不可讀的小儀表板。在同一個變換座標系統中移動游標與 UI，包括熱點補償。
- 展示 hover → press → release → 真實狀態變更。拖曳需要拾取、移動、放下並更新相關狀態。讓結果跟隨導致它的動作。
- 保持著色器時間與場景時鐘一致。說明 WebGL 在什麼情況下會降級；切勿將靜態漸層稱為運作中的著色器。
互動控制項 vs. 錄製的動態
使用捆綁的控制項，而非為每個影片重建其物理行為。
setValue(value)是互動式的：從當前展示位置與速度整合一個彈簧。允許輸入中斷它。renderAt(value)是確定性的：立即設定一個分數元件值。在影片中，從 frame/fps 推導此值；在擷取期間不要執行即時彈簧或掛鐘迴圈。- 對於滾輪，在清單中間顯示一個固定的中央選取視窗，兩側各顯示兩個彎曲選項。根據到中心的距離分數計算位置、傾斜、縮放與不透明度。
- 使用指標擷取進行 1:1 的拖曳追蹤。放開時，預測動量，吸附到有效項目，並將速度帶入穩定階段。應用漸進的邊界阻力。
- 支援滾輪/觸控板、鍵盤、焦點、可存取名稱/當前值、窄版型與減少動態設定。除非有明確需求，否則不要播放聲音或觸覺回饋。
- 直接操作時停止外部的 demo 時間軸；兩個時鐘不得爭奪同一個元件。
編輯器與攝影機
當欄位為空時，顯示兩端圓角。在輸入時擴展有限的欄位。測量文字與傳送按鈕的位置；從起點開始跟隨漸增的文字，加上加速與煞車，並在傳送按鈕處停止。保護一個獨立的文字區域，使字母永不經過按鈕下方。傳送後，顯示一個獨立編排的結果及其內部的有意義動作；不要將輸入變形為輸出。使用通用 Canvas Lab 範例進行編排，而非將其作為真實模型行為或延遲的宣稱。
真正的 3D 裝置鏡頭
使用真正的 GLB 與原始顯示網格，而非 PNG 框架或浮動的 DOM 螢幕。保持螢幕與機身在同一組 rig 上。使用攝影棚柔光箱反射、分離的金屬/玻璃/光學材質、更長焦距的攝影機、緩動旋轉以及可讀的正面停留。在螢幕材質中製作應用程式動作動畫，使觸控指示器遵循透視。將 DOM 排版與 WebGL 一起擷取用於影片。
參考用的 iPhone GLB 不包含在內，且非 MIT 授權。需要使用者另行取得授權的副本或明確授權的替代品。在使用不同模型前，檢查網格名稱、顯示法線、UV、縮放與構圖。切勿將範例稱為官方 Apple CAD、官方 Apple 渲染或光線追蹤。
音效，僅在要求時
閱讀 references/music.md。當要求 MIDI/樂器時，優先使用原創的多軌 MIDI → 另行取得授權的 SoundFont → 渲染的分軌音檔 → 混音；不要強制使用付費的神經網路 API。將稀疏的聲音重音與實際畫面提示綁定。保持音樂、音效與口白各自獨立可編輯。未經聆聽/使用者審查，不得聲稱配樂良好或已獲批准。測量值與提示表並非完成的、經試聽的音軌。
對於即時 HTML，使用手勢觸發音訊，並保持視覺時鐘獨立於音訊 resume() Promise 或卡住的音訊時鐘。音訊失敗不得凍結動畫。對於離線影片，將樣本對齊時間軸，而非僅將即時瀏覽器音訊串流作為唯一母帶。
驗證與交付
- 執行相關的數學/功能測試。檢查直接、反向、任意與重複的 seek；游標命中；狀態因果關係；鍵盤/拖曳中斷；390px 版面；以及 JS 錯誤。
- 尊重使用者的視覺審查範圍。不得聲稱渲染或中繼資料檢查即為視覺檢查。如果要求進行視覺 QA，請實際檢查代表性的進場/中間/互動/退場影格，並修正重疊、裁切、不可讀的文案與錯誤的圖層。
- 對於 MP4，請實際渲染並驗證時長、尺寸、fps、影格數、解碼與音訊存在。不要交付操作說明並稱之為匯出的影片。
- 交付要求的 HTML 或 MP4，以及可重現的原始碼、確切設定、素材權利備註，以及誠實的限制。不要無聲地加上音樂。
- 將私人憑證、工作階段 URL、作業系統素材、下載的商業模型，以及包含受限素材的生成套件，排除在公開儲存庫之外。根目錄 MIT 授權僅涵蓋原始程式碼/文件，而非每個依賴項或外部素材。