Custom Cursor

A ring and dot cursor that morphs around hovered items

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

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