外掛安裝： 在執行設定或更新指令之前，當此技能位於 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 → Characters |
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、在沒有有限根 data-duration 時不使用 repeat: -1、不在後續場景片段上使用頁面載入時的 gsap.set、不使用 display 或原始 visibility 補間，並且僅在時間軸完全建立後才註冊它，包括在建置在非同步回呼（例如 document.fonts.ready）內執行時）。核心仍允許在明確的時間軸邊界使用 GSAP autoAlpha 和零持續時間的可見度設定。請僅在非片段元素或片段內的包裝器上使用這些例外；框架擁有 .clip 的生命週期。請勿在此處重述完整契約。
在核心契約之上新增的動畫工藝規則：
- 預先計算的佈局常數 — 永遠不要在補間時從
getBoundingClientRect()推導位置。補間時的 DOM 測量會不同步，因為渲染器會並行取樣；在組合設定時計算一次座標並重複使用。 - 空間動畫僅使用 GSAP 轉換別名（
x,y,scale,rotation）。核心的允許列表也允許對非空間屬性補間使用opacity/color/backgroundColor/borderRadius— 但絕不允許對佈局更改使用width/height/top/left。
腳本
node <SKILL_DIR>/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