Motion design（HyperFrames 版）

HyperFrames 文件教你 API，這份檔案管的是品味。底下的數字來自一支實際上線的作品，請把它們當成預設值：要偏離可以，但必須是刻意的，而不是剛好沒注意。

改編自 whaleyxbt/claude-motion 的 motion-design skill（MIT，見同資料夾 LICENSE）。原版針對 Remotion；本版改寫成 HyperFrames（HTML + GSAP），並加上繁體中文排版規則。標示「（本版新增）」的段落不是原作內容。

在 motion-explainer 系列流程裡使用時（本版新增）

motion-explainer（以及 -images、-video、soil-motion-deck）用官方 faceless-explainer 的流程，下面三件事以那個流程為準，本檔的寫法不適用：

• 時間：節拍來自 STORYBOARD.md 和 audio_meta.json（旁白子句的時間），每一格的 data-start／data-duration 由 assemble-index 寫入。不要另外建 timeline.js／window.TL（第 1 節）。
• 建專案：用 npx hyperframes init（見 motion-explainer 第 3 節），不是第「流程」節的做法。
• 字型與顏色：由專案的 theme.json 決定（預設源石黑體粗體、三色主題），theme.py 會覆蓋每一格自己寫的字型和色票。第 5、6 節的字族建議只在沒有 theme.json 時使用。

其餘的品味規則（緩動、彈性、閱讀停留、構圖、中文排版、強調色只給重點）照常適用。

與官方 HyperFrames skills 的分工（本版新增）

本機也裝了 HeyGen 官方的 HyperFrames skills（hyperframes、hyperframes-core、hyperframes-animation 等）。分工如下：