HyperFrames モーション
すべてのモーション知識を 1 つのスキルに集約: ルール (アトミックレシピ)、ブループリント (マルチフェーズシーンテンプレート)、トランジション (シーン間遷移)、テクニック (より広範なモーションデザインパターン)、そしてアダプター (ランタイムごとの API)。
合成契約 (データ属性、サブコンポジション、決定性) については /hyperframes → core/ を参照してください。
デフォルト: アトミックルールの合成
rules-index.md から 2～4 個のルールを選択し、単一の一時停止 GSAP タイムラインで結合するだけで完了します。ブループリントから始めるよりも高速で、コード量も少なくなります。
ブループリントをロードすべき場合
- シーンが既存の設計済みマルチフェーズテンプレート (ブランドリビール、ソーシャルプルーフ、デモページスクロールスポットライトなど) に一致し、そのフェーズパイプラインを再利用することで実際の制作時間を節約できる場合
- 複雑な 4～5 フェーズの振付の実行可能なグラウンドトゥルースコードが必要な場合
ブループリントは blueprints-index.md にあります。各エントリは blueprints/<id>.md (レシピ) と examples/<id>.html (実行可能サンプル) を指します。推測で読み取らないでください。シーンレベルのオーケストレーションが必要だと判断した場合にのみロードしてください。
ルーティング
| 目的 | 参照先 |
|---|---|
| トリガー/タグによるアトミックモーションパターンの選択 | rules-index.md |
| 1 つのルールの完全な HTML / CSS / GSAP レシピを読む | rules/<name>.md |
| マルチフェーズシーンテンプレートの選択 | blueprints-index.md |
| 1 つのブループリントの完全なレシピを読む | blueprints/<id>.md + examples/<id>.html |
| シーン間トランジション (CSS 駆動、2 つのクリップ間) の作成 | 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 レンダリングキャンバス (パーティクル、リキッドガラス、カスタムシェーダー) に。
複数のランタイムを 1 つのコンポジションで共存させることができます。各ランタイムは自身のインスタンスをランタイム固有のグローバルに登録し、HyperFrames がすべてを 1 パスでシークできるようにします。
重要な制約
前提条件: /hyperframes/core → 譲れないルール (単一の一時停止タイムライン、data-duration が長さを決定、Math.random / Date.now / performance.now の使用禁止、repeat: -1 の禁止、後のシーンクリップでの gsap.set 禁止、display / visibility アニメーション禁止、async / setTimeout / Promise 内でのタイムライン構築禁止)。ここでは再述しません。
コアの契約に追加されるアニメーション制作上の注意事項:
- 事前計算されたレイアウト定数 — トゥイーン時に
getBoundingClientRect()から位置を導出しないでください。トゥイーン時の DOM 計測は、レンダラーが並行してサンプリングするため非同期になります。座標はコンポジションのセットアップ時に 1 度計算し、再利用してください。 - 空間モーションには 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