vibecodng.com

Free MCP betaIndex and tools live

Measured entry

magicui-smooth-cursor

cursor-effectspatialmotion on file

A client-only React cursor replacement distributed through Magic UI's shadcn registry. It listens globally for fine-pointer movement, hides the native body cursor, and animates a supplied React node with spring-driven position, rotation, and scale. The registry declares framer-motion, while the source imports Motion through motion/react.

Specimen
Motion capture of the mounted demo, recorded by the harness. No audio track.
Harness screenshot of magicui-smooth-cursor at 375 pixels wide
Harness screenshot at 375 pixels wide. This viewport scrolled sideways.
Harness screenshot of magicui-smooth-cursor at 768 pixels wide
Harness screenshot at 768 pixels wide. No horizontal overflow recorded.
Harness screenshot of magicui-smooth-cursor at 1440 pixels wide
Harness screenshot at 1440 pixels wide. No horizontal overflow recorded.

Measured

Every value below was written by the harness on the run that produced the frames above. None of it is derived from the prose.

Harness measurements recorded for magicui-smooth-cursor
BuildOK
MountOK
Console errors0
Uncaught page errors0
Horizontal overflowflagged at 375
Axe critical0
Axe serious0
Axe moderate0
Axe minor0
Gzip marginal63.5 KB (129.0 KB build, 65.5 KB baseline)
Bare modeFAIL
Provider requiredNO
Demo usedwritten from the component source API

What the harness recorded

BARE BUILD

✗ Build failed in 632ms
error during build:
[vite]: Rollup failed to resolve import "motion/react" from "<sandbox>re-c354784d2e79/src/cut/smooth-cursor.tsx".

Verdict

It builds and mounts cleanly in the prepared harness, but the bare install cannot resolve motion/react even though the registry declares framer-motion. Treat it as needing a shadcn-style setup, or correct the Motion dependency yourself. Best for ornamental desktop pages, not core interaction.

Use it if

  • You are building a desktop-led portfolio, launch page, or branded experience where a custom cursor is part of the visual direction.
  • Your app already uses Motion and can justify loading it for a site-wide cursor effect.
  • You want to provide your own React cursor graphic while retaining the included spring movement, rotation, and scale behavior.

Skip it if

  • Touch and coarse-pointer visitors need an equivalent effect, since the component disables itself for them.
  • You do not want a component to hide and replace the body cursor globally.
  • You would be adding Motion only for this ornament and want to keep the dependency footprint lean.
  • You need reduced-motion preferences handled without adding your own guard.

Install

Installation record for magicui-smooth-cursor
Declared dependenciesframer-motion
Missing on installnone
Bare installfails once the shadcn-style helpers are removed, so it needs that setup
Providerno provider required in the harness

In a non-shadcn project, copy the client component and install the Motion package that provides motion/react rather than relying only on the registry's declared dependency. Ensure the host supports client components, then add your custom cursor node if needed. Consider preserving the prior body cursor style and adding a reduced-motion guard.

Source and credit

This page is a review, not a copy. The component source lives with its author and this site does not republish it. Read the license before you use anything.

Author repository

github.com/magicuidesign/magicui
License
MIT
Record published
2026-08-17

Alternatives

Other published entries for the cursor-effect pattern, ordered by what they measured: mounts first, then clean axe scans, then bare-mode passes, then the smaller bundle.