Smooth Cursor

PreviewCode

Move your mouse aroundSmoothCursor is disabled on touch devices

@/demos/SmoothCursorDemo.tsx

import { SmoothCursor } from '@/registry/magicui/smooth-cursor'

export function SmoothCursorDemo() {
  return (
    <>
      <span class="
        hidden
        md:block
      "
      >
        Move your mouse around
      </span>
      <span class="
        block
        md:hidden
      "
      >
        SmoothCursor is disabled on touch devices
      </span>
      <SmoothCursor />
    </>
  )
}

Features

• Smooth physics-based cursor animations
• Rotation effects based on movement direction
• Performance optimized with requestAnimationFrame
• Fully customizable cursor design
• Touch devices ignored automatically

Installation

pnpm

pnpm dlx shadcn@latest add @magicui-solid/smooth-cursor

bun

bunx shadcn@latest add @magicui-solid/smooth-cursor

yarn

yarn dlx shadcn@latest add @magicui-solid/smooth-cursor

npm

npx shadcn@latest add @magicui-solid/smooth-cursor

Usage

import { SmoothCursor } from '@/components/magicui/smooth-cursor'

<SmoothCursor />

Hiding Default Browser Cursor

The component hides the browser cursor on desktop pointers while enabled. To prevent the default browser cursor from overlapping with the custom cursor, add the following CSS globally:

* {
  cursor: none !important;
}

Optional: Keep text cursor for inputs

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

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

<div class="cursor-none">
  <SmoothCursor />
  {/* your app */}
</div>

Props

Prop	Type	Default	Description
cursor	JSX.Element	<DefaultCursorSVG />	Custom cursor to replace the default cursor
springConfig	SpringConfig	See below	Configuration object for the spring animation behavior

SpringConfig Type

interface 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

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

Browser Support

Compatible with all modern browsers that support:

• requestAnimationFrame
• CSS transforms
• Pointer events
• Hover-capable fine pointers (mouse or trackpad)

Touch-first devices are ignored automatically to prevent the custom cursor from appearing after taps.

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

Original:

magicui.design/docs/components/smooth-cursor