vmitsaras/apply-kinetic-continuity-motion

キネティック・コンティニュイティ・モーションの適用

目的

レイアウトに物理的な記憶を与える、抑制された動きの言語を適用します。要素は識別可能なままで、ユーザーのエネルギーに応答し、次の決定を下せる場所に落ち着きます。

提供された参考動画は、デザイン言語の証拠として扱い、再現するためのテンプレートとしては扱いません。ユーザーが要求したコンセプト、技術、範囲、および許可の境界を保持します。ファイルの変更は、ユーザーが実装を要求した場合にのみ適用します。計画またはレビューの要求の場合は、ファイルを編集せずにガイダンスを返します。

このスキルを使用するタイミング

以下の場合にこのスキルを使用します：

• GSAPデモまたはWebインターフェースが、空間的またはレイアウト状態間での連続性を必要とする場合。
• タスクが画像フィールド、ギャラリー、カルーセル、コンタクトシート、アンカー付きプレビュー、パスベースのシーケンス、ルーティングされたグループ、または抑制されたキネティックタイポグラフィを含む場合。
• 既存のモーションが、切り離されている、高速入力に対して古く感じられる、過度に装飾的である、またはオブジェクトの識別性が不明瞭である場合。
• ユーザーが提供されたモーションの参考資料を、オリジナルでアクセシブルかつ実装可能なインタラクション言語に翻訳したい場合。

以下の場合にはこのスキルを使用しないでください：

• シンプルなホバー、フォーカス、プレス、または不透明度の変更を通常のCSSトランジションで処理できる場合。
• リクエストが、連続性や空間状態の問題がない無関係なアニメーションタスクである場合。
• タスクがインターフェースの動作ではなく、映画、ビデオ編集、またはキャラクターアニメーションに関する場合。
• ユーザーがモーション固有の計画、実装、またはレビューではなく、包括的なアクセシビリティ監査を必要とする場合。

検査する入力

利用可能な入力のうち、必要最小限のセットを検査します：

• 要求されたユーザータスク、トリガー、対象、開始状態、および目標状態。
• 関連するコンポーネント、テンプレート、スタイル、モーションユーティリティ、テスト、デモ、ドキュメント。
• 既存のアニメーション依存関係、特に入手中のGSAPプラグイン。
• ユーザー提供の動画、プロトタイプ、スクリーンショット、ストーリーボード、またはモーション分析ノート。
• レスポンシブ動作、ポインターおよびタッチ動作、キーボードパス、フォーカス動作、およびモーション低減要件。
• 繰り返しアイテム、画像の重さ、ジオメトリ測定、高頻度入力などのパフォーマンス制約。

参考メディア、GSAPプラグイン、またはプロジェクトの慣習が存在しない場合、それらが存在すると仮定しないでください。

参考資料のルーティング

モーションプリミティブの選択、タイミングとイージングの調整、モーション低減動作の定義、または自然さのレビューを行う際は、[references/pattern-catalog.md](references/pattern-catalog.md)を参照してください。

カタログは自己完結型です。タスクがビデオごとの出典や名前付きクリップとの比較を必要とする場合は、このスキルの詳細を仮定するのではなく、そのタスクのワークスペースに提供されている参考メディアまたはモーション分析ドキュメントを検査してください。

コアモーション契約

• 位置、スケール、レイアウトの変更を通じてオブジェクトの同一性を維持します。
• 各モーションビートに1つの支配的な方向を与えます。
• 隣接する要素を1つの空間フィールドとして応答させ、関連する速度と距離ベースのスタッガーを使用します。
• 直接入力には、次のペイントフレームで応答します。イージングはグラブポイントではなく、落ち着きに適用します。
• 短時間加速し、持続時間の大部分を減速に費やします。
• 終了状態と開始状態を十分にオーバーラップさせ、デッドフレームを避けます。
• スケールを一貫して使用し、フォーカス、深さ、または優先度を伝えます。
• アクティブなパッセージを、安定した読み取り可能な静止状態に解決します。
• 表現力豊かな歪みは、短く、局所的で、可逆的で、必須ではないものにします。

