プラグインのインストール: セットアップやフレッシュネスコマンドの前に、このスキルが 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`
名前付きテキストアニメーションエフェクト (外部 `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 は不使用、有限のルート data-duration がない場合は repeat: -1 不可、後続シーンのクリップに対するページロード時の gsap.set 禁止、display や生の visibility トゥイーン禁止、タイムラインは完全に構築された後にのみ登録すること。構築が document.fonts.ready などの非同期コールバック内で実行される場合も同様)。GSAP の autoAlpha とゼロデュレーションの可視性設定を明示的なタイムライン境界で使用することは、コアによって許可されています。これらの例外は、クリップ内の非クリップ要素またはラッパーにのみ使用してください。.clip のライフサイクルはフレームワークが所有します。ここで完全なコントラクトを再述しないでください。

コアのコントラクトに加えて、アニメーション作成上の追加事項:

事前計算されたレイアウト定数 — トゥイーン時に getBoundingClientRect() から位置を導出しないでください。トゥイーン時の DOM 測定は、レンダラーが並行してサンプリングするため同期が取れなくなります。コンポジションのセットアップ時に一度座標を計算し、それを再利用してください。
空間モーションには GSAP の transform エイリアスのみを使用 (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 アニメーション