motionprompts

motionprompts MCP

本番品質の GSAP モーションコンポーネント 259 点のカタログ (motionprompts.dev)を提供する MCP サーバーです。厳選されたコンポーネントは、完全なプロンプトとともに無料で利用できます。それ以外のライブラリ項目は、Full Stack キー （motionprompts.dev/accountで取得するAuthorization: Bearer mpk_...）を渡すまで、12 行のプレビューを返します。 プランについては、motionprompts.dev/pricingをご覧ください。アニメーションを生成するものではありません。すでに解決済みでデバッグも完了しているものを提供し、互いに干渉させずに組み合わせる方法を伝え、カタログに依頼されたものがない場合は、はっきりとそう伝えます。

提供する機能

ツール	用途
plan_page	ページの情報アーキテクチャを提示します。各セクションの役割、目的、動きを付けるべきかどうかを含む 9～14 個のセクションを返します。意図的にコンポーネントは返しません。
suggest_mechanics	1 つのセクション向けのメカニクスを、その役割に関する実際のファセットで絞り込んで提示します。該当するものがない場合も回答できます。
suggest_page_treatments	suggest_mechanicsに対応する機能です。セクションの枠ではなく、ページ全体に適用するメカニクス（スムーススクロール、セクション間のシェイプ付き境界、動く背景など）を提示します。
get_integration_contract	コンポーネントの組み合わせに対する修正方法、マウント順、予算を提示します。2 つの導入ベールが共存するのを防ぎ、moving_sectionsを指定した場合は、ページのアニメーションが不足していることも率直に伝えます。
plan_imagery	セクションごとの画像の方向性を提示します。必要なショット、その対象モデル（人物、オブジェクト、風景はそれぞれ別物です）、透過画像の作成方法、実際のロゴの入手先を示します。テキストを返すだけで、生成は行いません。
get_component_prompt	作成者のプロンプトを原文のまま、モーションシステムのトークン、および自分で適応するための指示とともに返します。
search_components	lexical_coverageを使った自由文検索です。「該当するものがない」と判断するのには信頼できますが、「これが最適」と判断する用途には向きません。
search_components_motion	見た目ではなく、測定済みのモーションメタデータ（トリガー、クラスター、イージング、継続時間）で検索します。
get_component	メタデータ、プレビュー、プロンプト、および配布物に含まれる場合はソースを返します。
list_facets · list_components · list_motion_systems · get_motion_system	用語とトークンを提示します。
render_prompt	非推奨です。get_component_promptを使用してください。

ホスト型エンドポイント — インストール不要

サーバーはhttps://motionprompts.dev/mcpでライブ実行されています（Streamable HTTP、ステートレス。Bearer キーは任意で、有料プロンプトを利用する場合に必要です）。 コマンドを 1 つ実行するだけで Claude Code に追加できます。

claude mcp add --transport http motionprompts https://motionprompts.dev/mcp

検出マニフェスト：motionprompts.dev/.well-known/mcp。

ローカルインストール

Node 20 以降が必要です。無料セットの利用に API キーや環境変数は不要です。ローカルパッケージに含まれるのは、無料プロンプトの完全版（有料プロンプトはプレビューのみ）です。ライブラリ全体を利用するには、キーを使ってホスト型エンドポイントを使用してください。

パッケージは npm で motionprompts-mcp として公開されています。 クローンは不要です。

claude mcp add motionprompts -- npx -y motionprompts-mcp

または、クローンからインストールします。

git clone https://github.com/VanguardiaAI/motionprompts-mcp.git
cd motionprompts-mcp
npm install

Claude Code

claude mcp add motionprompts -- node /absolute/path/to/motionprompts-mcp/mcp/server.mjs

Claude Desktop およびその他のクライアント

クライアントの JSON 設定に追加します。

{
  "mcpServers": {
    "motionprompts": {
      "command": "node",
      "args": ["/absolute/path/to/motionprompts-mcp/mcp/server.mjs"]
    }
  }
}

動作を確認します。

npm run verify      # end-to-end battery over the real MCP protocol

stdio の代わりに HTTP エンドポイントをセルフホストするには、npm run start:httpを実行します（デフォルトは127.0.0.1:4478です。MCP_HTTP_HOST / MCP_HTTP_PORTで設定できます）。

API キーについて：不要です

このサーバーはキーを使わず、誰かの費用を発生させることもありません。 環境変数を読み取らず、秘密情報を求めず、ネットワーク呼び出しは一切行いません。ディスク上のファイルを開いて、テキストを返します。これはカタログリーダーです。

これには、画像モデルや透明な背景について説明する plan_imagery も含まれます。返すのはテキストです。これはレシピであり、生成ツールではありません。私たち自身が使っている3つのモデルの名前を挙げているのは、どのモデルを何に使うかという情報が役立つからです。しかし、どのモデルも呼び出しません。また、書き方や切り抜きのルールは、どのプロバイダーを選んでも同じです。

kie.ai に関する注意書きをお探しの場合、そのキーは別の制作ツールに属するものです。サンプルページ用の写真を生成したツールですが、このパッケージには含まれていません。意図的に除外しているため、ここにあるものでは画像を生成したり、費用を発生させたりできません。ページに写真が必要な場合は、ご自身のアカウントでお好みのサービスをご利用ください。

上手な使い方

順序が重要で、ここが最も難しいところです。

