Custom Cursor

Interactive cursor component with smooth animations and target morphing

custom-cursor-tw

With Image

No Image

Circle

Customize

Circle Size

40px

Dot Size

6px

Circle Border Width

2px

Circle Stiffness

150

Circle Damping

Dot Stiffness

300

Dot Damping

Target Padding

0px

Elastic StretchShow on Touch DevicesShow Custom Content

Props

Name	Type	Default	Description
`circleSize`	number	`40`	Size of the outer circle in pixels
`dotSize`	number	`6`	Size of the inner dot in pixels
`circleColor`	string	`"rgb(0, 0, 0)"`	Color of the outer circle (any valid CSS color)
`dotColor`	string	`"rgb(0, 0, 0)"`	Color of the inner dot (any valid CSS color)
`circleStiffness`	number	`150`	Spring stiffness for the outer circle (higher = faster)
`circleDamping`	number	`20`	Spring damping for the outer circle (higher = less bounce)
`dotStiffness`	number	`300`	Spring stiffness for the inner dot (higher = faster)
`dotDamping`	number	`30`	Spring damping for the inner dot (higher = less bounce)
`circleBorderWidth`	number	`2`	Border width of the outer circle in pixels
`className`	string	`""`	Additional class name for the container
`circleClassName`	string	`""`	Additional class name for the circle
`dotClassName`	string	`""`	Additional class name for the dot
`showOnTouch`	boolean	`false`	Whether to show the cursor on touch devices
`zIndex`	number	`9999`	Z-index of the cursor
`elastic`	boolean	`false`	Enable subtle elastic stretch in direction of movement
`imageClassName`	string	`""`	Additional class name for the image elements
`targetPadding`	number	`0`	Padding between cursor and target in pixels
`targets`	string[]	`[]`	CSS selectors for target elements to trigger effects on hover
`images`	(string \| undefined)[]	`[]`	Image URLs corresponding to each target (optional - targets without images will still morph the cursor)
`imageScale`	number	`0.9`	Scale amount for images when hovering targets (0-1)
`imageAnimationDuration`	number	`0.6`	Duration of image scale animation in seconds
`mixBlendMode`	string	`undefined`	Mix blend mode for the cursor elements
`children`	React.ReactNode	`undefined`	Custom content to render inside the cursor

circleSizenumber

Size of the outer circle in pixels

Default40

dotSizenumber

Size of the inner dot in pixels

Default6

circleColorstring

Color of the outer circle (any valid CSS color)

Default"rgb(0, 0, 0)"

dotColorstring

Color of the inner dot (any valid CSS color)

Default"rgb(0, 0, 0)"

circleStiffnessnumber

Spring stiffness for the outer circle (higher = faster)

Default150

circleDampingnumber

Spring damping for the outer circle (higher = less bounce)

Default20

dotStiffnessnumber

Spring stiffness for the inner dot (higher = faster)

Default300

dotDampingnumber

Spring damping for the inner dot (higher = less bounce)

Default30

circleBorderWidthnumber

Border width of the outer circle in pixels

Default2

classNamestring

Additional class name for the container

Default""

circleClassNamestring

Additional class name for the circle

Default""

dotClassNamestring

Additional class name for the dot

Default""

showOnTouchboolean

Whether to show the cursor on touch devices

Defaultfalse

zIndexnumber

Z-index of the cursor

Default9999

elasticboolean

Enable subtle elastic stretch in direction of movement

Defaultfalse

imageClassNamestring

Additional class name for the image elements

Default""

targetPaddingnumber

Padding between cursor and target in pixels

Default0

targetsstring[]

CSS selectors for target elements to trigger effects on hover

Default[]

images(string | undefined)[]

Image URLs corresponding to each target (optional - targets without images will still morph the cursor)

Default[]

imageScalenumber

Scale amount for images when hovering targets (0-1)

Default0.9

imageAnimationDurationnumber

Duration of image scale animation in seconds

Default0.6

mixBlendModestring

Mix blend mode for the cursor elements

Defaultundefined

childrenReact.ReactNode

Custom content to render inside the cursor

Defaultundefined