Motion Lab
一部有方向性的動態作品：每個形容詞都變成一個數字，每次後續回饋都是經過測量的筆記，
而影片展示的是真實運作的東西。參考建置：此技能中的 examples/cofoundr/
（SPEC.md、compositions/、REVIEW.md、preview.mp4）。在會話中進行第一次建置之前先讀過它。
載入 hyperframes 以取得渲染合約，然後遵循以下步驟。hyperframes 的規則在格式上優先；
此技能的規則在故事、視覺風格和流程上優先。
1. 閱讀原始素材
在撰寫任何內容之前，先閱讀主題本身：儲存庫、README、主要路由或管線檔案、 定價、即時網站。從中提取：
- 機制：真實的步驟順序（函式名稱、API 呼叫、階段）。
- 真實數字：資料集大小、計數、權重、時間、限制。絕不憑空發明一個。原始素材沒有給出的值 要嘛被刪除，要嘛在 REVIEW.md 中被標記為說明性。
- 品牌：強調色十六進位碼、次要顏色、Logo SVG、字型、任何風格鎖定檔案。
- 一個開發者會引用的令人驚訝的細節（一個限制、一個備用鏈、一個已上線的錯誤）。
如果某人提到一個原始素材沒有使用的技術（一個贊助商、來自推文的工具），不要畫出來。 直接說明並詢問它的作用。
2. 撰寫 SPEC.md（定向提示詞）
模糊的提示詞（「酷炫、高級、現代」）會得到深色海軍藍、光環、粒子以及一個編造的標語。
定向提示詞會得到一部電影。從 references/spec-template.md 在專案根目錄撰寫 SPEC.md。
每一行都是一個數字：
- GOAL、OUTPUT（1080x1080，X 預設 60 fps）、TIME（秒數 x 60 = 影格數）。
- LOOK：背景色、墨水色、低調墨水色、規則顏色、強調色及其含義、顯示字體和內文字體 附上 px 大小和字間距、卡片圓角和陰影。
- OBJECTS：觀眾必須辨識的每個物件，取自產品真實的使用者介面。
- MOTION：依角色區分的緩動函數、以影格為單位的持續時間和延遲（
references/numbers.md）。 - SHOTS：影格範圍，每個鏡頭一個主要動作，觀眾讀到的內容，傳遞給下一個鏡頭。
- BANNED 和 QA（要檢查的影格以及每個影格必須顯示的內容）。
3. 故事結構（是什麼讓 cofoundr 影片成功）
- 在第 0 影格掛鉤。 第一個影格就是縮圖。鉤子標語已經放在上面了， 使用顯示襯線字體，左對齊，一個字用強調色。一個大的品牌形狀放在旁邊。 範例：「我找不到共同創辦人。」配上藍色圓圈。
- 一個完整的實例貫穿整個機制。 一個真實的輸入（使用者的 LinkedIn URL、一個真實的 查詢）進入一個產品卡片，並移動通過每個階段。鉤子中的形狀會帶入 卡片（它變成大頭貼），這樣觀眾就不會失去線索。
- 一個階段導軌橫跨頂部，標示出真實階段的名稱（「豐富你的資料、搜尋 7 億、評分 30、 撰寫介紹信」），並在畫面到達時點亮每個節點。這是內建在影片中的架構圖。
- 每個階段都有其自己的畫面形狀：一個輸入欄位、一個從 7 億縮小到 30 的點狀區域、 按分數排序的長條圖（保留前 10 名並以強調色顯示）、一個正在輸出結果的結果卡片。 相似的線條絕不會得到相同的畫面。
- 回報 = Logo 具有意義。 兩個形狀（你和配對對象）滑動在一起 形成 Logo，文字標誌模糊淡入，一行顯示關鍵數字。保持 2 秒以上，完全靜止。
長度 15-17 秒。如果使用者想要循環播放，則低於 15 秒。
4. 視覺風格
預設使用產品自己的淺色應用程式外殼，而不是黑色虛空：背景色如 #f0f2f8、白色卡片
圓角 28，搭配 0 18px 40px rgba(15,23,42,.08) 陰影，墨水色 #0f172a，低調色 #64748b。
顯示字體：品牌的襯線字體（下載到 assets/fonts/，在每個使用它的場景中使用 @font-face）。
內文字體：Inter 500/700。文字最小閱讀大小為 28 px。強調色在每個影格標記一個焦點。
禁止使用：深色海軍藍虛空、光暈、發光、霓虹、粒子、紫色/藍色漸層、玻璃卡片、 等寬字體大寫標籤、藥丸形狀的 chips、所有元素置中、每個元素淡入、標題在定位後飄移、 Logo 放在角落、並排三張卡片、KPI 網格、真人的臉孔或姓名作為虛假候選人。
5. 建置
- 在
<slug>-video/中執行npx hyperframes init <dir>。根目錄的index.html掛載 3 個場景：hook、機制場景（在 UI 動作時保持一個連續的構圖）、payoff。 - 為每個隨機數播種（mulberry32）。生成的點狀和長條圖是一個計時場景的子元素。
- 每個補間動畫使用
fromTo；在同一個目標重複使用 fromTo 時，第一次之後設定immediateRender: false。 - 在機制場景中保留一個時間偏移輔助函式（
const at = (t) => t + …），這樣重新調整時間只需修改一行，而不是二十行。 - 可能變更的內容（URL、標題）放在合成變數中。
6. 實驗室循環（附帶憑證的後續回饋）
永遠不要相信第一次建置的結果。每次迭代後：
- 執行
npx hyperframes check --json；修復所有錯誤。line_unread表示需要延長該行的顯示時間 （每個字 0.5 秒 + 0.3 秒）或刪減文字；絕不縮小字型。 - 執行
npx hyperframes snapshot --at <每個鏡頭的中間和結束>並檢閱連拍截圖。 - 將每個問題寫成帶有編號的後續事項，並附上數字，如同參考資料列印的那樣： 「需求標籤在螢幕上顯示了 0.56 秒，底線需要 1.27 秒：讓它在 0.9 秒時落下，並將之後的所有內容 從 1.6 秒開始向後延遲 +0.6 秒」。將它們記錄在 REVIEW.md 中。
- 渲染後，從 MP4 檔案本身提取接縫影格
（
ffmpeg -vf "select='eq(n\,F1)+eq(n\,F2)',scale=360:-1,tile=Nx1"）並檢視它們。
7. 音樂
使用使用者提供的曲目（複製到 assets/audio/）。如果沒有，請向使用者索取一個，或者提供一個
從影格編號以程式碼合成的配樂（references/sound.md）。
python3 scripts/find_drop.py <track>會輸出音量圖以及最大的重拍，並附上 它們的確切開始時間以及周圍的節拍。- 選擇影片的英雄時刻（Logo 形狀接觸、結果出現）。計算它實際發生的影格
（對於
back.out(1.4)，形狀在補間動畫的約 23% 處接觸）。 data-media-start= 重拍開始時間 − 英雄時刻時間，對齊到最近的節拍，這樣影片會從一個 節拍上開始。聲音在畫面之後的 0-1 影格處落下，絕不在此之前。<audio id="music" class="clip" data-start="0" data-duration="<film>" data-media-start="…" data-volume="1" data-fade-in="0.05" data-fade-out="1.2">。- 渲染，然後測量：
npx hyperframes audio <mp4> --json必須顯示一個在英雄影格一個影格範圍內的 開始時間；音量 −16 到 −14 LUFS，真實峰值 ≤ −1 dBTP。說明它是被測量出來的，而不是憑感覺。
8. 交付
- 執行
npx hyperframes render -f 60 -q delivery -o renders/<slug>.mp4，然後執行ffprobe檢查大小、 fps 和影格數。 - 將 MP4 發送給使用者。
- REVIEW.md：創意決策、測量了什麼、最弱的節拍、刻意保留的警告。
- 以使用者的口吻起草貼文（預設：全小寫、先放鉤子、短行、
將機制寫成
>步驟、來自程式碼的一個真實細節、不使用誇大詞彙）。絕不發布它。