Mad7droid/ux-motion

UXモーション

以下のルールを適用しながらインタラクションを設計・記述してください。まずプロジェクトのモーショントークン（リポジトリのAGENTS.md、CLAUDE.md、トークンファイル、デザインドキュメント）を確認してください。これらは以下のデフォルト値を上書きします。

常時有効なコアルール

• ハウスルール：機能的なUIは通常120～180msの帯域に収めます。プロジェクトトークンが優先されます。
• 空間連続性、状態変化、入力フィードバック、または不快なポップを避けるためにアニメーションを使用します。
• 名前付きのtransformとopacityのトランジションを優先します。transition: allは決して使用しないでください。
• 出現するサーフェスは減速し、退出するサーフェスは加速します。退出は短くできます。
• 拡大表示されるサーフェスはscale(0.96)付近から開始し、scale(0)からは絶対に開始しないでください。
• prefers-reduced-motion: reduceの下でモーションが置き換え可能になるようにし、理解しやすさとキーボードアクセスを維持します。
• ドラッグ中はポインターをキャプチャし、セカンダリタッチをガードし、実際のデバイスでジェスチャーをテストします。
• モーションを記述したり、一般的なオーバーレイに触れる前に、このファイルを完全に読んでください。REFERENCE.mdは、クリップパス、3D、WAAPI、またはパフォーマンスの深掘りのためだけに使用します。

1. モーションを付与する価値があるか判断する

露出頻度を制約として使用します。常に繰り返される操作は瞬時またはそれに近い速度で行い、たまに表示されるサーフェスは空間連続性を確立し、まれにしかない説明のための瞬間にはより個性を持たせることができます。モーションは、変化を明確にし、入力を認識し、位置を維持し、または不快な出現を防ぐために使用します。これらのいずれも行わない場合は、モーションを削除します。装飾的なモーションのためにキーボードショートカットを待たせないでください。

2. 継続時間を選択する

120～180ms帯はハウスルールです。これはMaterial 3の公開されているshort3（150ms）、short4（200ms）、および標準トランジション範囲（250～400ms）よりも意図的にタイトになっています。これは、遅い機能的なUIに対する優先順位を表すものであり、公開されたアクセシビリティやプラットフォームの要件ではありません。

サーフェス	開始点
プレスフィードバック	100～140ms
ツールチップまたは小さなポップオーバー	120～160ms
メニューまたはドロップダウン	140～180ms
モーダル	180ms
シート	180ms；ビューポートの大部分を移動する場合は最大250ms

終了時はより短い方を使用します。これらはデフォルトであり、プロダクトトークンを上書きするものではありません。

3. イージングを選択する

出現するサーフェスは、強調して着地（減速）する必要があります。終了するサーフェスは、迅速に消える（加速）必要があります。Material 3では、これらの方向を次のように明示的に命名しています。

:root {
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-enter: cubic-bezier(0.05, 0.7, 0.1, 1); /* emphasized-decelerate */
  --ease-exit: cubic-bezier(0.3, 0, 0.8, 0.15); /* emphasized-accelerate */
}

時間のような進行にはlinearのみを使用します。意図的な中間点を経由して状態が遷移する場合は、ease-in-outカーブを使用します。名前だけでカーブを選択しないでください。プロットされた形状と移動方向を検査してください。

4. レンダリングコストを低く抑える

コンポジター上に留まることができるtransformとopacityを優先します。プロパティを指定し、レイアウトをアニメーションの外に保ちます。top、left、width、height、margin、paddingのアニメーションは、レイアウト変更が目的でありコストが許容される場合を除き、避けてください。固有の高さの場合、ラッパーはgrid-template-rows: 0frから1frにトランジションでき、min-height: 0の内部ラッパーがoverflow: hiddenでクリップされます。これでもレイアウトは実行されます。コンポジターのみのショートカットとして扱うのではなく、プロファイリングしてください。will-changeは、プロファイリングが効果を示した後にのみ、遅く、かつ短時間使用してください。レイヤーはリソースを消費します。

5. 状態を正しくする

