.det .det-faner,.det .det-js-kun{display:none!important}.det .det-bar{padding:0;border:0}.det .det-panel[hidden]{display:block!important}.det .det-panel+.det-panel{margin-top:48px}.det .det-panel-h{position:static;width:auto;height:auto;margin:0 0 14px;overflow:visible;clip-path:none;white-space:normal}.det .det-win-inner{width:100%!important;height:100%!important;left:0;transform:none}.det .det-shutter{display:none}

Galaxy Marble

webglPro

A procedural galaxy sealed in a refracting glass sphere, with five looks and a custom palette.

Opening soon

Pro cannot be bought yet. The page opens when payment is ready.

Width

The preview could not load.

Live demo. The theme switches the demo itself.

GalaxyMarbleProps

Prop	Type	Default	What it does
`look`	`MarbleLook`	`'auto'`	What is inside the glass. `spiral` is a tilted disc with arms, `nebula` is big drifting clouds, `core` is one blazing bulge, `deep-field` is mostly stars. `auto` slowly melts from one to the next.
`anchor`	`string`	`'#120a2e'`	The deep base colour of space inside the glass. Any CSS colour, `var()` and `currentColor` included. Keep it dark.
`accents`	`[string, string, string]`	`DEFAULT_ACCENTS`	Three accent colours for arms, clouds and tinted stars. Any CSS colour.
`speed`	`number`	`1`	Speed of the drifting nebulae and the twinkle. 1 is calm, 0 freezes the clouds.
`spin`	`number`	`1`	Spin of the galaxy inside the glass. 1 is one turn in about a minute, negative turns the other way, 0 holds still.
`children`	`ReactNode`	–	Drawn on top, centred in the marble.
`label`	`string`	–	Accessible name. When set, the marble is exposed as an image; leave it out for pure decoration.
`className`	`string`	–	Sizes the marble: it is a circle that fits the box, so give the box a width (and optionally a height).

Preview

Code

The code is locked

Props

A11y