Binary Orbits

A tilted spiral galaxy of stars streaming through its arms

binary-orbits-tw

Customize

Arms

Core

Background

Stars

70000

Star Size

1.70px

Sparkle

0.50

Arms

Twist

3.50

Arm Strength

0.50

Dust

0.50

Core

1.00

Core Size

0.070

Inner Void

0.00

Thickness

0.020

Tilt

62°

Roll

-8°

Scale

1.00

Center X

0.50

Center Y

0.52

Speed

1.00

Twinkle

0.35

Depth

0.40

Glow

0.45

Intensity

1.00

Wake Strength

1.00

Ripple Strength

1.00

Hover Boost

0.50

Hover WakeClick RippleInteractivePaused

Props

Name	Type	Default	Description
`colors`	[string, string]	`["#7B4DFF", "#FFC2EE"]`	Colour of the outer arms and colour of the inner disc, blended in OKLab. The core burns toward white and newly formed stars take on a warmer shade of the second colour.
`backgroundColor`	string	`"#0A0A0A"`	Colour behind the galaxy.
`mode`	"auto" \| "glow" \| "ink"	`"auto"`	glow adds light for dark backgrounds, ink stipples coloured stars for light ones. auto picks from the background brightness.
`stars`	number	`70000`	Number of stars, from 2,000 to 250,000.
`starSize`	number	`1.7`	Size of the stars in pixels. Stars nearer the camera draw slightly larger.
`sparkle`	number	`0.5`	Share of brighter, larger stars scattered through the disc, from 0 to 1.
`arms`	number	`3`	Number of spiral arms, from 1 to 8.
`twist`	number	`3.5`	How tightly the arms wind. Higher values give tighter, more numerous turns.
`armStrength`	number	`0.5`	How strongly stars crowd into the arms, from 0 (a smooth disc) to 1.
`dust`	number	`0.5`	Darkness of the dust lanes that run along the inner edge of each arm, from 0 to 1.
`core`	number	`1`	Brightness of the central bulge, from 0 to 3.
`coreSize`	number	`0.07`	Radius of the central bulge, as a fraction of the galaxy's radius.
`innerVoid`	number	`0`	Radius of an empty hole at the centre, from 0 to 0.6. Combine with more arms for a ringed galaxy.
`thickness`	number	`0.02`	Thickness of the disc. Stars scatter above and below it, most of all near the centre.
`tilt`	number	`62`	Viewing angle in degrees, from 0 (face-on) to 85 (nearly edge-on).
`roll`	number	`-8`	Rotation of the whole galaxy on screen, in degrees.
`scale`	number	`1`	Size of the galaxy relative to the frame.
`centerX`	number	`0.5`	Horizontal position of the centre, from 0 (left) to 1 (right).
`centerY`	number	`0.52`	Vertical position of the centre, from 0 (top) to 1 (bottom).
`speed`	number	`1`	Rotation speed. Inner stars orbit faster than outer ones, so the arms stay put while stars stream through them. Negative values turn it the other way.
`twinkle`	number	`0.35`	How much individual stars shimmer, from 0 to 1.
`depth`	number	`0.4`	How much the far side of the disc dims, from 0 (flat) to 1.
`glow`	number	`0.45`	Soft haze around bright regions, from 0 to 3.
`intensity`	number	`1`	Overall exposure.
`interactive`	boolean	`true`	Respond to the pointer.
`hoverWake`	boolean	`true`	Sweeping the pointer across the disc gathers nearby stars into a faint tidal filament. The galaxy's rotation winds it into a new trailing arc, which then relaxes back into the disc.
`clickRipple`	boolean	`true`	Clicking sends a soft ring of compressed stars outward from the click point, like the density wave of a ring galaxy. Newly formed stars light up as it passes.
`wakeStrength`	number	`1`	How strongly a sweep gathers stars, from 0 to 3.
`rippleStrength`	number	`1`	Strength of the click ring, from 0 to 3.
`hoverBoost`	number	`0.5`	How much the rotation quickens and the disc brightens while the pointer is over it, from 0 to 2.
`paused`	boolean	`false`	Freeze the rotation. 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`	{ ripple }	`—`	ripple() sends a ring outward from the centre, for example when a form is submitted.
`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 outer arms and colour of the inner disc, blended in OKLab. The core burns toward white and newly formed stars take on a warmer shade of the second colour.

Default["#7B4DFF", "#FFC2EE"]

backgroundColorstring

Colour behind the galaxy.

Default"#0A0A0A"

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

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

Default"auto"

starsnumber

Number of stars, from 2,000 to 250,000.

Default70000

starSizenumber

Size of the stars in pixels. Stars nearer the camera draw slightly larger.

Default1.7

sparklenumber

Share of brighter, larger stars scattered through the disc, from 0 to 1.

Default0.5

armsnumber

Number of spiral arms, from 1 to 8.

Default3

twistnumber

How tightly the arms wind. Higher values give tighter, more numerous turns.

Default3.5

armStrengthnumber

How strongly stars crowd into the arms, from 0 (a smooth disc) to 1.

Default0.5

dustnumber

Darkness of the dust lanes that run along the inner edge of each arm, from 0 to 1.

