Motion.dev（旧 Framer Motion）は、React、プレーンな JavaScript、Vue 向けのモダンなアニメーションライブラリ兼ドキュメント集で、高性能で自然な操作感の UI アニメーションを簡単に作成できます。宣言的なコンポーネント API（例: motion.div、motion.…
Motion.dev（旧 Framer Motion）は、React、プレーンな JavaScript、Vue 向けのモダンなアニメーションライブラリ兼ドキュメント集で、高性能で自然な操作感の UI アニメーションを簡単に作成できます。宣言的なコンポーネント API（例: motion.div、motion.svg）、バリアント、キーフレーム、物理ベースのスプリングやイージングオプション、さらに useAnimation によるタイムライン風や命令的な制御を提供します。主な機能にはレイアウトや共有レイアウトのトランジション（layoutId）、マウント／アンマウント時の存在認識アニメーション（AnimatePresence）、ジェスチャーサポート（ドラッグ、タップ、ホバー）、スクロール連動アニメーション、SVG サポートなどがあります。Motion を使えば、マイクロインタラクション、アニメーション付きリスト、ページ遷移、読み込み状態、複雑な振付的アニメーションをアクセシブルでコンポーザブル、かつツリーシェイク可能なコードで実装できます。一般的なスタイリング手法やサーバーサイドレンダリングに配慮したパターンとの統合も備えており、本番のウェブフロントエンドで洗練されたモーションデザインを求める場合に実用的な選択肢です。
このページは OpenClaw Skills 学習ハブの一部で、導入手順・カテゴリ導線・実践リンクを提供します。