GeezerVison

The World Wide Web, restored to 800 pixels of glory.

GeezerVison is showing pro.reactbits.dev — Astral Shell

Get Started

Site

Browse

All Components80 New

Text34

Backgrounds98

3D & Shaders49

Cursor Effects21

UI & Cards28

Astral Shell

A slowly turning globe of connected stars

astral-shell-tw

pro.reactbits.dev

ComponentsBlocksTemplatesPricing

Get Pro

A world of connections

Premium animated components and blocks, crafted to make your next launch feel alive.

Get startedBrowse library

9:41

A world of connections

Premium animated components and blocks, crafted to make your next launch feel alive.

Get startedBrowse library

A world of connections

Premium animated components and blocks, crafted to make your next launch feel alive.

Get startedLearn more

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—

You are visitor 01402503 — GeezerVison does not store the pages you look up.
Best viewed with Netscape Navigator 4.7 or Internet Explorer 6 at 800×600. No cookies required.