InteractionFree component
Smooth cursor
A smooth, spring-following cursor for pointer devices, with support for custom shapes. Touch and reduced-motion users keep the native experience.
Preview
Open previewInstallation
Add smooth cursor to your project, then make it your own.
shadcnRun in your terminal
npx shadcn add https://menaceui.com/r/menace-smooth-cursor.jsonUsage
TSXUsage example
import { SmoothCursor } from "@/components/menace/smooth-cursor";
export default function Page() {
return <SmoothCursor />;
}Props
Key options and their defaults.
boundarydocument.body- Optional element that limits pointer tracking and native-cursor hiding.
cursorArrow SVG- Custom React content rendered as the visual cursor.
springConfig{ damping: 45, stiffness: 400, mass: 1, restDelta: 0.001 }- Motion spring values used for position, rotation, and scale.
- Runs only when the browser reports a fine pointer with hover support.
- Keeps the native cursor when reduced motion is requested.
- Custom cursor content is decorative and does not intercept pointer input.