User Cursor

A custom cursor with a little name tag that follows along

user-cursor-tw

Move your cursor here

Hello, Sophie

Customize

Show LabelHide Native CursorDirection-aware Tilt

Size

Tilt

-14

Press Scale

0.92

Label Tilt Strength

8.0

Stiffness

380

Damping

Mass

0.60

Stiffness

220

Damping

Mass

0.70

Accent

Label Text

Name

Props

Name	Type	Default	Description
`name`	string	`"Sophie"`	Text rendered inside the label pill.
`arrow`	ReactNode \| (color: string) => ReactNode	`-`	Replace the default arrow glyph with custom JSX.
`label`	ReactNode	`-`	Replace the default label pill entirely.
`color`	string	`"#F39C2A"`	Solid fill color used by the arrow and label.
`textColor`	string	`"#ffffff"`	Text color used inside the label pill.
`size`	number	`28`	Arrow size in px (square bounding box).
`tilt`	number	`-14`	Visual rotation of the arrow in degrees. Acts as the resting angle when direction-aware tilt is on.
`directionAwareTilt`	boolean	`false`	Smoothly rotate the arrow + label to point in the direction of pointer movement.
`labelTiltStrength`	number	`8`	Maximum rotation applied to the label pill while moving (degrees).
`trigger`	"always" \| "hover" \| "press"	`"hover"`	When the custom cursor becomes visible.
`showLabel`	boolean	`true`	Toggle the label pill on or off.
`hideNativeCursor`	boolean	`true`	Hide the OS cursor inside the surface.
`fullScreen`	boolean	`false`	Render the cursor in a fixed full-viewport layer so it follows everywhere.
`spring`	SpringOptions	`{ stiffness: 380, damping: 32, mass: 0.6 }`	Spring config for the arrow follower.
`labelSpring`	SpringOptions	`{ stiffness: 220, damping: 26, mass: 0.7 }`	Spring config for the label pill (defaults to laggier).
`offset`	{ x?: number; y?: number }	`{ x: 0, y: 0 }`	Pixel offset from the pointer to the arrow tip.
`labelOffset`	{ x?: number; y?: number }	`{ x: size * 0.9, y: size * 0.2 + 6 }`	Pixel offset from the arrow tip to the label pill.
`pressScale`	number	`0.92`	Scale applied while the pointer is pressed.
`classNames`	{ root?, cursor?, arrow?, label?, labelText? }	`-`	Granular class overrides for each internal layer.
`hideOnTouch`	boolean	`true`	Skip rendering on coarse-pointer (touch) devices.
`zIndex`	number	`50`	z-index applied to the cursor layer.

namestring

Text rendered inside the label pill.

Default"Sophie"

arrowReactNode | (color: string) => ReactNode

Replace the default arrow glyph with custom JSX.

Default-

labelReactNode

Replace the default label pill entirely.

Default-

colorstring

Solid fill color used by the arrow and label.

Default"#F39C2A"

textColorstring

Text color used inside the label pill.

Default"#ffffff"

sizenumber

Arrow size in px (square bounding box).

Default28

tiltnumber

Visual rotation of the arrow in degrees. Acts as the resting angle when direction-aware tilt is on.

Default-14

directionAwareTiltboolean

Smoothly rotate the arrow + label to point in the direction of pointer movement.

Defaultfalse

labelTiltStrengthnumber

Maximum rotation applied to the label pill while moving (degrees).

Default8

trigger"always" | "hover" | "press"

When the custom cursor becomes visible.

Default"hover"

showLabelboolean

Toggle the label pill on or off.

Defaulttrue

hideNativeCursorboolean

Hide the OS cursor inside the surface.

Defaulttrue

fullScreenboolean

Render the cursor in a fixed full-viewport layer so it follows everywhere.

Defaultfalse

springSpringOptions

Spring config for the arrow follower.

Default{ stiffness: 380, damping: 32, mass: 0.6 }

labelSpringSpringOptions

Spring config for the label pill (defaults to laggier).

Default{ stiffness: 220, damping: 26, mass: 0.7 }

offset{ x?: number; y?: number }

Pixel offset from the pointer to the arrow tip.

Default{ x: 0, y: 0 }

labelOffset{ x?: number; y?: number }

Pixel offset from the arrow tip to the label pill.

Default{ x: size * 0.9, y: size * 0.2 + 6 }

pressScalenumber

Scale applied while the pointer is pressed.

Default0.92

classNames{ root?, cursor?, arrow?, label?, labelText? }

Granular class overrides for each internal layer.

Default-

hideOnTouchboolean

Skip rendering on coarse-pointer (touch) devices.

Defaulttrue

zIndexnumber

z-index applied to the cursor layer.

Default50