フロントエンドモーションの設計
モーションをプロダクトインタラクションの一部として構築し、装飾として貼り付けるのではなく、実際のレンダリングオーナーを追跡し、適切な最小の技術を選択し、状態セマンティクスを維持し、ライブブラウザで結果を検証します。
ワークフロー
- 実装を提案する前にターゲットを調査します。
- 実際のルート、コンポーネント、スタイル、状態オーナー、イベントオーナー、既存のアニメーションスタックを特定します。
- プロジェクトの指示を読み、無関係な変更を保持します。
- ユーザーが最初に議論を求めた場合は、承認が得られるまで具体的なモーション仕様で停止します。
- モーションコントラクトを定義します。
- トリガー、開始状態と終了状態、継続時間、イージングまたはスプリング、割り込み動作、繰り返し動作、レイヤリング、縮小モーションの結果を記述します。
- ビジネス状態と視覚的フィードバックを分離します。削除アクション、ナビゲーション、フォーム送信は、プロダクトが明示的に必要としない限り、装飾的なタイムラインの完了に依存してはなりません。
- ソース素材を選択します。
python3 scripts/query_catalog.py --need "<効果の説明>" --top 4を実行します。references/motion-routing.mdを読んで技術選択の指針とします。- 選択したリポジトリの現在の公式README、関連ソース、依存関係/APIバージョン、ライセンスを確認してからコードをコピーするか依存関係を追加します。カタログメタデータは日付付きルーティングスナップショットとして扱い、永続的な真実とはみなしません。
- 採用モードを選択します。
- ターゲットプロジェクトにインストール済みのアニメーションスタックがコントラクトを満たせる場合は、それを優先します。
- 小さなコンポーネントは、そのコードとライセンスが許可する場合にのみコピーして適応します。デモシェルの前提や未使用の依存関係は削除します。
- ライブラリのランタイムモデルが複雑さやリスクを大幅に軽減する場合にのみ、ライブラリを追加します。
- リポジトリが古い、フレームワークが一致しない、または重すぎる場合は、パッケージではなく技術自体を抽出します。
- 最小の一貫したモーションシステムを実装します。
- タイミングとイージングトークンを集中管理します。
- RAFループ、オブザーバー、イベントハンドラー、キャンバス、タイムライン、テクスチャ、GPUリソースをクリーンアップします。
- 再マウント、高速な繰り返し入力、割り込み、ルート変更、リサイズ、非表示タブ、React Strict Modeを適切に処理します。
- SSRアプリケーションではブラウザ専用コードを正しくゲートし、可能な場合は重いビジュアルエンジンをレイジーロードします。
references/quality-gates.mdで検証します。- フォーカスされた静的チェックとテストを実行します。
- ワイドデスクトップ、中間/タブレット、モバイルサイズで実際のランタイムをテストします。
- トランジションの連続性、最終ジオメトリ、コンソールエラー、水平方向のオーバーフロー、入力動作、縮小モーション、現実的なパフォーマンスを確認します。
- 結果を報告します。
- 何が動作するようになったかを最初に述べます。
- 選択した技術またはソースリポジトリと、それが適合した理由を説明します。
- 検証した内容と残っている制限事項を正直に報告します。
選択ルール
- CSSトランジション/キーフレーム: 少数の合成プロパティと単純な決定論的状態に使用します。
- Motion: Reactのプレゼンス、共有レイアウト、ジェスチャー、値、調整されたコンポーネントトランジションに使用します。
- React Spring: 割り込み可能な物理演算が必要で、速度の連続性と自然な応答が固定タイムラインより重要な場合に使用します。
- GSAP: 明示的なマルチステージタイムライン、高密度オーケストレーション、SVG/パス処理、スクロール振付、または命令的統合に使用します。
- Anime.js: React固有の抽象化の外で、コンパクトなDOM/SVG/オブジェクト/キャンバストゥイーンや、ずらしたジェネレーティブエフェクトに使用します。
- Disintegrate: DOMスナップショットのパーティクル化のための技術/リファレンスとしてのみ使用します。html2canvasの忠実度の限界を想定し、そのライフサイクルを最新化します。
- tsParticles: 設定可能なアンビエントパーティクル、紙吹雪、花火、背景に使用します。精密なDOM分解として誤って扱わないでください。
- PixiJS: 大量の2Dパーティクル数、フィルター、スプライトフィールド、シェーダー駆動の2Dエフェクト、明示的なGPUリソース制御に使用します。
- React Bits、Magic UI、またはMotion Primitives: ソースコレクションとして使用します。依存関係、レンダリングコスト、品質が異なるため、個々のコンポーネントを調査してください。
製品ガードレール
- 空間的因果関係を維持する: モーションは、オブジェクトがどこから来たのか、どこへ行ったのか、または何が変わったのかを説明する必要があります。
- transformとopacityを優先する。レイアウトプロパティをアニメーション化するには、そのコストが許容可能であるという証拠が必要です。
- 壊れたレイアウトをモーションで隠してはいけません。
- アンビエント、スクロール、ホバー、エントランスアニメーションが同時に競合して注目を集めることを避けます。
- キーボード同等の動作を提供し、フォーカスセマンティクスを保持します。
prefers-reduced-motionを尊重します。動きを即時の状態変更または抑制されたクロスフェードに置き換えます。- コード検査のみで滑らかさを主張しないでください。レンダリングされたパスで検証し、テスト範囲を報告してください。
- 現在のターンでユーザーが明示的に許可しない限り、プロキシ/ルーティングルールや無関係なローカル環境設定を変更しないでください。
リソース
references/repositories.json: 10個のソースリポジトリ、ライセンス、強み、リスク、ソースエントリーポイントの日付付きカタログ。references/motion-routing.md: 意思決定ガイドとプロダクト対応のアーキテクチャパターン。references/quality-gates.md: 実装とライブビジュアル検証チェックリスト。scripts/query_catalog.py: 自然言語のニーズやタグでリポジトリカタログを検証および検索します。