HyperFrames 動畫知識庫 是做什麼的？
所有動畫知識集中於此技能：規則（原子級配方）、藍圖（多階段場景範本）、轉場（場景間切換）、技巧（更廣泛的動態設計模式），以及適配器（各執行階段的 API）。
關於組合契約（資料屬性、子組合、確定性），請參閱 /hyperframes → core/。
預設：組合原子規則
從 rules-index.md 中選取 2-4 條規則，用一個暫停的 GSAP 時間軸將它們組合在一起，這樣就完成了。這比從藍圖開始更快，產生的程式碼也更少。
在以下情況載入藍圖
- 場景符合現有的預先設計多階段範本（品牌揭露、社交證明、示範頁面滾動聚光燈等），且重複使用其階段管線能節省實際創作時間。
- 您想要一個複雜的 4-5 階段編排的可執行的真實程式碼。
藍圖位於 blueprints-index.md。每個條目都指向 blueprints/<id>.md（配方）和 examples/<id>.html（可執行範例）。請勿投機地讀取它；只有在您已決定需要場景層級編排時才載入它。
路由
| 您想要… | 請閱讀 |
|---|---|
| 根據觸發器/標籤選取原子運動模式 | rules-index.md |
| 閱讀某個規則的完整 HTML / CSS / GSAP 配方 | rules/<name>.md |
| 選取一個多階段場景範本 | blueprints-index.md |
| 閱讀某個藍圖的完整配方 | blueprints/<id>.md + examples/<id>.html |
| 創作一個場景轉場（由 CSS 驅動，在兩個片段之間） | transitions/overview.md、transitions/catalog.md |
| 查詢更廣泛的動態設計技巧 | techniques.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 |
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 內部建構時間軸）。此處不再重述。
在核心契約之上新增的動畫工藝：
- 預先計算的佈局常數 — 絕不在補間時間從
getBoundingClientRect()推導位置。補間時間的 DOM 測量會導致不同步，因為渲染器會並行取樣；在組合設定時計算一次座標並重複使用。 - 空間運動僅使用 GSAP 變形別名（
x、y、scale、rotation）。核心的白名單也允許對非空間屬性補間使用opacity/color/backgroundColor/borderRadius— 但絕不允許對佈局變更使用width/height/top/left。
腳本
node skills/hyperframes-motion/scripts/animation-map.mjs <composition-dir> \
--out <composition-dir>/.hyperframes/anim-map
讀取註冊在 window.__timelines 上的每個 GSAP 時間軸，列舉補間，取樣邊界框，計算標記，並輸出 animation-map.json。在創作後使用它來審計編排（死區、交錯一致性、生命週期警告）。
參見
/hyperframes→core/— 組合結構、資料屬性、子組合、確定性渲染契約/hyperframes-design— 調色板、字體排印、節拍規劃（非動畫的創意指導）/hyperframes→cli/—npx hyperframes lint / validate / inspect / preview / render