User Cursor

A cursor with a name tag, like a live collaborator

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

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.