Gyroscope Cursor

An arrow cursor that turns toward where it moves

gyroscope-cursor-tw

Customize

Color

Outline

Size

24px

Outline Width

3.0px

Shadow

0.50

Turn

1.00

Turn Speed

1.00

Overshoot

0.40

Stretch

0.40

Settle

0.45s

Rest Angle

-45°

Label

Autoplay Speed

1.00

Idle Delay

1.50s

PressRippleHoverAutoplayInteractiveDisabled

Props

Name	Type	Default	Description
`color`	string	`"#5227FF"`	Fill of the arrowhead, its name tag and its click ripple. Any CSS colour, including currentColor.
`outlineColor`	string	`"#FFFFFF"`	The sticker outline around the arrowhead and the text colour of its name tag.
`size`	number	`24`	Length of the arrowhead from tip to wings, in pixels. The tip is the exact click point.
`outlineWidth`	number	`3`	Width of the outline in pixels. 0 removes it.
`shadow`	number	`0.5`	Strength of the soft drop shadow, from 0 to 1. It keeps the cursor legible on light pages.
`turn`	number	`1`	How far the arrowhead turns into its direction of travel, from 0 (a classic static pointer) to 1 (always faces where it is going).
`turnSpeed`	number	`1`	Stiffness of the gyroscopic spring that turns the arrowhead.
`overshoot`	number	`0.4`	How far the arrowhead swings past its heading before it settles, from 0 to 1.
`stretch`	number	`0.4`	Squash and stretch along the direction of travel at speed, from 0 to 1.
`settle`	number	`0.45`	Seconds the arrowhead keeps its heading after you slow down, before it swings back to its rest angle to aim.
`restAngle`	number	`-45`	Heading at rest in degrees, clockwise from pointing straight up. -45 is the classic up-left pointer.
`press`	boolean	`true`	Dip the arrowhead while a button is held.
`ripple`	boolean	`true`	Send a thin ring out from the tip on each click. Clicks stack. Reduced-motion users never see it.
`hover`	boolean	`true`	Grow slightly over links, buttons and other interactive elements.
`label`	string	`""`	Name tag that trails the cursor, such as "You" or "Agent". Empty hides it.
`autoplay`	boolean	`false`	Let the cursor roam on its own while the pointer is away, like an AI agent's cursor: it glides along curved paths to elements marked data-cursor-target (or any button and link), pauses and clicks them.
`autoplaySpeed`	number	`1`	Speed of that roaming.
`idleDelay`	number	`1.5`	Seconds after the pointer leaves before the roaming cursor takes over again.
`interactive`	boolean	`true`	Replace the native cursor inside this component. Turn it off to keep the visitor's own cursor and show only the roaming or scripted one.
`disabled`	boolean	`false`	Hides the custom cursor and gives the native one back.
`ref`	{ moveTo, click, wiggle }	`—`	Script the cursor: moveTo(x, y, duration?) glides to a point in pixels from the top-left corner and resolves on arrival, click() dips and ripples, wiggle() gives a small thinking shake.
`data-cursor-label`	attribute	`—`	Put it on any element inside to show that text in the name tag while the cursor is over it, such as "Open".
`data-cursor-target`	attribute	`—`	Marks the elements the roaming cursor visits. Without any, it visits buttons and links.
`data-cursor="native"`	attribute	`—`	Gives an area back to the native cursor. Text fields do this automatically so the caret stays exact.
`children`	ReactNode	`—`	The content the cursor works over. The native cursor is hidden only inside this component.
`className`	string	`—`	Classes for the root element. It fills its parent, with a 240px minimum height.
`style`	CSSProperties	`—`	Inline styles for the root element.

colorstring

Fill of the arrowhead, its name tag and its click ripple. Any CSS colour, including currentColor.

Default"#5227FF"

outlineColorstring

The sticker outline around the arrowhead and the text colour of its name tag.

Default"#FFFFFF"

sizenumber

Length of the arrowhead from tip to wings, in pixels. The tip is the exact click point.

Default24

outlineWidthnumber

Width of the outline in pixels. 0 removes it.

Default3

shadownumber

Strength of the soft drop shadow, from 0 to 1. It keeps the cursor legible on light pages.

Default0.5

turnnumber

How far the arrowhead turns into its direction of travel, from 0 (a classic static pointer) to 1 (always faces where it is going).

Default1

turnSpeednumber

Stiffness of the gyroscopic spring that turns the arrowhead.

Default1

overshootnumber

How far the arrowhead swings past its heading before it settles, from 0 to 1.

Default0.4

stretchnumber

Squash and stretch along the direction of travel at speed, from 0 to 1.

Default0.4

settlenumber

Seconds the arrowhead keeps its heading after you slow down, before it swings back to its rest angle to aim.

