Custom Cursor

Interactive cursor component with smooth animations and target morphing

custom-cursor-tw

With Image

No Image

Circle

Customize

Tweak the props live

Size & Appearance

Circle Size40px

Dot Size6px

Circle Border Width2px

Mix Blend Mode

Physics

Circle Stiffness150

Circle Damping20

Dot Stiffness300

Dot Damping30

Behavior & Options

Target Padding0px

Elastic Stretch

Show on Touch Devices

Show 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

Default:40

dotSizenumber

Size of the inner dot in pixels

Default:6

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)

Default:150

circleDampingnumber

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

Default:20

dotStiffnessnumber

Spring stiffness for the inner dot (higher = faster)

Default:300

dotDampingnumber

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

Default:30

circleBorderWidthnumber

Border width of the outer circle in pixels

Default:2

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

Default:false

zIndexnumber

Z-index of the cursor

Default:9999

elasticboolean

Enable subtle elastic stretch in direction of movement

Default:false

imageClassNamestring

Additional class name for the image elements

Default:""

targetPaddingnumber

Padding between cursor and target in pixels

Default:0

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)

Default:0.9

imageAnimationDurationnumber

Duration of image scale animation in seconds

Default:0.6

mixBlendModestring

Mix blend mode for the cursor elements

Default:undefined

childrenReact.ReactNode

Custom content to render inside the cursor

Default:undefined