外掛安裝： 在執行設定或更新命令之前，當此技能位於 HyperFrames 外掛內部時，請遵循外掛執行規則。獨立安裝則保留下方的更新說明。
HyperFrames 動畫
所有運動知識集合於一個技能中：規則（原子級配方）、藍圖（多階段場景模板）、轉場（場景間切換）、技術（更廣泛的動態設計模式）以及配接器（各執行時期 API）。
關於構圖合約（資料屬性、子構圖、確定性），請參閱 hyperframes-core。
預設：組合原子規則
從 rules-index.md 中挑選 2-4 條規則，將它們用一個暫停的 GSAP 時間軸黏合在一起即可。這比從藍圖開始更快，產生的程式碼也更少。
在以下情況載入藍圖
- 場景符合現成的預先設計多階段模板（品牌揭示、社會證明等），且重複使用其階段管線可節省實際創作時間
- 您希望為複雜的 4-5 階段編排取得可執行的真實程式碼
藍圖存放於 blueprints-index.md。每個條目指向 blueprints/<id>.md（配方）。請勿投機性地讀取它；當您已決定需要場景級編排時再載入。
路由
| 如果您想… | 請閱讀 |
|---|---|
| 透過觸發條件 / 標籤挑選一個原子運動模式 | rules-index.md |
| 讀取一條規則的完整 HTML / CSS / GSAP 配方 | rules/<name>.md |
| 挑選一個多階段場景模板 | blueprints-index.md |
| 讀取一個藍圖的完整配方 | blueprints/<id>.md |
| 創作一個場景轉場（CSS 驅動，在兩個片段之間） | transitions/overview.md, transitions/catalog.md |
| 查閱更廣泛的動態設計技術 | techniques.md |
| 動態模糊 — 元素上的快門拖影，以及何時不應使用 | references/motion-blur.md |
| 分析現有構圖的動畫映射 | scripts/animation-map.mjs |
| GSAP API — 時間軸 / 補間 / 位置參數 | adapters/gsap.md |
| GSAP — 即用效果配方 | rules/gsap-effects.md |
| GSAP — 變形 / 效能 | adapters/gsap-transforms-and-perf.md |
| GSAP — 緩動 / 交錯 | adapters/gsap-easing-and-stagger.md |
| GSAP — 時間軸 / 標籤 | adapters/gsap-timeline-and-labels.md |
Lottie / dotLottie（After Effects 匯出，window.__hfLottie） | adapters/lottie.md |
| 角色動畫（行走循環、吉祥物、關節木偶、手勢） | adapters/lottie.md → 角色章節 |
Three.js / WebGL（3D 場景，AnimationMixer，hf-seek） | adapters/three.md |
Anime.js（window.__hfAnime） | adapters/animejs.md |
CSS 關鍵影格（animation-delay / play-state / fill-mode） | adapters/css-animations.md |
Web Animations API（element.animate()，currentTime 搜尋） | adapters/waapi.md |
TypeGPU / WebGPU（navigator.gpu，WGSL，計算管線） | adapters/typegpu.md |
HTML 作為紋理 + WebGL/GLSL 後處理特效（透過 drawElementImage 擷取即時 DOM） | adapters/html-in-canvas-patterns.md |
具名文字動畫效果（透過外部 animate-text 技能取得 24 種 ID） | adapters/animate-text.md |
挑選執行時期
- GSAP 是 95% 運動工作的預設選擇 — 涵蓋時間軸編排、變形、緩動、交錯。此技能中的所有原子規則皆基於 GSAP。
- Lottie 用於資產具有預先烘焙時間軸（通常是 After Effects 匯出）的情況，包括會行走、做手勢或反應的角色。
- Three.js 用於 3D 場景、相機運動、著色器驅動的視覺效果。
- Anime.js 用於輕量級補間，當 GSAP 過於龐大時。
- CSS 用於簡單的重複動機、裝飾、閃爍效果 — 無需 JavaScript 動畫成本。
- WAAPI 用於無需 GSAP 依賴的原生瀏覽器關鍵影格。
- TypeGPU / WebGPU 用於 GPU 渲染的畫布（粒子、液體玻璃、自訂著色器）。
多個執行時期可以在一個構圖中並存。每個執行時期會將其實例註冊到特定於執行時期的全域物件上，以便 HyperFrames 能夠在一次遍歷中搜尋所有實例。
關鍵限制
先決條件：hyperframes-core → 不可妥協的規則（單一暫停時間軸，data-duration 決定長度，沒有 Math.random / Date.now / performance.now，沒有 repeat: -1，沒有頁面載入時對後續場景片段執行的 gsap.set，沒有 display 或原始 visibility 補間，以及在 async / setTimeout / Promise 內部建構時間軸）。核心仍允許在明確的時間軸邊界使用 GSAP autoAlpha 和零持續時間的可見性設定。僅在非片段元素或片段內的包裝器上使用這些例外；框架擁有 .clip 的生命週期。請勿在此處重述完整合約。
在核心合約之上新增的動畫創作限制：
- 預先計算的佈局常數 — 永遠不要在補間時從
getBoundingClientRect()推導位置。補間時的 DOM 測量會因渲染器平行取樣而不同步；在構圖設定時計算一次座標並重複使用。 - 空間運動僅使用 GSAP 變換別名（
x，y，scale，rotation）。核心的允許清單也允許對非空間屬性補間使用opacity/color/backgroundColor/borderRadius— 但永遠不要使用width/height/top/left進行佈局變更。
腳本
node skills/hyperframes-animation/scripts/animation-map.mjs <composition-dir> \
--out <composition-dir>/.hyperframes/anim-map
讀取註冊在 window.__timelines 上的每個 GSAP 時間軸，列舉補間，取樣邊界框，計算標誌，輸出 animation-map.json。在創作後使用它來審查編排（死區、交錯一致性、生命週期警告）。
animation-map.mjs 首先從當前專案解析輔助套件，然後可以引導捆綁的 HyperFrames 套件版本。僅在捆綁的 CLI/技能安裝外部執行此技能，並且需要明確指定該引導版本時，設定 HYPERFRAMES_SKILL_PKG_VERSION=<version>。
另請參閱
hyperframes-core— 構圖結構、資料屬性、子構圖、確定性渲染合約hyperframes-creative— 色板、排版、敘述、節拍規劃（非動畫的創意指導）hyperframes-cli—npx hyperframes lint / check / snapshot / preview / render