Label Orbit

A label that becomes the cursor and trails a 3D stack

label-orbit-tw

Customize

Phrases

Fill

Text

Accent

Font Size

15px

Font Weight

500

Radius

6px

Trail

0.40s

Depth

0.80

Taper

0.40

Tilt

1.00

0.06s

Interval

2.4s

Autoplay Speed

1.00

Idle Delay

1.50s

HandlesClick To CycleHide CursorAutoplayInteractive

Props

Name	Type	Default	Description
`phrases`	string[]	`["Explore", "Create", "Ship"]`	Words the label flips through. Each change rolls the old word out and the new one in while the label resizes.
`interval`	number	`2.4`	Seconds each phrase holds before the next one rolls in.
`color`	string	`"#FAFAFA"`	Fill of the label and of the stack it leaves behind.
`textColor`	string	`"#0A0A0A"`	Colour of the label text.
`accentColor`	string	`"#5227FF"`	Border and corner handles of the label, like a selected layer in a design tool.
`fontSize`	number	`15`	Text size in pixels. The label's padding, height and handles scale with it.
`fontWeight`	number	`500`	Weight of the label text.
`fontFamily`	string	`"inherit"`	Font of the label. inherit uses the font of the surrounding page.
`radius`	number	`6`	Corner radius of the label in pixels.
`handles`	boolean	`true`	Show the square handles on the label's corners.
`trail`	number	`0.4`	Seconds of motion the stack of labels trails behind. 0 turns the trail off.
`depth`	number	`0.8`	How strongly the stack shades into the page as it recedes, from 0 to 1.
`taper`	number	`0.4`	How much the stack narrows toward its tail, from 0 to 1.
`tilt`	number	`1`	How far the label leans into fast horizontal moves, from 0 to 2.
`follow`	number	`0.06`	Seconds the label takes to catch up with the pointer.
`clickToCycle`	boolean	`true`	Clicking flips straight to the next phrase.
`hideCursor`	boolean	`true`	Hide the native cursor inside this component, so the label becomes the cursor. Text fields keep their caret.
`autoplay`	boolean	`false`	Let the label wander on its own while the pointer is away.
`autoplaySpeed`	number	`1`	Speed of that wandering.
`idleDelay`	number	`1.5`	Seconds after the pointer leaves before the wandering label takes over again.
`interactive`	boolean	`true`	Let the pointer drive the label. Reduced-motion users get the label without the trail, tilt or wandering.
`ref`	{ next, say }	`—`	next() flips to the next phrase. say(text) holds a specific label until you call say(null).
`data-cursor-label`	attribute	`—`	Put it on any element inside to show that text while the pointer is over it, such as "View" on a project card.
`children`	ReactNode	`—`	The content the label moves over.
`className`	string	`—`	Classes for the root element. It fills its parent, with a 240px minimum height.
`style`	CSSProperties	`—`	Inline styles for the root element.

phrasesstring[]

Words the label flips through. Each change rolls the old word out and the new one in while the label resizes.

Default["Explore", "Create", "Ship"]

intervalnumber

Seconds each phrase holds before the next one rolls in.

Default2.4

colorstring

Fill of the label and of the stack it leaves behind.

Default"#FAFAFA"

textColorstring

Colour of the label text.

Default"#0A0A0A"

accentColorstring

Border and corner handles of the label, like a selected layer in a design tool.

Default"#5227FF"

fontSizenumber

Text size in pixels. The label's padding, height and handles scale with it.

Default15

fontWeightnumber

Weight of the label text.

Default500

fontFamilystring

Font of the label. inherit uses the font of the surrounding page.

Default"inherit"

radiusnumber

Corner radius of the label in pixels.

Default6

handlesboolean

Show the square handles on the label's corners.

Defaulttrue

trailnumber

Seconds of motion the stack of labels trails behind. 0 turns the trail off.

Default0.4

depthnumber

How strongly the stack shades into the page as it recedes, from 0 to 1.

Default0.8

tapernumber

How much the stack narrows toward its tail, from 0 to 1.

Default0.4

tiltnumber

How far the label leans into fast horizontal moves, from 0 to 2.

Default1

follownumber

Seconds the label takes to catch up with the pointer.

Default0.06

clickToCycleboolean

Clicking flips straight to the next phrase.

Defaulttrue

hideCursorboolean

Hide the native cursor inside this component, so the label becomes the cursor. Text fields keep their caret.

Defaulttrue

autoplayboolean

Let the label wander on its own while the pointer is away.

Defaultfalse

autoplaySpeednumber

Speed of that wandering.

Default1

idleDelaynumber

Seconds after the pointer leaves before the wandering label takes over again.

Default1.5

interactiveboolean

Let the pointer drive the label. Reduced-motion users get the label without the trail, tilt or wandering.

Defaulttrue

ref{ next, say }

next() flips to the next phrase. say(text) holds a specific label until you call say(null).

Default—

data-cursor-labelattribute

Put it on any element inside to show that text while the pointer is over it, such as "View" on a project card.

Default—

childrenReactNode

The content the label moves over.

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

phrases

string[]

["Explore", "Create", "Ship"]

Words the label flips through. Each change rolls the old word out and the new one in while the label resizes.

interval

number

2.4

Seconds each phrase holds before the next one rolls in.

color

string

"#FAFAFA"

Fill of the label and of the stack it leaves behind.

textColor

string

"#0A0A0A"

Colour of the label text.

accentColor

string

"#5227FF"

Border and corner handles of the label, like a selected layer in a design tool.

fontSize

number

15

Text size in pixels. The label's padding, height and handles scale with it.

fontWeight

number

500

Weight of the label text.

fontFamily

string

"inherit"

Font of the label. inherit uses the font of the surrounding page.

radius

number

6

Corner radius of the label in pixels.

handles

boolean

true

Show the square handles on the label's corners.

trail

number

0.4

Seconds of motion the stack of labels trails behind. 0 turns the trail off.

depth

number

0.8

How strongly the stack shades into the page as it recedes, from 0 to 1.

taper

number

0.4

How much the stack narrows toward its tail, from 0 to 1.

tilt

number

1

How far the label leans into fast horizontal moves, from 0 to 2.

follow

number

0.06

Seconds the label takes to catch up with the pointer.

clickToCycle

boolean

true

Clicking flips straight to the next phrase.

hideCursor

boolean

true

Hide the native cursor inside this component, so the label becomes the cursor. Text fields keep their caret.

autoplay

boolean

false

Let the label wander on its own while the pointer is away.

autoplaySpeed

number

1

Speed of that wandering.

idleDelay

number

1.5

Seconds after the pointer leaves before the wandering label takes over again.

interactive

boolean

true

Let the pointer drive the label. Reduced-motion users get the label without the trail, tilt or wandering.

ref

{ next, say }

—

next() flips to the next phrase. say(text) holds a specific label until you call say(null).

data-cursor-label

attribute

—

Put it on any element inside to show that text while the pointer is over it, such as "View" on a project card.

children

ReactNode

—

The content the label moves over.

className

string

—

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

style

CSSProperties

—

Inline styles for the root element.