HyperFrames アニメーション
すべてのモーション知識を1つのスキルにまとめました：ルール（アトミックなレシピ）、ブループリント（マルチフェーズシーンテンプレート）、トランジション（シーン間）、テクニック（幅広いモーションデザインパターン）、そしてアダプター（ランタイムごとの 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 駆動、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 内でのタイムライン構築禁止）。コアにより、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