Glyph Orb

A banded ASCII planet turning slowly in the light of a distant sun

glyph-orb-tw

Customize

Shadow

Sunlit

Background

Glyph Size

10px

Spacing

1.10

Size

1.00

Center X

0.50

Center Y

0.50

Tilt

-24°

Spin

1.00

Bands

9.0

Turbulence

1.00

Light Angle

-45°

Light Height

0.40

Rim

0.70

Atmosphere

0.60

Contrast

0.40

Glow

0.12

Intensity

1.00

Momentum

0.50

Storm Strength

1.00

Hover LightDraggableClick StormInteractivePaused

Props

Name	Type	Default	Description
`colors`	[string, string]	`["#6D3DFF", "#FF9BE1"]`	Colour of the planet's shadowed bands and colour of its sunlit clouds, blended in OKLab. The brightest limb burns toward white.
`backgroundColor`	string	`"#0A0A0A"`	Colour of the space around the planet.
`mode`	"auto" \| "glow" \| "ink"	`"auto"`	glow adds light for dark backgrounds, ink prints coloured characters for light ones. auto picks from the background brightness.
`charset`	string	`dense ASCII ramp`	Characters the planet is drawn with. They are sorted by how much ink each one uses, so any string works as a brightness ramp.
`fontFamily`	string	`system monospace`	Font used to draw the characters. Use a font that is already loaded on the page.
`glyphSize`	number	`10`	Height of the characters in pixels. Smaller characters give a finer, more photographic planet.
`spacing`	number	`1.1`	Horizontal gap between character columns, from 0.6 (packed) to 2.5 (airy).
`size`	number	`1`	Size of the planet relative to the frame. Large values with a low centerY make a horizon.
`centerX`	number	`0.5`	Horizontal position of the planet, from 0 (left) to 1 (right). Values outside that range move it off-frame.
`centerY`	number	`0.5`	Vertical position of the planet, from 0 (top) to 1 (bottom). Values above 1 let it rise from below the frame.
`tilt`	number	`-24`	Lean of the planet's axis in degrees.
`spin`	number	`1`	Rotation speed. Negative values turn the planet the other way.
`bands`	number	`9`	Number of cloud bands from pole to pole.
`turbulence`	number	`1`	How much the bands swirl and break into eddies, from 0 (clean stripes) to 3.
`lightAngle`	number	`-45`	Direction the sunlight comes from, in degrees around the planet. 0 lights it from above.
`lightHeight`	number	`0.4`	How far in front of the planet the sun sits, from 0 (behind it, a thin crescent) to 1 (in front, fully lit).
`hoverLight`	boolean	`true`	The sun follows the pointer around the planet, so the lit side turns to face it, then drifts back when the pointer leaves.
`rim`	number	`0.7`	Brightness of the sunlit rim where light scatters through the planet's edge, from 0 to 2.
`atmosphere`	number	`0.6`	Faint haze just beyond the lit limb, from 0 to 2.
`contrast`	number	`0.4`	How quickly the characters get denser with brightness, from 0 (soft) to 1 (punchy).
`glow`	number	`0.12`	Soft bloom around the brightest characters, from 0 to 3.
`intensity`	number	`1`	Overall exposure.
`interactive`	boolean	`true`	Respond to the pointer.
`draggable`	boolean	`true`	Grab the planet and spin it in any direction. It keeps its momentum, then settles back to its natural axis.
`momentum`	number	`0.5`	How long a spin keeps going before it slows, from 0 to 1.
`clickStorm`	boolean	`true`	Clicking the planet seeds a storm: the clouds there curl into a spinning vortex that drifts with the rotation and slowly dissolves.
`stormStrength`	number	`1`	How tightly a storm winds, from 0 to 3.
`paused`	boolean	`false`	Freeze the planet. Reduced-motion users always get a still frame.
`quality`	number	`1`	Resolution scale from 0.25 to 1. Lower values are cheaper on large screens.
`ref`	{ storm }	`—`	storm(x, y) seeds a storm at a point on the planet's disc, given as fractions from 0 to 1.
`children`	ReactNode	`—`	Content placed over the background.
`className`	string	`—`	Classes for the root element. It fills its parent, with a 240px minimum height.
`style`	CSSProperties	`—`	Inline styles for the root element.

colors[string, string]

Colour of the planet's shadowed bands and colour of its sunlit clouds, blended in OKLab. The brightest limb burns toward white.

Default["#6D3DFF", "#FF9BE1"]

backgroundColorstring

Colour of the space around the planet.

Default"#0A0A0A"

mode"auto" | "glow" | "ink"

glow adds light for dark backgrounds, ink prints coloured characters for light ones. auto picks from the background brightness.

Default"auto"

charsetstring

Characters the planet is drawn with. They are sorted by how much ink each one uses, so any string works as a brightness ramp.

Defaultdense ASCII ramp

fontFamilystring

Font used to draw the characters. Use a font that is already loaded on the page.

Defaultsystem monospace

glyphSizenumber

Height of the characters in pixels. Smaller characters give a finer, more photographic planet.

Default10

spacingnumber

Horizontal gap between character columns, from 0.6 (packed) to 2.5 (airy).

Default1.1

sizenumber

Size of the planet relative to the frame. Large values with a low centerY make a horizon.

Default1

centerXnumber

Horizontal position of the planet, from 0 (left) to 1 (right). Values outside that range move it off-frame.

