hyperframes-animation

HyperFrames アニメーション

モーションに関するあらゆる知識を1つにまとめています。ルール（基本的なレシピ）、ブループリント（複数フェーズのシーンテンプレート）、トランジション（シーン間の切り替え）、テクニック（より幅広いモーションデザインのパターン）、アダプター（ランタイムごとのAPI）を収録しています。

コンポジションの仕様（データ属性、サブコンポジション、決定性）については、hyperframes-core を参照してください。

デフォルト：基本ルールを組み合わせる

rules-index.md から2〜4個のルールを選び、1つの一時停止した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 はすべてを一度の処理でシークできます。

重要な制約

前提条件：hyperframes-core → 必ず守るルール（一時停止状態のタイムラインを1つだけ使用する、長さは data-duration で決定する、Math.random / Date.now / performance.now は使用しない、repeat: -1 は使用しない、後続シーンのクリップに gsap.set を使用しない、display / visibility はアニメーションさせない、async / setTimeout / Promise の中でタイムラインを構築しない）。ここではこれらを繰り返しません。

core の契約に加わる、アニメーション制作上の制約：

• レイアウト定数は事前に計算します — トゥイーン実行時に getBoundingClientRect() から位置を算出しないでください。レンダラーは並行してサンプリングするため、トゥイーン実行時の DOM 測定は同期ずれの原因になります。座標はコンポジションのセットアップ時に一度だけ計算し、再利用してください。
• 空間的な動きには GSAP のトランスフォームエイリアスのみを使用します（x、y、scale、rotation）。core の許可リストでは、空間的でないプロパティのトゥイーンに 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 を出力します。作成後、振り付け（デッドゾーン、スタッガーの一貫性、ライフサイクルの警告）を監査するために使用してください。

関連項目

• hyperframes-core — コンポジションの構造、データ属性、サブコンポジション、決定論的なレンダリングの契約
• hyperframes-creative — パレット、タイポグラフィ、ナレーション、ビートの計画（アニメーション以外のクリエイティブディレクション）
• hyperframes-cli — npx hyperframes lint / validate / inspect / preview / render