Astral Shell

A slowly turning globe of connected stars

astral-shell-tw

Customize

Background

Network

Highlight

Nodes

2400

Connections

Reach

0.20

Clustering

0.85

Chords

0.35

Radius

0.40

Origin X

0.50

Origin Y

0.50

Line Opacity

0.70

Node Size

0.80

Depth Fade

0.70

Spin

1.00

Tilt

18°

Hover Radius

0.22

Hover Boost

1.00

Pulse Speed

1.20

Seed

InteractiveDraggableClick PulsePaused

Props

Name	Type	Default	Description
`colors`	string[]	`["#7C6BFF", "#FFE6FA"]`	Two colours: the network itself, then the highlight that tints hubs, the pointer's glow and click pulses.
`backgroundColor`	string	`"#0a0a0a"`	Colour behind the globe. Light backgrounds switch to ink lines. Pass "transparent" to show the page.
`nodes`	number	`2400`	Number of stars on the shell, from 100 to 2500.
`connections`	number	`4`	Lines drawn from each star to its nearest neighbours, from 1 to 8.
`reach`	number	`0.2`	Longest neighbour line, relative to the globe's radius. Longer lines draw fainter.
`clustering`	number	`0.85`	0 scatters the stars evenly; 1 gathers them into constellations joined by filaments.
`chords`	number	`0.35`	Long lines cutting through the globe, as a share of the star count. 0 keeps only the surface web.
`radius`	number	`0.4`	Radius of the globe, as a fraction of the height.
`originX`	number	`0.5`	Horizontal position of the centre, from 0 (left) to 1 (right).
`originY`	number	`0.5`	Vertical position of the centre, from 0 (bottom) to 1 (top). Values outside 0–1 let it rise from an edge.
`lineOpacity`	number	`0.7`	Brightness of the connecting lines.
`nodeSize`	number	`0.8`	Size of the stars. Hubs draw slightly larger.
`depthFade`	number	`0.7`	How much the far side of the globe dims. 0 draws both sides equally.
`spin`	number	`1`	Speed and direction of the slow rotation. 0 holds it still.
`tilt`	number	`18`	Forward tilt of the globe, in degrees.
`interactive`	boolean	`true`	Turns every pointer effect on or off: the highlight, the lean, dragging and click pulses.
`draggable`	boolean	`true`	Drag to spin the globe. It keeps its momentum and settles back to its spin.
`hoverRadius`	number	`0.22`	Size of the area the pointer lights, relative to the height.
`hoverBoost`	number	`1`	Strength of the pointer highlight. 0 disables it.
`clickPulse`	boolean	`true`	Each click sends a pulse from the point you clicked across the whole globe. Rapid clicks stack.
`pulseSpeed`	number	`1.2`	How fast pulses travel around the globe.
`seed`	number	`0`	Changes the arrangement of the stars.
`paused`	boolean	`false`	Stops the rotation and the twinkle. Dragging and pulses still work.
`dpr`	number	`2`	Upper bound for the device pixel ratio.
`className`	string	`—`	Classes for the root element. Give it a height.
`style`	CSSProperties	`—`	Inline styles for the root element.
`children`	ReactNode	`—`	Content layered above the globe.

colorsstring[]

Two colours: the network itself, then the highlight that tints hubs, the pointer's glow and click pulses.

Default["#7C6BFF", "#FFE6FA"]

backgroundColorstring

Colour behind the globe. Light backgrounds switch to ink lines. Pass "transparent" to show the page.

Default"#0a0a0a"

nodesnumber

Number of stars on the shell, from 100 to 2500.

Default2400

connectionsnumber

Lines drawn from each star to its nearest neighbours, from 1 to 8.

Default4

reachnumber

Longest neighbour line, relative to the globe's radius. Longer lines draw fainter.

Default0.2

clusteringnumber

0 scatters the stars evenly; 1 gathers them into constellations joined by filaments.

Default0.85

chordsnumber

Long lines cutting through the globe, as a share of the star count. 0 keeps only the surface web.

Default0.35

radiusnumber

Radius of the globe, as a fraction of the height.

