Orbital Type

A turning globe wrapped in rings of text you can spin by hand

orbital-type-tw

Customize

Text

Front

Back

Bands

Glyph Scale

0.72

Spacing

1.00

Tilt

24°

Spin

0.12

Flow

0.50

Size

0.82

Perspective

0.30

Back Opacity

0.30

Brush

1.00

Pulse Strength

1.00

AlternateClick PulseInteractivePaused

Props

Name	Type	Default	Description
`text`	string	`"IDEAS IN ORBIT ·"`	The phrase repeated around the globe. In bands it runs along every ring; in scatter its letters are sprinkled over the surface.
`colors`	[string, string]	`["#FFFFFF", "#7C5CFF"]`	Colour of the text facing you and colour of the text seen through the globe on its far side.
`fontFamily`	string	`inherited`	Font for the letters. Leave unset to use the page font.
`fontWeight`	number	`600`	Font weight.
`layout`	"bands" \| "scatter"	`"bands"`	bands wraps the phrase around rings of latitude; scatter spreads single letters evenly over the sphere.
`bands`	number	`18`	Number of rings from pole to pole (or the density of letters in scatter).
`glyphScale`	number	`0.72`	Letter height as a share of each ring's height.
`spacing`	number	`1`	Letter spacing along the rings.
`tilt`	number	`24`	Lean of the globe's axis, in degrees.
`spin`	number	`0.12`	Rotation speed of the whole globe. Negative values turn it the other way.
`flow`	number	`0.5`	Speed the text slides along its rings.
`alternate`	boolean	`true`	Neighbouring rings flow in opposite directions.
`size`	number	`0.82`	Size of the globe relative to the frame.
`perspective`	number	`0.3`	Depth exaggeration, from 0 (flat) to 0.8.
`backOpacity`	number	`0.3`	Visibility of the far side seen through the globe, from 0 to 1.
`interactive`	boolean	`true`	Respond to the pointer.
`brush`	number	`1`	Sweep the pointer along a ring to spin it; it keeps its momentum and drags its neighbours. 0 turns brushing off.
`clickPulse`	boolean	`true`	Clicking the globe sends a twist through it: the ring you clicked whips round and swells, and the wave travels ring by ring to the poles.
`pulseStrength`	number	`1`	Strength of the click pulse, from 0 to 3.
`paused`	boolean	`false`	Freeze the globe. Reduced-motion users always get a still frame.
`quality`	number	`1`	Resolution scale from 0.25 to 1.
`ref`	{ pulse }	`—`	pulse(latitude) sends a twist from a latitude between -1 (bottom) and 1 (top).
`children`	ReactNode	`—`	Content placed over the globe.
`className`	string	`—`	Classes for the root element. It fills its parent, with a 240px minimum height.
`style`	CSSProperties	`—`	Inline styles for the root element.

textstring

The phrase repeated around the globe. In bands it runs along every ring; in scatter its letters are sprinkled over the surface.

Default"IDEAS IN ORBIT ·"

colors[string, string]

Colour of the text facing you and colour of the text seen through the globe on its far side.

Default["#FFFFFF", "#7C5CFF"]

fontFamilystring

Font for the letters. Leave unset to use the page font.

Defaultinherited

fontWeightnumber

Font weight.

Default600

layout"bands" | "scatter"

bands wraps the phrase around rings of latitude; scatter spreads single letters evenly over the sphere.

Default"bands"

bandsnumber

Number of rings from pole to pole (or the density of letters in scatter).

Default18

glyphScalenumber

Letter height as a share of each ring's height.

Default0.72

spacingnumber

Letter spacing along the rings.

Default1

tiltnumber

Lean of the globe's axis, in degrees.

Default24

spinnumber

Rotation speed of the whole globe. Negative values turn it the other way.

Default0.12

flownumber

Speed the text slides along its rings.

Default0.5

alternateboolean

Neighbouring rings flow in opposite directions.

Defaulttrue

sizenumber

Size of the globe relative to the frame.

Default0.82

perspectivenumber

Depth exaggeration, from 0 (flat) to 0.8.

Default0.3

backOpacitynumber

Visibility of the far side seen through the globe, from 0 to 1.

Default0.3

interactiveboolean

Respond to the pointer.

Defaulttrue

brushnumber

Sweep the pointer along a ring to spin it; it keeps its momentum and drags its neighbours. 0 turns brushing off.

Default1

clickPulseboolean

Clicking the globe sends a twist through it: the ring you clicked whips round and swells, and the wave travels ring by ring to the poles.

Defaulttrue

pulseStrengthnumber

Strength of the click pulse, from 0 to 3.

Default1

pausedboolean

Freeze the globe. Reduced-motion users always get a still frame.

Defaultfalse

qualitynumber

Resolution scale from 0.25 to 1.

Default1

ref{ pulse }

pulse(latitude) sends a twist from a latitude between -1 (bottom) and 1 (top).

Default—

childrenReactNode

Content placed over the globe.

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

text

string

"IDEAS IN ORBIT ·"

The phrase repeated around the globe. In bands it runs along every ring; in scatter its letters are sprinkled over the surface.

colors

[string, string]

["#FFFFFF", "#7C5CFF"]

Colour of the text facing you and colour of the text seen through the globe on its far side.

fontFamily

string

inherited

Font for the letters. Leave unset to use the page font.

fontWeight

number

600

Font weight.

layout

"bands" | "scatter"

"bands"

bands wraps the phrase around rings of latitude; scatter spreads single letters evenly over the sphere.

bands

number

18

Number of rings from pole to pole (or the density of letters in scatter).

glyphScale

number

0.72

Letter height as a share of each ring's height.

spacing

number

1

Letter spacing along the rings.

tilt

number

24

Lean of the globe's axis, in degrees.

spin

number

0.12

Rotation speed of the whole globe. Negative values turn it the other way.

flow

number

0.5

Speed the text slides along its rings.

alternate

boolean

true

Neighbouring rings flow in opposite directions.

size

number

0.82

Size of the globe relative to the frame.

perspective

number

0.3

Depth exaggeration, from 0 (flat) to 0.8.

backOpacity

number

0.3

Visibility of the far side seen through the globe, from 0 to 1.

interactive

boolean

true

Respond to the pointer.

brush

number

1

Sweep the pointer along a ring to spin it; it keeps its momentum and drags its neighbours. 0 turns brushing off.

clickPulse

boolean

true

Clicking the globe sends a twist through it: the ring you clicked whips round and swells, and the wave travels ring by ring to the poles.

pulseStrength

number

1

Strength of the click pulse, from 0 to 3.

paused

boolean

false

Freeze the globe. Reduced-motion users always get a still frame.

quality

number

1

Resolution scale from 0.25 to 1.

ref

{ pulse }

—

pulse(latitude) sends a twist from a latitude between -1 (bottom) and 1 (top).

children

ReactNode

—

Content placed over the globe.

className

string

—

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

style

CSSProperties

—

Inline styles for the root element.