• 押下可能なコントロールには可視フィードバックを与えます。既存の色、ボーダー、シャドウの状態、または適切な場合は小さなscale(0.98)を使用します。位置決め用のtransformを上書きしないでください。
• 可視フォーカス、キーボードアクティベーション、無効状態を維持します。アニメーションによってフォーカス配置、Escape処理、またはセマンティックな状態更新が遅れてはいけません。
• ポップオーバー、メニュー、ツールチップはtransform-originを介してアンカーから成長します。中央配置のモーダルは中央から成長します。状態が変化している間、原点を安定させてください。
• 再トリガー可能な状態にはトランジションを優先します。自己完結型のイベントにはキーフレームを使用します。
• ホバーのみのアフォーダンスは@media (hover: hover) and (pointer: fine)でゲートします。
• 出現する要素には、サポートされている場合は@starting-styleを使用するか、トランジションの前に初期スタイルを観測可能にするマウント状態を使用します。

6. モーション削減は代替手段を意味する

prefers-reduced-motion設定は、モーションの削除、縮小、または置き換えをカバーします。大規模なパンやスケーリングは前庭系のトリガーになる可能性があります。移動やスケールを、状態を説明できる不透明度や色の変更に置き換えます。フォーカス、読み込み、可視性の変更は理解可能なままにします。ユーザーがモーションを減らすよう要求したという理由だけで要素を消さないでください。CSSだけでなくJavaScript駆動のアニメーションでもこの設定を尊重し、ページが開いている間の設定変更にも対応します。重要な状態変更を完了するためにtransitionendイベントに依存しないでください。トランジションは無効またはキャンセルされる可能性があります。すべてのアニメーションを強制的に短い継続時間にするためにグローバルに設定するのではなく、影響を受けるコンポーネントにスコープを限定してオーバーライドします。

7. ジェスチャー

ドラッグが開始されたらsetPointerCapture()を呼び出します。これにより、後続のポインターイベントは、解放されるまでキャプチャ要素をターゲットにし続けます。調整された速度または距離のルールでディスミスします。普遍的なフリック定数はないため、実際のデバイスで調整してください。ハードエッジではなく、ダンピングを使用して移動を制限します。ジェスチャーがポインターを所有したら、追加のタッチポイントを無視します。ユーザーが実行中のジェスチャーを元に戻せるようにします。pointercancelとlostpointercaptureを処理してドラッグ状態をクリアします。ジェスチャー軸に合わせてtouch-actionを選択し、ページスクロールを不必要にブロックしないようにします。ボタンまたはキーボードの代替手段を提供します。

8. 中断とスプリングの処理

高速な開閉/再オープンは、最新の要求された状態に収束する必要があります。最初から再生するのではなく、現在の視覚状態から再ターゲットします。置き換えまたはアンマウント時に、古いコールバック、リスナー、アニメーションをキャンセルします。古い終了アニメーションが新しく再オープンされたサーフェスを削除してはいけません。表示されていないコンテンツや終了中のコンテンツは、コンポーネントのフォーカスライフサイクルに従ってキーボードナビゲーションから除外します。

直接操作や連続性が恩恵を受ける場合は、プロジェクトのライブラリを尊重してスプリングを使用します。スプリングパラメータはエンジンによって異なります。剛性と減衰の値を盲目的にコピーしないでください。実際のコンポーネントで沈静時間とオーバーシュートを調整します。テキストが多いサーフェスではバウンスを避け、モーション削減設定下では移動を無効にします。

9. 完了と判断する前に検証する

4倍速で再生し、プロパティが一緒に終了し、正しい場所から開始することを確認します。高速にトグルしてスナップを露呈させます。DevToolsでモーション削減をエミュレートします。ドラッグを端まで行い、キャンセルし、2本目のタッチを追加し、物理デバイスでテストします。ランタイムで計算されるアニメーション値については、REFERENCE.mdを参照してください。実際に実行されたチェックと、ブラウザまたは物理デバイスが必要なチェックを明記します。コードレビューだけでは知覚される滑らかさを確立できません。

出力のレビュー

コードを監査する場合、最も重大なものから順に、1つのコンパクトなテーブルで報告します。

ファイル:行	現在	変更先	理由
Menu.tsx:18	transition: all 300ms	名前付きプロパティとプロジェクトトークン	偶発的なレイアウトアニメーションを回避

コード内で確認できる所見のみを報告します。差分がクリーンな場合は、所見を捏造せずにその旨を述べてください。

Curated by mad7droid.