Framer Motion ホバー効果付きインタラクティブ画像ギャラリー

このインタラクティブ画像ギャラリーは、Framer Motionの主要な機能をいくつか実演しています：

コアコンセプト：

• レイアウトアニメーション：layoutIdを使用したグリッド表示と詳細表示間のスムーズな遷移
• ホバー効果：ホバー時のスケールアニメーションとオーバーレイ表示
• AnimatePresence：モーダルコンポーネントのクリーンな表示/非表示アニメーション
• スプリング物理：スプリングトランジションによる自然な動き
• ジェスチャーサポート：組み込みのホバーとタップジェスチャーアニメーション

主な機能：

1. レスポンシブデザインのグリッドレイアウト
2. ホバー時の画像拡大とテキストオーバーレイ表示
3. 画像クリックで詳細ビューを開く
4. グリッドとモーダル間のスムーズなレイアウト遷移
5. 背景ディミングとフォーカス管理
6. 回転効果付きインタラクティブ閉じるボタン
7. 詳細ビュー内の段階的テキストアニメーション

学習ポイント：

• 共有要素トランジションのためのlayoutIdの使用
• 複数のアニメーションプロパティの組み合わせ
• Reactフックを使用したアニメーション状態の管理
• レスポンシブなジェスチャーベースのインタラクションの作成
• アクセシブルなモーダルパターンの実装