1. まず plan_page を使います。 返すのはコンポーネントではなくセクションです。ページの豊かさは、組み合わせるセクションのリストで決まります。アニメーションの仕組みから直接組み立てると、5つのセクションに平坦化されます。先に、実際の依頼内容に合わせてリストを調整してください。

2. 各セクションで suggest_mechanics を使い、avoid で使用済みのものを除外します。 そうしないと、コンポーネントが重複します。広い役割では100を超える候補が同点で並ぶことがあり、同じ need 文字列を再利用すると、常に同じ候補が最初に返されます。

   avoid は、同じものを繰り返さないためのものであり、アニメーションを減らすためのものではありません。 1位の候補が使用済みなら、2位を選びましょう。同点です。最初の候補がすでに使われていたためにセクションを静止させたままにするのは、このフローで最も大きな失敗です。しかも、サンプルスクリプトには文字どおり if と書かれていました。

3. すべてのスラッグをまとめて指定し、コードを1行でも書く前に get_integration_contract を呼び出します。 moving_sections も設定してください。これはカバレッジ監査です。

4. 各コンポーネントで get_component_prompt を使います。 再実装するのではなく、装いを変えます。画像、コピー、配色、タイポグラフィ、要素数を変更し、仕組みは維持します。コンポーネントを除外するのは、その MECHANIC が合わない場合だけです。美的な好みを理由に除外してはいけません。

5. 画像プロンプトを1つでも書く前に、同じセクションリストで plan_imagery を使います。

5つの役割（faq、data、pricing、testimonial、reference）は、カタログの不足項目として明示されています。259個のコンポーネントの中に、これらに対応するものはありません。しかし、「コンポーネントがない」ことは、「そのセクションを静止させたままにする」という意味ではありません。13セクションのページのうち、これらは3〜5セクションを占めます。suggest_mechanics はそれぞれに対し、トークンの語彙で記述したレシピ（hand_written_recipe）を返します。それ以外はすべて、そのまま採用してください。

足りないより、多めにする

plan_page は計算済みの motion_coverage ブロックを返します。動かすべきセクションの数や、採用とレシピでカバーされるセクションがわかります。1つでも何もない状態になるのは、スタイル上の判断ではなく、ページの不備です。よくある間違いは、動かしすぎることではありません。目立つセクションに4つの仕組みを分散させ、残りを何もないままにすることです。ページを雑然とさせないのは、動きの少なさではありません。すべてを同じ言語で動かすことです。そして、そのためのモーションシステムはすでに用意されています。

生成されたページだと見抜かれる最後の要因は画像です

アーキテクチャと動きの問題を解決した後も、違和感が残るのは画像です。plan_imagery は、測定された3つの欠点とその解決策を組み込んでいます。

• 画像がセクションではなく、業界に結びついています。 競合テストを行ってください。プロンプトを変更せずに競合他社のページにも使えるなら、それは汎用的です。このページにしか当てはまらない事実を含める必要があります。
• 人が登場しません。 人物の画像にはnano-banana-2だけを使います。他の2つは人物に特徴的な色味を加えてしまうか、顔をうまく生成できないためです。
• すべてが背景付きの長方形です。 切り抜き画像には、background: transparentを指定してgpt-image-2.5を使います。これにより実際のアルファチャンネルが返されます（マゼンタのクロマキーは古いraw画像用のフォールバックとしてのみ残しています）。また、6枚のシート単位で生成します。これは見えない3×2のグリッドで、1枚でも6枚でも生成コストは変わらないためです。細部が1つでもうまくいかなかった画像は再生成せず、元のraw画像から画像間変換で修正します。

また、ロゴは生成しません。Wikimedia（Wikidata → P154 → Commons）で検索します。どのモデルも文字を崩さずに実在のロゴタイプを描くことはできず、架空のブランドが並ぶマーキーはすぐに偽物だとわかるためです。

このサーバーで構築されたページ

ソースリポジトリには、このサーバーで構築された5つの完成済みページが含まれています。それぞれのREADMEには、どの仕組みを採用し、どの仕組みを作り替え、どの仕組みを採用しなかったのか、その理由とともに記載されています。カタログ内のすべてのコンポーネントには、 motionprompts.devでライブデモとビルドのメモが用意されています。

この配布物に含まれないもの

コンポーネントのソースコードです。 プロンプト、メタデータ、構成ルールエンジン、サーバーは入手できますが、各コンポーネントのindex.html / script.js / styles.cssは含まれません。

これは不足ではありません。本来このように使うものです。プロンプトこそが製品です。他人のコンポーネントを貼り付けるのではなく、仕組みをゼロから再構築し、ページに合わせて調整するための、それだけで完結した指示書です。サンプルページもまさにこの方法で構築されており、コードをコピーせずに仕組みを採用して作り替えています。

include: ['source']を指定したget_componentは、この点を明示的に伝え、代わりにライブデモとプロンプトのURLを返します。それ以外のsearch_components、plan_page、suggest_mechanics、get_integration_contract、get_component_promptは、同じように機能します。

ライセンス

PolyForm Noncommercial 1.0.0（帰属表示必須）です。非商用利用は許可されていますが、商用利用には別途ライセンスが必要です。許可されるすべての利用において、通知を残し、motionprompts.devを目に見える形でクレジット表示する必要があります。詳しくはLICENSEをご覧ください。

OSI承認ライセンスではないため、npmやGitHubでは標準外として警告されます。重要な用途でこのライセンスに依拠する場合は、弁護士に確認してもらってください。私は弁護士ではありません。