短影格動態圖像製作 (Reel Motion Graphics) 是做什麼的？
此技能用於製作符合品牌風格的短影格，其樣式首創於「30 秒升級再造」短影格。template/ 即為該短影格的可運作 HyperFrames 專案，因此未經修改的副本可直接正確渲染。你的任務是在保留以下所有規則的前提下，將其中的內容替換為新腳本的內容。
在撰寫 composition HTML 之前，請先載入 /hyperframes-core 以取得 composition 合約。只有在需要使用 references/primitives.md 中未涵蓋的動畫模式時，才載入 /hyperframes-animation。
1. 閱讀腳本並規劃節拍
收集或推斷以下資訊，僅針對會改變影片的項目提問：
- 腳本或概念。 必填。
- 講者影片（MP4）或靜態圖片。若無，則保留模板中的佔位圖片。
- 來源標記，用於標題上方的斜體文字，例如
ICLR 2023 · Author et al.。 - 目標長度。 預設 30 秒；20–60 秒皆可。
將腳本劃分為：標題卡（約 4 秒）、2–5 個步驟（每個約 4.5–6 秒），以及一個可選的結果/結尾（約 5.5 秒）。為每個步驟撰寫：
- 標題：以純文字加上 1–2 個字的斜體強調（例如「複製 MLP 八次」），字數不超過約 22 個字元，以便在 656px 寬度、60px 字級下顯示；
- 說明文字：第一行為一句話，不超過約 34 個字元（Bodoni 斜體 40px），第二行為支援句，不超過約 40 個字元；
- 圖表動作：使用 primitives 詞彙表中的動作（
references/primitives.md→ "Writing a new diagram"）。
如果說明文字與旁白同步，則以每秒約 2.5 個口語單詞的節奏安排。將規劃寫入專案的 STORYBOARD.md（包含節拍、時間範圍、標題、說明文字、視覺動作），展示給使用者，待其核准後再進行建置。使用者已核准的簡短腳本可直接進行建置。
2. 初始化
此技能位於 Reel Creator 專案中（.claude/skills/reel-motion-graphics/）。請在專案根目錄執行命令，並將每個新短影格放入 reels/<slug>/。下方指令碼路徑（如 scripts/solve-fold.py）均以此技能資料夾為相對路徑。
.claude/skills/reel-motion-graphics/scripts/new-reel.sh reels/<slug> [presenter.jpg|.mp4]
對於講者影片，請將 index.html 中的 <img id="presenter"> 替換為：
<video id="presenter" class="clip" src="assets/presenter.mp4" data-start="0" data-duration="<D>" data-has-audio="true" playsinline></video>
#presenter 的 CSS（cover、20% 錨點、--fold 下方）保持不變。
3. 建置：先編輯資料，再撰寫圖表
| 檔案 | 需要修改的內容 |
|---|---|
index.html | 根元素及 host 的 data-start/data-duration，使其符合規劃。Host：背景（整體）、標題（0–4）、標題和圖表（4–結束）、結果（其視窗區間）、說明文字（整體）、講者（整體）。 |
compositions/title.html | 斜體來源標記、兩行顯示文字、兩行論點文字，以及微型圖表（若概念並非「1 → 多」）。 |
compositions/headings.html | 僅 STEPS 陣列（host 本地秒數）。條狀進度條和「第 N 步，共 M 步」由此推導。 |
compositions/captions.html | 僅 CAPS 陣列（全域秒數）。每條說明文字在其步驟開始後約 0.35 秒進入，並在步驟結束時離開。 |
compositions/diagram.html | 根據新主題重寫整個 world，使用 primitives。保留 lens/world/drift 結構、token-clock 模式及背景衰退效果。 |
compositions/result.html | 統計標籤、數值、計數器和元資料行；若腳本無數字，則刪除該 host。 |
compositions/bg.html | 通常無須變更。調整其 yoyo 重複次數，使其在根元素持續時間內完成。 |
當圖庫中無合適圖形時：向使用者索取 HyperFrames 連結
圖庫位於 references/primitives.md。當某個節點需要一個 primitives 未涵蓋的視覺元素（圖表類型、地圖、時間軸、比較圖或任何未列出的項目）時，請勿憑空創作。暫停並向使用者索取連結：
「第 3 節點（「自 2021 年以來營收成長三倍」）需要一個成長圖表，但圖庫中沒有。您能否提供一個您喜歡的 HyperFrames 目錄連結？我會將其重新調整為我們的品牌風格。」
為協助使用者選擇，您可透過 npx --yes [email protected] catalog "<關鍵字>" 列出 2–4 個候選項目，但讓使用者決定。等待的同時，繼續建置其他節點，並在空缺處留下標記的佔位符。
收到連結後：
- 安裝它。 註冊項目的名稱為目錄連結的最後一個路徑片段。從專案根目錄執行
npx --yes [email protected] add <名稱> --no-clipboard --json。對於非來自註冊庫的連結，請閱讀頁面或原始碼並重建。 - 根據規範重新調整樣式：
- 將顏色替換為品牌 token，面板替換為
.glass； - 使用 Bodoni 和 Instrument Sans 字型及 opsz-18 檔案；
- 將所有間距值設為 4px 的倍數；
- 使其符合內容欄位和區域；
- 添加光澤、反光和漂移效果；
- 移除任何不符合品牌的元素，例如平面亮色填充、其他字型或陰影樣式。
- 將顏色替換為品牌 token，面板替換為
- 將其嵌入，作為圖形軌道上的子 composition host，或在其需要與連續 world 共享時，將其動畫合併至
diagram.html。然後照常檢查、截圖並修正。 - 將其加入圖庫。 在
references/primitives.md的「Restyled from HyperFrames」標題下新增一個條目：名稱、來源連結、顯示內容及其關鍵參數。將重新調整樣式後的檔案複製到template/compositions/library/，以便下一個短影格可直接使用，無須再次請求。
4. 規範（每個短影格皆須遵守，無例外）
- 摺線等距。 摺線位於最低動畫內容（說明文字底部，約 y 900）與講者頭頂之間的中點。使用
scripts/solve-fold.py <講者靜態圖片或影格> 900求解，並在brand.css中將--fold設為 4 的倍數。使用scripts/measure-fold.py <截圖> <摺線>驗證。若為影片，則檢查頭部位置最高的影格。 - 4px 網格。 所有內邊距、間距、偏移、尺寸和行高皆為 4 的倍數。容器應均勻內縮且尺寸由其內容決定；切勿為卡片設定固定高度。執行
scripts/audit-grid.sh <專案>；唯一允許的例外是極細邊框、發光半徑和補間動畫偏移。 - 穩固襯線字型。 僅使用
fonts/中的*-opsz18.woff2Bodoni 檔案。變數字型的自動光學尺寸會選取極細的顯示尺寸，在 H.264 編碼和手機縮放後會消失。切勿切換回可變檔案或 Google 的 6..96 範圍。 - 區域。 應用程式欄 0–175（保持淨空），動畫區 192–780，說明文字帶 812–904，講者頭部位於
--fold下方，內容欄位 x 172–828（避開右側導軌）。說明文字僅存在於一個軌道。 - 一個連續的圖表 world。 跨步驟持續存在的元素應位於
diagram.html中並移動。它們不得在新的場景檔案中重新進入。 - 確定性。 僅使用註冊於
window.__timelines["<id>"]的暫停 GSAP 時間軸。使用帶種子的rng()或hh()取代Math.random，且不得使用requestAnimationFrame、時鐘或網路請求。動畫計數器和粒子效果為代理補間數值的純函數。 - 符合 lint 規範的撰寫方式。
- 使用
document.querySelector('[data-composition-id="<id>"]:not([data-composition-src])')定位子 composition 自身的根元素，切勿使用#root（組合後多個根元素共享該 ID）。 - 元素 ID 前綴應包含 composition 名稱（
dg-、hd-、rs-、ti-）。 - 每個元素-屬性對應一個
fromTo，其後再使用to。 - 切勿對
letterSpacing、width、height、top或left進行補間；應使用變形和透明度。 - 錯開單獨的標籤，使其在靜止時不重疊。
- 使用
- 視覺風格。 接近黑色的暖色背景，帶有漂移光線和顆粒感；每個面板使用
.glass；重點處使用金色光澤；每個停頓點帶有微小的相機漂移；每個完成的狀態至少維持 1 秒。
5. 驗證與交付
在專案目錄中執行以下命令：
npx --yes [email protected] check
npx --yes [email protected] snapshot --at <每個節點的中間時間點>
check必須通過，無任何錯誤。檢視所有警告。- 檢視線上截圖集。對任何密集的影格進行裁切和放大：檢查是否有重疊、文字被裁切、token 落點錯誤以及內邊距不均等問題。
- 執行
measure-fold.py和audit-grid.sh，並修正其標記的任何問題。 - 使用
npx --yes [email protected] render進行渲染；結果輸出至renders/。製作一個低於 30 MB 的分享版本，適合手機觀看：ffmpeg -i renders/<檔案>.mp4 -c:v libx264 -crf 23 -preset slow -pix_fmt yuv420p -movflags +faststart renders/<slug>-share.mp4 - 即時播放器：從專案根目錄執行
node viewer/build.mjs。它會重新建置每個短影格的即時播放器（reel/及每個reels/<slug>/），並寫入輪播頁viewer/index.html，每個短影格在viewer/reels/中各有一個副本。將viewer/index.html發布至短影格圖庫成品 https://claude.ai/artifact/Joet84qdr6Kb47vYZzc8YR，並在files中傳遞所有viewer/reels/*.html。使用者偏好即時 HTML 播放器而非內嵌影片。對於單一短影格，在其資料夾中執行node build-preview.mjs會寫入dist/preview.html。 - 回報執行時間、已檢查的項目（影格、摺線間隙、稽核），以及任何尚未驗證的事項。
參考資料
references/primitives.md：所有視覺建構模塊，附帶實作該模塊的檔案。template/：完整的升級再造短影格。此為品質標竿；請將新作品與之比較。