motion-dev-animations

Motion Dev アニメーション

Motion.dev - 月間1,000万回以上のダウンロード数を誇る、Framer Motion の後継 React、Next.js、Svelte、Astro、Vue 向けの、GPU アクセラレーションによる 120fps のアニメーション

目的

Apple／Jon Ive の原則に従って、本番環境向けの高品質なアニメーションを生成します。 目的に沿っている（機能を果たす） | スムーズ（120fps） | アクセシブル（モーション低減に対応） | 高性能（GPU のみ） | 洗練されている（控えめ） | 一貫している（タイミングを統一）

使用する場面

✅ 次の場合に使用します：

• React 19+／Next.js 15+／Svelte 5+／Astro 4+ でのアニメーション実装
• スクロールエフェクト（視差、表示アニメーション）、ジェスチャー（ホバー、ドラッグ、タップ）、レイアウトアニメーション
• 60fps 以上のパフォーマンスが必要なヒーローセクション、カード、マイクロインタラクション
• スプリング物理、自然な動き、アクセシビリティが必要なプロジェクト

❌ 次の場合は使用しないでください：

• CSS のみのトランジション（ネイティブの transition プロパティを使用してください）
• JavaScript フレームワークを使用しない静的サイト
• Vue プロジェクト（motion-v パッケージを使用してください。API が異なります）
• 複雑な SVG／Canvas アニメーション（GSAP の方が適しています）
• フォームのみの CRUD アプリ（過剰な機能です）

ワークフロー：明確化 → 計画 → 実装 → 検証

ステップ 1：要件を明確化する

プロジェクトのコンテキストとアニメーションの目標を確認します：

• フレームワーク（React 19+、Next.js 15+、Svelte 5+、Astro 4+）
• アニメーションの種類（開始時、ジェスチャー、スクロール、レイアウト）
• デザインの目標（控えめ、目立つ、遊び心のある、プロフェッショナル）
• パフォーマンスの制約（対象デバイス、バンドルサイズの上限、アクセシビリティ要件）
• トリガーの仕組み（マウント、ビューポート、ユーザー操作）

ステップ 2：アニメーション戦略を計画する

実装方針を定めます：

• アニメーション対象のコンポーネント（ヘッダー、カード、ボタン、セクション）
• モーションのパターン（フェード、スライド、スケール、スプリング、視差）
• タイミングの仕様（期間、遅延、スタッガー間隔）
• 物理パラメーター（stiffness：300～400、damping：20、mass：1）
• アクセシビリティのフォールバック（prefers-reduced-motion の代替手段）

ステップ 3：段階的に実装する

アニメーションを段階的に構築します：

• セットアップ：Motion.dev をインストールし、インポートを設定して、コンポーネントの構成を準備します
• コアアニメーション：モーションプロパティ（initial、animate、transition）を適用します
• 調整：タイミング、イージングカーブ、スプリング物理を調整して、自然な動きに仕上げます
• アクセシビリティ：モーション低減の検出と、キーボードナビゲーションへの対応を追加します
• 最適化：GPU アクセラレーションを確認し、バンドルサイズを最小化して、パフォーマンスをテストします

ステップ 4：品質基準を検証する

要件に照らして確認します：

• パフォーマンス：60fps 以上（Chrome DevTools → Performance タブ）
• レイアウトの安定性：CLS = 0（Lighthouse の監査）
• アクセシビリティ：prefers-reduced-motion を尊重（システム設定でテスト）
• キーボードナビゲーション：すべてのインタラクティブ要素をキーボードで操作可能
• モバイル対応：タッチ操作に適したジェスチャー、iOS／Android でテスト済み

アニメーションパターンの判断ツリー

INPUT: What should animate?

