Live-preview motion React components

Motion UI is hard to judge from a GIF. On DesignLayer component pages, sections run as real React. Hover, scroll entrance, and looping backgrounds are visible before you add anything to the repo.

When you pick blocks for a Next.js landing or product surface, you can compare density and motion strength in the same view.

Filter the catalog by job: hero, features, pricing, FAQ, marquee. Open a card for the live canvas and Copy for Cursor.

Preview needs no account and no card. Decide the motion with the team, then spend the copy quota.

You can preview as often as you want. Free Copy for Cursor is once per day (Japan time) per component copy. Copying many blocks the same day uses Pro unlimited copy.

After you copy, follow the Copy for Cursor guide.