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 |
| 分析現有組合的動畫地圖 | scripts/animation-map.mjs |
| GSAP API — 時間軸 / 補間 / 位置參數 | adapters/gsap.md |
| GSAP — 即插即用的特效配方 | rules/gsap-effects.md |
| GSAP — 變形 / 效能 | adapters/gsap-transforms-and-perf.md |
| GSAP — easing / stagger | 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 |
具名文字動畫效果（24 個 ID，透過外部的 animate-text 技能） | adapters/animate-text.md |
選擇執行時期
- GSAP 是 95% 動畫工作的預設選擇 — 涵蓋時間軸編排、變形、easing、stagger。此技能中的所有原子規則都基於 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。用於在編寫完成後稽核編排（死區、stagger 一致性、生命週期警告）。
animation-map.mjs 會先從目前專案解析輔助套件，然後可以引導 bundled 的 HyperFrames 套件版本。只有在技能於 bundled CLI/技能安裝之外執行，且您需要明確固定該引導版本時，才設定 HYPERFRAMES_SKILL_PKG_VERSION=<version>。
另請參閱
hyperframes-core— 組合結構、資料屬性、子組合、確定性渲染合約hyperframes-creative— 調色盤、字體排印、敘述、節拍規劃（非動畫的創意方向）hyperframes-cli—npx hyperframes lint / check / snapshot / preview / render