Smooth Cursor

A smooth custom cursor that follows mouse movement with physics-based spring animations. Rotates based on movement direction.

Preview

Smooth Cursor

Enable to see the effect

Installation

Use the CLI to add this component to your project.

npx shadcn@latest add https://ui.nyxhora.com/r/smooth-cursor.json

Usage

tsx
10 lines
1
2
3
4
5
6
7
8
9
10
import { SmoothCursor } from "@/components/ui/smooth-cursor"

export default function App() {
  return (
    <div>
      <SmoothCursor />
      {/* Your app content */}
    </div>
  )
}

Customization

Custom Cursor Element

You can pass a custom JSX element as the cursor prop to replace the default arrow.

Custom Spring Config

Adjust the spring physics for different feel - try higher stiffness for snappier movement.

Props

PropTypeDefaultDescription
cursorJSX.Element<DefaultCursorSVG />Custom cursor element to display instead of the default arrow cursor
springConfigobject{ damping: 45, stiffness: 400, mass: 1, restDelta: 0.001 }Spring physics configuration for the cursor movement animation

Usage Notes

Note: The SmoothCursor component hides the native cursor globally. Add it once at the root of your application for the best experience. The cursor automatically cleans up on unmount.