smooth-cursor

Pro

A customizable, physics-based smooth cursor animation component with spring animations and rotation effects

Customize

This item has no props to tune. Use the lens above to change theme, density, direction and more.


pnpm dlx shadcn@latest add @tealmac-pro/smooth-cursor

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

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

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

Compatible with all modern browsers that support:

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

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

Guide and examples


pnpm dlx shadcn@latest add @tealmac-pro/smooth-cursor

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

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

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

Compatible with all modern browsers that support:

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

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