Custom Cursor

import { CustomCursor } from "@/components/ui/custom-cursor"

export function CustomCursorDemo() {
  return (
    <>
      <span className="hidden md:block">Move your mouse around</span>
      <span className="block md:hidden">Tap anywhere to see the cursor</span>
      <CustomCursor />
    </>
  )
}

Installation

pnpmnpmyarnbun
pnpm dlx shadcn@latest add https://ebonui.com/r/custom-cursor.json
Copy

Usage

Copyimport { customCursor } from "@/components/ui/custom-cursor"

Copy<customCursor />

Hiding Default Browser Cursor

To prevent the default browser cursor from overlapping with the custom cursor, add the following CSS globally:

Copy* {
  cursor: none !important;
}

Optional: Keep text cursor for inputs

Copyinput,
textarea,
select {
  cursor: text !important;
}

💡 If you're using Tailwind CSS, you can add cursor-none to your layout wrapper:

Copy<div className="cursor-none">
  <customCursor />
  {/* your app */}
</div>

Props

SpringConfig Type

Copyinterface SpringConfig {
  damping: number // Controls how quickly the animation settles
  stiffness: number // Controls the spring stiffness
  mass: number // Controls the virtual mass of the animated object
  restDelta: number // Controls the threshold at which animation is considered complete
}

Default Spring Configuration

Copyconst defaultSpringConfig = {
  damping: 45,
  stiffness: 400,
  mass: 1,
  restDelta: 0.001,
}

Browser Support

Compatible with all modern browsers that support:

• requestAnimationFrame
• CSS transforms
• Pointer events

Accessibility

When using this component, consider that:

• Users navigating via keyboard will not see the custom cursor
• You may want to provide alternative visual cues for interactive elements
• Some users may have motion sensitivity, so consider providing a way to disable the animation

Credits

• Credit to @Code_Parth for the original concept and implementation