Default0.45

restAnglenumber

Heading at rest in degrees, clockwise from pointing straight up. -45 is the classic up-left pointer.

Default-45

pressboolean

Dip the arrowhead while a button is held.

Defaulttrue

rippleboolean

Send a thin ring out from the tip on each click. Clicks stack. Reduced-motion users never see it.

Defaulttrue

hoverboolean

Grow slightly over links, buttons and other interactive elements.

Defaulttrue

labelstring

Name tag that trails the cursor, such as "You" or "Agent". Empty hides it.

Default""

autoplayboolean

Let the cursor roam on its own while the pointer is away, like an AI agent's cursor: it glides along curved paths to elements marked data-cursor-target (or any button and link), pauses and clicks them.

Defaultfalse

autoplaySpeednumber

Speed of that roaming.

Default1

idleDelaynumber

Seconds after the pointer leaves before the roaming cursor takes over again.

Default1.5

interactiveboolean

Replace the native cursor inside this component. Turn it off to keep the visitor's own cursor and show only the roaming or scripted one.

Defaulttrue

disabledboolean

Hides the custom cursor and gives the native one back.

Defaultfalse

ref{ moveTo, click, wiggle }

Script the cursor: moveTo(x, y, duration?) glides to a point in pixels from the top-left corner and resolves on arrival, click() dips and ripples, wiggle() gives a small thinking shake.

Default—

data-cursor-labelattribute

Put it on any element inside to show that text in the name tag while the cursor is over it, such as "Open".

Default—

data-cursor-targetattribute

Marks the elements the roaming cursor visits. Without any, it visits buttons and links.

Default—

data-cursor="native"attribute

Gives an area back to the native cursor. Text fields do this automatically so the caret stays exact.

Default—

childrenReactNode

The content the cursor works over. The native cursor is hidden only inside this component.

Default—

classNamestring

Classes for the root element. It fills its parent, with a 240px minimum height.

Default—

styleCSSProperties

Inline styles for the root element.

Default—

Name

Type

Default

Description

color

string

"#5227FF"

Fill of the arrowhead, its name tag and its click ripple. Any CSS colour, including currentColor.

outlineColor

string

"#FFFFFF"

The sticker outline around the arrowhead and the text colour of its name tag.

size

number

24

Length of the arrowhead from tip to wings, in pixels. The tip is the exact click point.

outlineWidth

number

3

Width of the outline in pixels. 0 removes it.

shadow

number

0.5

Strength of the soft drop shadow, from 0 to 1. It keeps the cursor legible on light pages.

turn

number

1

How far the arrowhead turns into its direction of travel, from 0 (a classic static pointer) to 1 (always faces where it is going).

turnSpeed

number

1

Stiffness of the gyroscopic spring that turns the arrowhead.

overshoot

number

0.4

How far the arrowhead swings past its heading before it settles, from 0 to 1.

stretch

number

0.4

Squash and stretch along the direction of travel at speed, from 0 to 1.

settle

number

0.45

Seconds the arrowhead keeps its heading after you slow down, before it swings back to its rest angle to aim.

restAngle

number

-45

Heading at rest in degrees, clockwise from pointing straight up. -45 is the classic up-left pointer.

press

boolean

true

Dip the arrowhead while a button is held.

ripple

boolean

true

Send a thin ring out from the tip on each click. Clicks stack. Reduced-motion users never see it.

hover

boolean

true

Grow slightly over links, buttons and other interactive elements.

label

string

""

Name tag that trails the cursor, such as "You" or "Agent". Empty hides it.

autoplay

boolean

false

autoplaySpeed

number

1

Speed of that roaming.

idleDelay

number

1.5

Seconds after the pointer leaves before the roaming cursor takes over again.

interactive

boolean

true

Replace the native cursor inside this component. Turn it off to keep the visitor's own cursor and show only the roaming or scripted one.

disabled

boolean

false

Hides the custom cursor and gives the native one back.

ref

{ moveTo, click, wiggle }

—

Script the cursor: moveTo(x, y, duration?) glides to a point in pixels from the top-left corner and resolves on arrival, click() dips and ripples, wiggle() gives a small thinking shake.

data-cursor-label

attribute

—

Put it on any element inside to show that text in the name tag while the cursor is over it, such as "Open".

data-cursor-target

attribute

—

Marks the elements the roaming cursor visits. Without any, it visits buttons and links.

data-cursor="native"

attribute

—

Gives an area back to the native cursor. Text fields do this automatically so the caret stays exact.

children

ReactNode

—

The content the cursor works over. The native cursor is hidden only inside this component.

className

string

—

Classes for the root element. It fills its parent, with a 240px minimum height.

style

CSSProperties

—

Inline styles for the root element.