├─ ENTRANCE (page load, mount)
│   → Pattern: initial={{opacity: 0, y: 20}} animate={{opacity: 1, y: 0}}
│   → Timing: 0.6-0.8s, ease: [0.22, 1, 0.36, 1]
│   → Stagger: 0.1-0.2s between elements
│   → Example: ./examples/hero-fade-up.md
│
├─ GESTURE (hover, tap, drag)
│   → Pattern: whileHover={{scale: 1.05}}, whileTap={{scale: 0.95}}
│   → Physics: Spring (stiffness: 300-400, damping: 20)
│   → Timing: Instant response (no duration)
│   → Examples: ./examples/card-hover.md, ./examples/magnetic-button.md
│
├─ SCROLL (reveal, parallax)
│   → Pattern: whileInView + viewport OR useScroll + useTransform
│   → Trigger: viewport={{once: true, amount: 0.3}}
│   → Performance: Transform/opacity only
│   → Examples: ./examples/scroll-reveal.md, ./examples/parallax-layers.md
│
└─ LAYOUT (reorder, expand)
    → Pattern: layout prop (auto FLIP)
    → Shared: layoutId="id" for morphing
    → Caveat: Only animates transforms

API クイックリファレンス

コンポーネント／フック	用途	場面
motion.div	<motion.div animate={{x: 100}}>	基本的なアニメーション
whileHover	whileHover={{scale: 1.05}}	ホバー状態（0.2～0.3 秒）
whileTap	whileTap={{scale: 0.95}}	クリック時のフィードバック
whileInView	whileInView={{opacity: 1}}	スクロール時の表示
drag	drag="x" dragConstraints	ドラッグ可能な要素
layout	<motion.div layout />	自動 FLIP アニメーション
useScroll	スクロールの進行状況を追跡	視差、プログレスバー
useTransform	値をマッピング	スクロール連動エフェクト
useSpring	スプリング物理	値のスムーズな変化
useInView	ビューポートを検出	アニメーションのトリガー

完全な API：完全な API リファレンスを参照してください。

フレームワークとの統合

フレームワーク	インポート	コンポーネント	終了アニメーション
React/Next.js	"motion/react"	<motion.div>	<AnimatePresence>
Svelte	"motion"	Vanilla API	N/A
Astro	"motion"	クライアントスクリプト	N/A
Vue	"motion-v"	<motion.div>	React と同様

品質基準

カテゴリ	要件	確認方法
パフォーマンス	≥60fps	Chrome DevTools → Performance
GPU アクセラレーション	transform/opacity のみ	width/height/left/top を使用しない
バンドル	<50KB	webpack-bundle-analyzer
アクセシビリティ	prefers-reduced-motion	システム設定でテスト
モバイル	タッチ操作に適している	iOS/Android でテスト
レイアウトシフト	CLS = 0	Lighthouse 監査

サンプルライブラリ（段階的読み込み）

アニメーションの種類に応じてオンデマンドで読み込みます。

ヒーローセクション

• ヒーローのフェードアップ - Apple スタイルの定番の登場アニメーション
• ヒーローのスタッガー - 要素を順番に動かす演出
• ヒーローの分割テキスト - 文字を順に表示

スクロールエフェクト

• スクロール時の表示 - Intersection Observer によるフェードイン
• パララックスレイヤー - 複数の速度による奥行き表現
• スクロール進捗 - 読書位置インジケーター

ジェスチャーとインタラクション

• カードのホバー - 上品な浮き上がり＋影
• マグネティックボタン - カーソルに追従
• ドラッグカルーセル - タッチスライダー

レイアウトアニメーション

• リストの並べ替え - ドラッグで並べ替える FLIP
• アコーディオン - 展開／折りたたみ
• タブ切り替え - レイアウト共有

すべてのサンプル：./examples/ ディレクトリ内の全ファイル

リファレンスドキュメント（オンデマンドで読み込み）

• API リファレンス完全版 - すべてのコンポーネント、フック、props
• スプリング物理ガイド - 剛性、減衰、質量の調整
• パフォーマンス最適化 - GPU、will-change、遅延読み込み
• アクセシビリティガイド - モーション低減、キーボード、スクリーンリーダー
• トラブルシューティング - よくある問題と解決策
• Framer Motion への移行 - アップグレードガイド