スペクタクルよりも連続性を優先します。状態、階層、方向、またはフィードバックを説明しないモーションは削除します。

1つの主要なプリミティブを選択する

状態変化を最もよく説明するプリミティブを選択します。視覚的な新規性を高めるためだけに複数を組み合わせないでください。

• 慣性フィールド（Inertial field）： 1つのシステムとして動く、パン可能またはドリフトするコンステレーション。
• パラレルレール（Parallel rails）： 抑制された速度バリエーションを持つ、繰り返されるメディアトラック。
• ルーティンググループ（Routed groups）： 可視のレーンまたはカテゴリ間を移動するクラスター。
• アンカー付きプレビュー交換（Anchored preview exchange）： 安定したインデックスが境界付きプレビュー領域を制御します。
• 曲線進行（Curved procession）： カードが1つのパス進行値から位置、スケール、スタッキングを導き出します。
• 収束チェーン（Converging chain）： オーバービューが曲がり、拡大/縮小して焦点の合ったコンポジションになります。
• コンタクトシート解決（Contact-sheet resolve）： 保持されたアイテムが、密度の高いレイアウトと厳選されたレイアウトの橋渡しをします。
• 境界付きテキスト破壊（Bounded text disruption）： 表示テキストが一時的にオフセットし、その後きれいに再構築されます。

インタラクションが単純なホバー、フォーカス、プレス、または不透明度の変更のみを必要とする場合は、通常のCSSトランジションを使用します。

ワークフロー

1. リクエストが計画、実装、またはレビューのいずれであるかを確認し、その境界を維持します。
2. トリガー、対象、開始状態、目標状態、およびユーザータスクを特定します。
3. モーションが存在する理由を説明する、1文のモーションテーゼ（運動命題）を記述します。
4. 1つの主要なプリミティブを選択し、その安定した開始コンポジションと終了コンポジションを定義します。
5. 完全な振り付けを追加する前に、モーション低減状態を定義します。
6. マイクロ、メゾ、マクロの階層を確立します。すべての要素がすべてのレイヤーでモーションを必要とするわけではありません。
7. 直接応答、調整された移動、および静かな落ち着きを実装または指定します。
8. 高速入力を、アニメーションをキューイングする代わりに、現在レンダリングされている状態を再ターゲットさせます。
9. ポインター、タッチ、キーボード、フォーカス、モーション低減、割り込み、および障害パスを検証します。
10. 通常速度でレビューし、フレームステップまたは0.25x速度で不連続性やスタッキングエラーを見つけます。
11. 実装が要求された場合、リポジトリの関連テストまたはチェックを実行し、残っている手動検証を報告します。

タイミングシグネチャ

リファレンストークンを開始点として使用し、移動距離とインタラクション頻度に応じて適度に調整します：

• 即時応答：約90ms。
• ホバーまたはフォーカス：約180ms。
• コンパクトな状態変化：約320ms。
• レイアウト再構成：約520ms。
• 大規模な空間シーン：約780ms、通常は1000ms未満に制限。
• 空間スタッガー：35–60ms、モーションソースからの距離順。

標準的な落ち着きにはpower3.out、より強いエディトリアルな入口にはpower4.out、既知の状態再構成にはpower2.inOutを推奨します。線形モーションは、進行がスクロール、ドラッグ、または別の連続入力に従う場合にのみ使用します。

弾性またはバックイージングをシステムのシグネチャにしないでください。リリーススナップにオーバーシュートが必要な場合は、約3%未満に抑えてください。

実装の不変条件

• 単純な状態遷移にはCSSを使用し、調整されたシーケンスにはGSAPタイムラインを使用します。
• 共有要素の連続性が価値がある場合、実際のレイアウト変更にはGSAP Flipを使用します。
• ドラッグが実際のインタラクションであり、同等の可視コントロールが存在する場合にのみ、Draggableを使用します。
• 真のスクロールナラティブがある場合にのみScrollTriggerを使用します。スクロールジャッキングを導入しないでください。
• 1つの正規化された進行値から曲線モーションプロパティを導出し、x、y、スケール、不透明度、スタッキングがずれないようにします。
• 割り込み可能なモーションには、`overwrite: