プラグインインストール: セットアップやフレッシュネスコマンドの前に、このスキルが HyperFrames プラグイン内にある場合はプラグイン実行ルールに従ってください。スタンドアロンインストールの場合は、以下の更新手順を守ってください。
HyperFrames アニメーション
すべてのモーション知識を1つのスキルに統合: ルール（原子レシピ）、ブループリント（マルチフェーズシーンテンプレート）、トランジション（シーン間）、技法（広範なモーションデザインパターン）、およびアダプター（ランタイムごとのAPI）。
コンポジションコントラクト（データ属性、サブコンポジション、決定性）については hyperframes-core を参照してください。
デフォルト: 原子ルールを合成する
rules-index.md から2〜4つのルールを選び、単一の一時停止 GSAP タイムラインで結合するだけです。ブループリントから始めるよりも高速で、コードも少なくなります。
ブループリントをロードするケース
- シーンが既存の事前設計されたマルチフェーズテンプレート（ブランドリビール、ソーシャルプルーフなど）に一致し、そのフェーズパイプラインを再利用することで実際の作成時間を節約できる場合
- 複雑な4〜5フェーズの振り付けに対する実行可能なグラウンドトゥルースコードが必要な場合
ブループリントは blueprints-index.md にあります。各エントリは blueprints/<id>.md（レシピ）を指します。推測で読み込まず、シーンレベルのオーケストレーションが必要だと判断した場合にのみロードしてください。
ルーティング
| したいこと… | 読むドキュメント |
|---|---|
| トリガー/タグで原子モーションパターンを選ぶ | rules-index.md |
| 1つのルールの完全な HTML/CSS/GSAP レシピを読む | rules/<name>.md |
| マルチフェーズシーンテンプレートを選ぶ | blueprints-index.md |
| 1つのブループリントの完全なレシピを読む | blueprints/<id>.md |
| シーン間トランジションを作成する（CSS駆動、2つのクリップ間） | 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 → キャラクター |
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-as-texture + WebGL/GLSL ポストエフェクト（drawElementImage でライブDOMをキャプチャ） | adapters/html-in-canvas-patterns.md |
名前付きテキストアニメーションエフェクト（24 ID、外部 animate-text スキル経由） | 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 パッケージバージョンをブートストラップできます。HYPERFRAMES_SKILL_PKG_VERSION=<version> は、バンドルされた CLI/スキルインストールの外部でスキルを実行し、そのブートストラップバージョンを明示的に固定する必要がある場合にのみ設定してください。
関連情報
hyperframes-core— コンポジション構造、データ属性、サブコンポジション、決定論的レンダリングコントラクトhyperframes-creative— パレット、タイポグラフィ、ナレーション、ビートプランニング（非アニメーションのクリエイティブディレクション）hyperframes-cli—npx hyperframes lint / check / snapshot / preview / render