User Cursor

A custom cursor with a little name tag that follows along

user-cursor-tw

Move your cursor here

Hello, Sophie

Customize

Tweak the props live

Identity

Trigger

Show Label

Hide Native Cursor

Direction-aware Tilt

Shape

Size28

Tilt-14

Press Scale0.92

Label Tilt Strength8

Cursor Spring

Stiffness380

Damping32

Mass0.6

Label Spring

Stiffness220

Damping26

Mass0.7

Color

Accent

#F39C2A

Label Text

#FFFFFF

Label

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).

Default:28

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.

Default:false

labelTiltStrengthnumber

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

Default:8

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

When the custom cursor becomes visible.

Default:"hover"

showLabelboolean

Toggle the label pill on or off.

Default:true

hideNativeCursorboolean

Hide the OS cursor inside the surface.

Default:true

fullScreenboolean

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

Default:false

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.

Default:0.92

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

Granular class overrides for each internal layer.

Default:—

hideOnTouchboolean

Skip rendering on coarse-pointer (touch) devices.

Default:true

zIndexnumber

z-index applied to the cursor layer.

Default:50