テンプレート（本番環境対応）

• Next.js ページテンプレート - ヒーロー＋機能＋推薦コメント
• コンポーネントライブラリ - 再利用可能なコンポーネント 10 個以上
• スクロールテンプレート - パララックス＋表示パターン
• ダッシュボードテンプレート - インタラクティブなカード、チャート

インストール

# React/Next.js/Svelte/Astro
npm install motion

# Vue
npm install motion-v

よく使うパターン（コピーしてすぐ使えます）

パターン 1：フェードアップで登場

<motion.div
  initial={{ opacity: 0, y: 20 }}
  animate={{ opacity: 1, y: 0 }}
  transition={{ duration: 0.6, ease: [0.22, 1, 0.36, 1] }}
/>

パターン 2：ホバーカード

<motion.div
  whileHover={{ y: -8, boxShadow: "0 20px 40px rgba(0,0,0,0.12)" }}
  transition={{ type: "spring", stiffness: 300, damping: 20 }}
/>

パターン 3：スクロール時の表示

<motion.div
  initial={{ opacity: 0, y: 50 }}
  whileInView={{ opacity: 1, y: 0 }}
  viewport={{ once: true, amount: 0.3 }}
/>

その他のパターン：スタッガーリスト、終了アニメーション、レイアウト遷移 → ./examples/ ディレクトリ

エラー処理

問題	解決策
アニメーションが開始しない	initial と animate の値が異なることを確認
パフォーマンスが低い	transform/opacity のみを使用し、CSS の will-change を追加
レイアウトシフト	寸法を明示的に設定し、layout prop を使用
終了アニメーションが動作しない	<AnimatePresence> で囲み、key prop を追加

実装のベストプラクティス

1. シンプルに始める → フェード＋スライドから始め、段階的に複雑さを加えます
2. variants を切り出す → 保守性を高めるため、アニメーションの状態を名前付き variants として定義します
3. スプリング物理を優先する → トランジションはデフォルトで spring を使用します（tween より自然です）
4. リスト項目を順番に表示する → リズムと階層を表現するため、staggerChildren（0.1-0.2s）を使用します
5. モバイルで十分にテストする → iOS/Android デバイスでタッチジェスチャーとパフォーマンスを確認します
6. モーション低減に対応する → prefers-reduced-motion に対応したフォールバックアニメーションを必ず用意します
7. パフォーマンスを計測する → Chrome DevTools の Performance タブを使用し、≥60fps を目標にします

デザイン哲学（Apple／Jon Ive の原則）

すべてのアニメーションに、以下のデザイン原則を適用します。

• シンプルさ：時間は 200-400ms とし、同時に動く要素を最小限に抑え、transform プロパティを優先します
• 自然な物理表現：スプリングベースのトランジションを実装し、線形イージングを避け、質量に基づいた動きを適用します
• 目的のある動き：ユーザーの注意を導き、インタラクションへのフィードバックを提供し、視覚的な階層を確立します
• 上品な抑制：「少ないほど豊か」という原則を適用し、一貫したタイミングを保ち、ユーザーのモーション設定を尊重します

検証

構造化出力の検証については、以下を参照してください。

• Motion Config Schema - JSON スキーマ
• Validation Script - 自動チェック

メタデータ

バージョン: 3.0.0（研究に基づく最適化） 最適化: 命令形の表現、少数例パターン（3 例）、段階的な複雑さ、段階的な読み込み トークン効率: コア部分を 87% 削減（15K → 2K）＋自動キャッシュ Motion.dev: v11+ フレームワーク: React 19+、Next.js 15+、Svelte 5+、Astro 4+、Vue 3+ 研究: arXiv 2402.07927v1、2211.01910、2310.14735v5、PubMed 40334089 ライセンス: MIT