Default0.4

originXnumber

Horizontal position of the centre, from 0 (left) to 1 (right).

Default0.5

originYnumber

Vertical position of the centre, from 0 (bottom) to 1 (top). Values outside 0–1 let it rise from an edge.

Default0.5

lineOpacitynumber

Brightness of the connecting lines.

Default0.7

nodeSizenumber

Size of the stars. Hubs draw slightly larger.

Default0.8

depthFadenumber

How much the far side of the globe dims. 0 draws both sides equally.

Default0.7

spinnumber

Speed and direction of the slow rotation. 0 holds it still.

Default1

tiltnumber

Forward tilt of the globe, in degrees.

Default18

interactiveboolean

Turns every pointer effect on or off: the highlight, the lean, dragging and click pulses.

Defaulttrue

draggableboolean

Drag to spin the globe. It keeps its momentum and settles back to its spin.

Defaulttrue

hoverRadiusnumber

Size of the area the pointer lights, relative to the height.

Default0.22

hoverBoostnumber

Strength of the pointer highlight. 0 disables it.

Default1

clickPulseboolean

Each click sends a pulse from the point you clicked across the whole globe. Rapid clicks stack.

Defaulttrue

pulseSpeednumber

How fast pulses travel around the globe.

Default1.2

seednumber

Changes the arrangement of the stars.

Default0

pausedboolean

Stops the rotation and the twinkle. Dragging and pulses still work.

Defaultfalse

dprnumber

Upper bound for the device pixel ratio.

Default2

classNamestring

Classes for the root element. Give it a height.

Default—

styleCSSProperties

Inline styles for the root element.

Default—

childrenReactNode

Content layered above the globe.

Default—

Name

Type

Default

Description

colors

string[]

["#7C6BFF", "#FFE6FA"]

Two colours: the network itself, then the highlight that tints hubs, the pointer's glow and click pulses.

backgroundColor

string

"#0a0a0a"

Colour behind the globe. Light backgrounds switch to ink lines. Pass "transparent" to show the page.

nodes

number

2400

Number of stars on the shell, from 100 to 2500.

connections

number

4

Lines drawn from each star to its nearest neighbours, from 1 to 8.

reach

number

0.2

Longest neighbour line, relative to the globe's radius. Longer lines draw fainter.

clustering

number

0.85

0 scatters the stars evenly; 1 gathers them into constellations joined by filaments.

chords

number

0.35

Long lines cutting through the globe, as a share of the star count. 0 keeps only the surface web.

radius

number

0.4

Radius of the globe, as a fraction of the height.

originX

number

0.5

Horizontal position of the centre, from 0 (left) to 1 (right).

originY

number

0.5

Vertical position of the centre, from 0 (bottom) to 1 (top). Values outside 0–1 let it rise from an edge.

lineOpacity

number

0.7

Brightness of the connecting lines.

nodeSize

number

0.8

Size of the stars. Hubs draw slightly larger.

depthFade

number

0.7

How much the far side of the globe dims. 0 draws both sides equally.

spin

number

1

Speed and direction of the slow rotation. 0 holds it still.

tilt

number

18

Forward tilt of the globe, in degrees.

interactive

boolean

true

Turns every pointer effect on or off: the highlight, the lean, dragging and click pulses.

draggable

boolean

true

Drag to spin the globe. It keeps its momentum and settles back to its spin.

hoverRadius

number

0.22

Size of the area the pointer lights, relative to the height.

hoverBoost

number

1

Strength of the pointer highlight. 0 disables it.

clickPulse

boolean

true

Each click sends a pulse from the point you clicked across the whole globe. Rapid clicks stack.

pulseSpeed

number

1.2

How fast pulses travel around the globe.

seed

number

0

Changes the arrangement of the stars.

paused

boolean

false

Stops the rotation and the twinkle. Dragging and pulses still work.

dpr

number

2

Upper bound for the device pixel ratio.

className

string

—

Classes for the root element. Give it a height.

style

CSSProperties

—

Inline styles for the root element.

children

ReactNode

—

Content layered above the globe.