motion

Motion

Motion for React（motion／旧称 Framer Motion）と、プロダクトのモーションデザイン（目的、トークン、アクセシビリティ、パフォーマンス）にこのスキルを使用します。記憶に頼らず、最新の motion.dev React docs を優先してください。説明は [email protected]（最新 13.5.0）に合わせます。

対象範囲： React と React ベースのフレームワークのみ（Next.js、Vite+React、Remix など）。Motion for Vue、バニラ JavaScript のみのページ、React Native は実装しないでください。

すべてのホバーに Motion が必要なわけではありません。一般的なデザイン基準は維持し、プロジェクトですでに Motion を使用している場合、または CSS では実現しにくい入退場、レイアウト、ジェスチャー、スクロール連動のモーションが必要な場合に Motion を使用してください。

コア原則（常に適用）

アニメーションを提案または実装する前に、次の問いに答えてください。

1. インターフェースでは何が変わりましたか？
2. なぜ変わりましたか？
3. 変わった要素はどこから来て、どこへ向かいますか？
4. ユーザーに次に何に注目してもらうべきですか？
5. 装飾のために待たずに、ユーザーは作業を続けられますか？
6. モーションを低減した場合、どのように置き換えますか？
7. このアニメーションはコンポジター上で動作しますか。それともレイアウトやペイントを発生させますか？

満たさない場合は、削除するか簡素化してください。そのうえで、最小限のツールを選びます。CSS → motion/react-mini／LazyMotion → 完全版の motion/react → スクリーンショットのようなモーフィングが適している場合に限り AnimateView／animateView（View Transitions）。

ワークフロー

1. React の対象を確認します。motion/react または motion/react-client（Next App Router）を使用してください。bun add motion を推奨します。新しい React UI では framer-motion、motion-v、バニラ CDN Motion を生成しないでください。
2. source-map.md でバージョン、エントリーポイント、ドキュメント URL を最新のものに更新します。13.x を対象とします。13.0 以降では、Emotion／Styled Components に isValidProp の明示的な指定、または合成順序の逆転が必要です。packages-react.md を参照してください。
3. foundations.md を参照し、プロダクトのモーションに関する判断（目的、トークン、時間／イージング）を適用します。
4. 宣言的 API（motion.*、variants、transitions、arc()、ジェスチャー、AnimatePresence、SVG）には、setup-react-core.md を使用します。
5. MotionValues、useAnimate、スクロール、レイアウト／layoutId、Reorder、および関連フックには、values-scroll-layout.md を使用します。
6. animateView（"motion" から）または React の AnimateView コンポーネント（motion/react-animate-view、React 19.3 以降）による View Transitions には、view-animations.md を使用します。
7. Next／RSC、Mini、LazyMotion のサイズ調整、移行、Motion+ には、packages-react.md を使用します。
8. LazyMotion のレシピ、MotionConfig、モーションの低減、パフォーマンス、テスト、AI が陥りやすい誤りには、production-a11y.md を使用します。
9. Motion を使用しない場合の CSS／WAAPI／FLIP／View Transitions／スクロール駆動 CSS には、web-implementation.md を使用します。
10. UI パターンのレシピには、component-recipes.md を使用します。
11. 監査、引き継ぎ、QA には、deliverables-qa.md を使用します。これらが主な対象となる場合は、accessibility.md と performance.md も読み込んでください。

実装上の判断

• 標準のインポート： import { motion, AnimatePresence } from "motion/react"。Next App Router：import * as motion from "motion/react-client" または "use client"。
• ルートに <MotionConfig reducedMotion="user"> を設定します。ライブラリのデフォルトは "never" で、明示的に有効にするまで OS の設定は無視されます。
• transform / opacity を優先し、サイズや位置の変化には layout / layoutId を使用します（animate の width/height は使いません）。必要に応じて layout="x" / layout="y" / layout="position" で軸を固定します。
• 条件分岐の外側に AnimatePresence を配置し、安定した keys を使用します。mode="wait" は子要素が 1 つの場合に限ります。
• 新しいコードでは、従来の staggerChildren よりも delayChildren: stagger(...) を優先します。
• 曲線に沿った移動には transition={{ path: arc() }} または transition.layout.path を使用します。ミニ版の animate() は使いません。
• カスタムコンポーネントでは motion.create(Component) を一度だけ呼び出します（レンダー内では呼び出しません）。ref を転送してください。Motion 13 では、MotionConfig isValidProp={isPropValid} を指定しない限り、Emotion の prop フィルタリングが行われると想定しないでください。
• 高頻度のスクロール／ドラッグには、毎フレーム useState を使うのではなく、MotionValues と style を使用します。
• バンドル：LazyMotion + motion/react-m の m を使用します。domAnimation と domMax（layout/drag）を使い分けます。
• Mini（motion/react-mini）では x / y などの独立した transform は使用できません。完全版の useAnimate または CSS の transform を使用してください。
• View Transitions：motion/react-animate-view の AnimateView（13.4 以降は無料。React/React DOM 19.3+ が必要で、状態変更は startTransition 内で行います）、または古い React では "motion" の命令型 animateView を使用します。OSS で Motion+ / motion-plus が利用できると想定しないでください。
• Reorder： 上書きする場合を除き axis は省略します。グリッドでは "xy" を指定します。RTL に対応しています。

検証

• framer-motion / motion-v ではなく、motion/react（または motion/react-client / react-m / react-mini / react-animate-view）からインポートしていること。
• reduced-motion の経路をテストしていること（MotionConfig および／または useReducedMotion）。
• 終了アニメーション：presence でラップし、キーを指定していること。タスクの速度に応じて、中断や transition が適切であること。
• レイアウト：popLayout には static ではない親要素を指定し、必要に応じて layoutScroll / layoutRoot を設定していること。
• テスト：transition={{ duration: 0 }} または false を使用します。必要に応じて、スタイルをアサートする前に frame.postRender を待機してください。
• 完全版の motion を追加する場合は、LazyMotion／mini と比較してバンドルを確認すること。
• 13.0 以降の CSS-in-JS：DOM に style props が漏れていないこと（または isValidProp / 逆方向の合成を使用していること）。