Cursor に貼るだけで動く React モーションコンポーネントの探し方｜コピペで LP を組む実践ガイド

Next.js と Tailwind でランディングページを組むとき、静的なレイアウトは shadcn/ui などで短時間に揃えられます。しかし、入場アニメーション、スクロール連動、ホバーの質感といった「動き」は、自分で Framer Motion を書き起こすと半日から数日かかるのが実情です。

かといって 21st.dev などのレジストリで探すと、今度は当たり外れの確認に時間を取られます。スクリーンショットや GIF ではイージングやタイミングが分からず、組み込んでから「思った動きと違う」と手戻りするパターンが後を絶ちません。

この記事では、モーション付き React コンポーネントを「ライブで見て、コピーして、AI エージェントに貼る」ワークフローを、DesignLayer を例に実践手順として解説します。

基準1：ライブプレビューで動きを確認できるか。モーション UI は静止画では評価できません。ブラウザ上で実際の React として動き、ホバーやスクロール入場のタイミングを組み込む前に確認できることが最低条件です。

基準2：TSX + Tailwind でそのまま貼れるか。独自の CSS 記法やランタイムに依存するコードは、既存の Next.js プロジェクトへの移植コストが高くなります。React（TypeScript）と Tailwind 前提で出力されるものを選びましょう。

基準3：エージェント向けの指示が同梱されているか。Cursor や Claude に渡す場合、コード単体よりも「配置先・依存パッケージ・差し替えポイント」が構造化された包みがある方が、エージェントの誤実装を防げます。

DesignLayer はこの3点を満たすカタログとして設計されています。セクションは人間が組んだ完成品で、ライブプレビューと「Copy for Cursor」（統合指示 + TSX + デモノート + npm 依存のセット）が対になっています。

ステップ1：コンポーネント一覧を開き、ヒーロー・機能紹介・料金・FAQ など用途で絞ります。検索やカテゴリで目的のセクションを見つけてください。

ステップ2：カードを開いてライブプレビューを確認します。ホバー、入場、ループ背景まで実物で動くため、チームで「この動きでいこう」と合意してから次に進めます。閲覧にアカウントもカードも不要です。

ステップ3：Copy for Cursor を実行します。無料枠は日本時間で1日1回です。コピーされる内容は、エージェントが読みやすい統合指示と本体 TSX、必要な npm 依存の一覧です。

ステップ4：Cursor の Composer / Agent、または Claude のチャットに貼り、配置先とブランド差し替えを指示します。ファイルをリポジトリに書くのはエージェントの仕事なので、あなたは動きと文言の確認に集中できます。

貼り付け後の指示は、次の型を使うと安定します。「この React セクションを既存の Next.js アプリに追加する。Tailwind のクラスはそのまま。足りない npm 依存を package.json に入れて。見出し・CTA・リンクをプロダクト名に差し替える。配置は app/(marketing)/page.tsx。」

配置パス（app/(marketing)/page.tsx や components/sections/ など）を明示すると、エージェントが置き場所を迷わず、レビューでの差分も読みやすくなります。

ブランドの色や余白のトークンが既存リポジトリにある場合は、「既存のデザイントークンに合わせて」と一文添えるだけで、カタログの見た目から自社ブランドへの寄せが一発で通りやすくなります。

無料プランでは、コンポーネントのライブプレビューが無制限、ソースのコピーが日本時間で1日1回です。「今日はヒーローだけ取る」と決めて使えば、カードなしでカタログの実力を試せます。

Pro（月額2,980円・税込）ではコンポーネントのコピーが無制限になり、さらに完成1ページの Templates をコピーできます。Templates はヒーローから FAQ まで構成・余白・モーションのリズムまで揃った1ページで、「この構成でうちのコピーに差し替えて」とページ単位でエージェントに渡せます。

セクションを1つずつ集めるか、完成ページから始めるかは、LP の期限と構成の固まり具合で選んでください。迷ったら、まず無料枠で1セクション組み込んでみるのが最短の判断材料になります。

Cursor を日常的に使っている場合は、DesignLayer の MCP サーバーを Cursor に追加すると、ブラウザを開かずにカタログ検索とソース取得ができます。

エージェントからは search_catalog（公開カタログの検索）、get_component（コピーバンドルの取得）、get_template（完成1ページ・Pro のみ）の3ツールが呼べます。コピー枠のルールはサイトと同じで、無料は1日1回、Pro は無制限です。

セットアップは、アカウント設定で API キーを発行し、Cursor の MCP 設定に DESIGNLAYER_API_KEY として登録するだけです。詳しい手順はドキュメントの「DesignLayer MCP を Cursor に接続する」を参照してください。

失敗1：依存パッケージ不足。framer-motion や lucide-react が入っていないとビルドエラーになります。コピー内の import をエージェントに読ませ、package.json の更新を依頼してください。

失敗2：ブランドトークンの不整合。カタログの色・余白が自社プロダクトとズレたまま出すと、ページ内で浮きます。貼り付け指示に「既存トークンに合わせて」を入れるか、貼った後に色とフォントだけ差し替えさせましょう。

失敗3：モーションの入れすぎ。全セクションに強い動きを付けると、ページ全体のテンポが崩れて読みにくくなります。動きはヒーローと CTA 周辺に絞り、イージングや delay はプレビューで確認した値を起点に調整してください。

モーション付きの LP 実装は、「探す → ライブで見る → コピー → エージェントに貼る」の流れに変えるだけで、半日単位の作業が十分単位に圧縮できます。

DesignLayer のコンポーネントカタログは閲覧無料・カード不要です。まず今日の無料枠で1セクションを Cursor に貼ってみてください。動きの品質と組み込みやすさは、実際にリポジトリへ載せてみるのが一番早く確かめられます。

完成1ページをまるごと渡したい場合は Templates を開いてください。プレビューは公開中で、コピーは Pro です。