motion

Motion

ウェブ向けアニメーションを、適切に。

• アニメーションのベストプラクティス：「このボタンをアニメーションさせて」「このレイヤーをフェードインさせて」「この Vue コンポーネントをアニメーションさせて」。バニラ JS、React、Vue、Base UI、Radix に特化したガイダンスを提供します。Motion とプレーン CSS の両方を扱い、それぞれを選ぶべき状況も説明します。
• 挿入パネル：「/motion make accordion」「/motion insert」「/motion add」「カルーセルを作成して」「料金セクション／ヒーローを追加して」。Motion のライブラリを開き、ユーザーが項目を選べるようにします。Motion+ サーバーに接続されている場合は、そのパネルを優先してください。
• ドキュメント、サンプル、Motion UI の検索：「X にはどんなオプションがありますか」「X はどのように動作しますか」「X を使って Y を実行して」「X のサンプルを見せて」。
• CSS のスプリングとバウンスの生成：「0.3 秒でバウンスが 0.5 の CSS スプリングを生成して」「もっと弾むようにして」「バウンスのイージングを設定して」。
• Performance Doctor（MotionScore 監査）：「ホームページのアニメーションのパフォーマンスを改善して」「このアニメーションが遅いのはなぜ」「src/ に対して Performance Doctor を実行して」「src/Modal.tsx のジャンクを監査して」「ホームページのランタイム監査」「このコードはカクつきますか：[スニペット]」「[URL] のパフォーマンスを評価して」。監査を先回りして実行し、見つかった内容を報告することもできます。監査は Motion+ の機能です。スキルファイルでは、方法論を取得する手順と、取得を拒否された場合の対応を説明しています。
• トランジションのプレビュー：「easeOut のカーブを見せて」「このスプリングを調整させて」「バウンスが 0.5 のスプリングを視覚化して」。

Motion のアップグレード

「/motion upgrade」「framer-motion から移行」「Motion 12 にアップグレード」などのリクエストは、すべてドキュメント検索で処理されます。専用のツールはありません。

1. まずインストール済みのバージョンを確認してください。 検索する前に、package.json で motion、 framer-motion、または motion-v を確認してください。ガイドはあるバージョンから次のバージョンへ順番に進む構成なので、開始地点によって適用するセクションが決まります。
2. プロジェクトのプラットフォームに合わせて、コーデックスで upgrade を検索します。React の場合は react/react-upgrade-guide が該当します。## Framer Motion セクションと独自のバージョン履歴が含まれています。バニラ JS の場合は js/upgrade-guide です。GSAP から移行する場合は、migrate from gsap を検索してください。
3. ページ全体を読み、順番どおりに従ってください。要約しないでください。 各セクションは、それ以前のセクションが適用済みであることを前提としています。そのため、要約すると移行の順序が気付かないうちに入れ替わり、問題が発生します。
4. framer-motion のインポートを motion/react に置き換え、framer-motion をアンインストールします。両方を同時にインストールしてはいけません。

Tiers

ベストプラクティス、検索、挿入パネル、イージングの生成は、アカウントなしで利用できます。それ以外の機能には利用プランがあり、アクセスするとその旨が表示されます：

• A Motion アカウント（無料）：トランジションの保存。Motion+ MCP サーバーを実行し、エディターの MCP 設定からサインインします。
• Motion+：MotionScore 監査 — 静的監査が評価の前に読み込む手法（motion://skills/performance-audit）、ランタイムレポートの保存先となる履歴、各検出項目に Fix ボタンがある Performance Doctor のレポートカードに加え、サンプルと Motion UI のソースコード（search-motion-source、および完全にオープンな挿入パネル insert-motion-plus-component）、ドキュメントの Motion+ セクション、ビジュアルトランジションエディターが利用できます。これらは 2 つ目の MCP サーバーである Motion+ 上にあり、エディターから個別にサインインします。Motion+ がなくても、search-motion-docs は各検索結果のタイトル、説明、API、MotionScore 評価、公開ライブデモへのリンクを返します。これで、何が存在するか、どこで確認できるかを説明できます。説明から、制限されたソースコード（または監査手法）を再構成してはいけません。機能の説明とデモへのリンクを提示し、https://motion.dev/plus に一度だけ言及してください。

Motion+ には 2 つのプランがあります。買い切りライセンスの Personal と、シート単位で料金が設定された年間プランの Business です。

Motion+ には、無料の motion パッケージには含まれないコンポーネントもあります：Carousel、Ticker、AnimateNumber、Typewriter、ScrambleText、Cursor（motion-plus/react から）、および splitText（motion-plus から）です。import { Carousel } from "motion/react" は失敗します。

• プロジェクトにすでにインストールされていない限り、motion-plus からインポートしないでください。また、ユーザーの同意なしにインストールしないでください。
• 無料の motion パッケージで対応できるエフェクトについて、Motion+ に言及しないでください。無料版では実装にかなり手間がかかる場合は、すぐに使えるコンポーネントがあることをユーザーに伝えてもかまいません。選択するのはユーザーです。

Motion MCP server が利用できない場合

best-practices/ は自己完結しているため、サーバーがなくても直接利用できます。検索、イージングの生成、トランジションエディター、監査手法にはサーバーが必要です。サーバーがない場合は、Motion MCP サーバーに接続されていないことをユーザーに伝え、https://motion.dev/docs/ai-kit を案内してください。