ライブプレビューでモーションを確認する

最終更新日: 2026年8月25日

React モーションコンポーネントをブラウザでライブ確認する方法。Cursor にコピーする前にホバーと入場アニメーションを実物で見る。ログイン不要。

なぜライブプレビューか

モーション UI は GIF やスクリーンショットだとタイミングが分かりません。DesignLayer のコンポーネントページでは、セクションが実際の React として動きます。ホバー、スクロール入場、ループする背景まで、組み込む前にブラウザで確認できます。

Next.js のランディングやプロダクト画面に載せるブロックを選ぶとき、情報量と動きの強さを同じ画面で比較できます。

コンポーネント一覧からヒーロー、機能紹介、料金、FAQ、マーキーなど用途で絞ります。カードを開くとライブキャンバスと、Copy for Cursor が並びます。

プレビューの閲覧にアカウントもカードも不要です。チームで「この動きでいこう」と決めてからコピーする使い方が向いています。

プレビューは何度でも見られます。Copy for Cursor の無料枠は日本時間で 1 日 1 回です。同じ日に別ブロックを何度も取る場合は Pro の無制限コピーを使います。

コピー後の手順は「Copy for Cursor の使い方」を参照してください。