All components
Available nowReact

Smooth cursor

A spring-led pointer treatment with native accessibility fallbacks.

shadcnRegistry install command
npx shadcn add http://localhost:3000/r/menace-smooth-cursor.json

Preview

Live component behavior

Interactive
Preview size
desktop

Move your pointer.

The cursor follows with spring motion and rotates toward its path.

Use it in context.

Copy the component into your project, then adapt the source to the interface around it.

TSXUsage example
import { SmoothCursor } from "@/components/menace/smooth-cursor";

export default function Page() {
  return <SmoothCursor />;
}

API and behavior

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.