Default0.5

centerYnumber

Vertical position of the planet, from 0 (top) to 1 (bottom). Values above 1 let it rise from below the frame.

Default0.5

tiltnumber

Lean of the planet's axis in degrees.

Default-24

spinnumber

Rotation speed. Negative values turn the planet the other way.

Default1

bandsnumber

Number of cloud bands from pole to pole.

Default9

turbulencenumber

How much the bands swirl and break into eddies, from 0 (clean stripes) to 3.

Default1

lightAnglenumber

Direction the sunlight comes from, in degrees around the planet. 0 lights it from above.

Default-45

lightHeightnumber

How far in front of the planet the sun sits, from 0 (behind it, a thin crescent) to 1 (in front, fully lit).

Default0.4

hoverLightboolean

The sun follows the pointer around the planet, so the lit side turns to face it, then drifts back when the pointer leaves.

Defaulttrue

rimnumber

Brightness of the sunlit rim where light scatters through the planet's edge, from 0 to 2.

Default0.7

atmospherenumber

Faint haze just beyond the lit limb, from 0 to 2.

Default0.6

contrastnumber

How quickly the characters get denser with brightness, from 0 (soft) to 1 (punchy).

Default0.4

glownumber

Soft bloom around the brightest characters, from 0 to 3.

Default0.12

intensitynumber

Overall exposure.

Default1

interactiveboolean

Respond to the pointer.

Defaulttrue

draggableboolean

Grab the planet and spin it in any direction. It keeps its momentum, then settles back to its natural axis.

Defaulttrue

momentumnumber

How long a spin keeps going before it slows, from 0 to 1.

Default0.5

clickStormboolean

Clicking the planet seeds a storm: the clouds there curl into a spinning vortex that drifts with the rotation and slowly dissolves.

Defaulttrue

stormStrengthnumber

How tightly a storm winds, from 0 to 3.

Default1

pausedboolean

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

Defaultfalse

qualitynumber

Resolution scale from 0.25 to 1. Lower values are cheaper on large screens.

Default1

ref{ storm }

storm(x, y) seeds a storm at a point on the planet's disc, given as fractions from 0 to 1.

Default—

childrenReactNode

Content placed over the background.

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

colors

[string, string]

["#6D3DFF", "#FF9BE1"]

Colour of the planet's shadowed bands and colour of its sunlit clouds, blended in OKLab. The brightest limb burns toward white.

backgroundColor

string

"#0A0A0A"

Colour of the space around the planet.

mode

"auto" | "glow" | "ink"

"auto"

glow adds light for dark backgrounds, ink prints coloured characters for light ones. auto picks from the background brightness.

charset

string

dense ASCII ramp

Characters the planet is drawn with. They are sorted by how much ink each one uses, so any string works as a brightness ramp.

fontFamily

string

system monospace

Font used to draw the characters. Use a font that is already loaded on the page.

glyphSize

number

10

Height of the characters in pixels. Smaller characters give a finer, more photographic planet.

spacing

number

1.1

Horizontal gap between character columns, from 0.6 (packed) to 2.5 (airy).

size

number

1

Size of the planet relative to the frame. Large values with a low centerY make a horizon.

centerX

number

0.5

Horizontal position of the planet, from 0 (left) to 1 (right). Values outside that range move it off-frame.

centerY

number

0.5

Vertical position of the planet, from 0 (top) to 1 (bottom). Values above 1 let it rise from below the frame.

tilt

number

-24

Lean of the planet's axis in degrees.

spin

number

1

Rotation speed. Negative values turn the planet the other way.

bands

number

9

Number of cloud bands from pole to pole.

turbulence

number

1

How much the bands swirl and break into eddies, from 0 (clean stripes) to 3.

lightAngle

number

-45

Direction the sunlight comes from, in degrees around the planet. 0 lights it from above.

lightHeight

number

0.4

How far in front of the planet the sun sits, from 0 (behind it, a thin crescent) to 1 (in front, fully lit).

hoverLight

boolean

true

The sun follows the pointer around the planet, so the lit side turns to face it, then drifts back when the pointer leaves.

rim

number

0.7

Brightness of the sunlit rim where light scatters through the planet's edge, from 0 to 2.

atmosphere

number

0.6

Faint haze just beyond the lit limb, from 0 to 2.

contrast

number

0.4

How quickly the characters get denser with brightness, from 0 (soft) to 1 (punchy).

glow

number

0.12

Soft bloom around the brightest characters, from 0 to 3.

intensity

number

1

Overall exposure.

interactive

boolean

true

Respond to the pointer.

draggable

boolean

true

Grab the planet and spin it in any direction. It keeps its momentum, then settles back to its natural axis.

momentum

number

0.5

How long a spin keeps going before it slows, from 0 to 1.

clickStorm

boolean

true

Clicking the planet seeds a storm: the clouds there curl into a spinning vortex that drifts with the rotation and slowly dissolves.

stormStrength

number

1

How tightly a storm winds, from 0 to 3.

paused

boolean

false

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

quality

number

1

Resolution scale from 0.25 to 1. Lower values are cheaper on large screens.

ref

{ storm }

—

storm(x, y) seeds a storm at a point on the planet's disc, given as fractions from 0 to 1.

children

ReactNode

—

Content placed over the background.

className

string

—

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

style

CSSProperties

—

Inline styles for the root element.