Default0.5

corenumber

Brightness of the central bulge, from 0 to 3.

Default1

coreSizenumber

Radius of the central bulge, as a fraction of the galaxy's radius.

Default0.07

innerVoidnumber

Radius of an empty hole at the centre, from 0 to 0.6. Combine with more arms for a ringed galaxy.

Default0

thicknessnumber

Thickness of the disc. Stars scatter above and below it, most of all near the centre.

Default0.02

tiltnumber

Viewing angle in degrees, from 0 (face-on) to 85 (nearly edge-on).

Default62

rollnumber

Rotation of the whole galaxy on screen, in degrees.

Default-8

scalenumber

Size of the galaxy relative to the frame.

Default1

centerXnumber

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

Default0.5

centerYnumber

Vertical position of the centre, from 0 (top) to 1 (bottom).

Default0.52

speednumber

Rotation speed. Inner stars orbit faster than outer ones, so the arms stay put while stars stream through them. Negative values turn it the other way.

Default1

twinklenumber

How much individual stars shimmer, from 0 to 1.

Default0.35

depthnumber

How much the far side of the disc dims, from 0 (flat) to 1.

Default0.4

glownumber

Soft haze around bright regions, from 0 to 3.

Default0.45

intensitynumber

Overall exposure.

Default1

interactiveboolean

Respond to the pointer.

Defaulttrue

hoverWakeboolean

Sweeping the pointer across the disc gathers nearby stars into a faint tidal filament. The galaxy's rotation winds it into a new trailing arc, which then relaxes back into the disc.

Defaulttrue

clickRippleboolean

Clicking sends a soft ring of compressed stars outward from the click point, like the density wave of a ring galaxy. Newly formed stars light up as it passes.

Defaulttrue

wakeStrengthnumber

How strongly a sweep gathers stars, from 0 to 3.

Default1

rippleStrengthnumber

Strength of the click ring, from 0 to 3.

Default1

hoverBoostnumber

How much the rotation quickens and the disc brightens while the pointer is over it, from 0 to 2.

Default0.5

pausedboolean

Freeze the rotation. 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{ ripple }

ripple() sends a ring outward from the centre, for example when a form is submitted.

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]

["#7B4DFF", "#FFC2EE"]

Colour of the outer arms and colour of the inner disc, blended in OKLab. The core burns toward white and newly formed stars take on a warmer shade of the second colour.

backgroundColor

string

"#0A0A0A"

Colour behind the galaxy.

mode

"auto" | "glow" | "ink"

"auto"

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

stars

number

70000

Number of stars, from 2,000 to 250,000.

starSize

number

1.7

Size of the stars in pixels. Stars nearer the camera draw slightly larger.

sparkle

number

0.5

Share of brighter, larger stars scattered through the disc, from 0 to 1.

arms

number

3

Number of spiral arms, from 1 to 8.

twist

number

3.5

How tightly the arms wind. Higher values give tighter, more numerous turns.

armStrength

number

0.5

How strongly stars crowd into the arms, from 0 (a smooth disc) to 1.

dust

number

0.5

Darkness of the dust lanes that run along the inner edge of each arm, from 0 to 1.

core

number

1

Brightness of the central bulge, from 0 to 3.

coreSize

number

0.07

Radius of the central bulge, as a fraction of the galaxy's radius.

innerVoid

number

0

Radius of an empty hole at the centre, from 0 to 0.6. Combine with more arms for a ringed galaxy.

thickness

number

0.02

Thickness of the disc. Stars scatter above and below it, most of all near the centre.

tilt

number

62

Viewing angle in degrees, from 0 (face-on) to 85 (nearly edge-on).

roll

number

-8

Rotation of the whole galaxy on screen, in degrees.

scale

number

1

Size of the galaxy relative to the frame.

centerX

number

0.5

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

centerY

number

0.52

Vertical position of the centre, from 0 (top) to 1 (bottom).

speed

number

1

Rotation speed. Inner stars orbit faster than outer ones, so the arms stay put while stars stream through them. Negative values turn it the other way.

twinkle

number

0.35

How much individual stars shimmer, from 0 to 1.

depth

number

0.4

How much the far side of the disc dims, from 0 (flat) to 1.

glow

number

0.45

Soft haze around bright regions, from 0 to 3.

intensity

number

1

Overall exposure.

interactive

boolean

true

Respond to the pointer.

hoverWake

boolean

true

Sweeping the pointer across the disc gathers nearby stars into a faint tidal filament. The galaxy's rotation winds it into a new trailing arc, which then relaxes back into the disc.

clickRipple

boolean

true

Clicking sends a soft ring of compressed stars outward from the click point, like the density wave of a ring galaxy. Newly formed stars light up as it passes.

wakeStrength

number

1

How strongly a sweep gathers stars, from 0 to 3.

rippleStrength

number

1

Strength of the click ring, from 0 to 3.

hoverBoost

number

0.5

How much the rotation quickens and the disc brightens while the pointer is over it, from 0 to 2.

paused

boolean

false

Freeze the rotation. 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

{ ripple }

—

ripple() sends a ring outward from the centre, for example when a form is submitted.

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.