OrbitingPlanets

<OrbitingPlanets>CSS Modules

Luminous ice-cyan orbital backdrop on native WebGL — soft bloom halos, additive orbit ribbons, pastel spheres with depth occlusion, optional camera parallax. Transparent canvas by default; static CSS fallback when WebGL is unavailable.

InstallationColoxo CLI

npx coloxo add orbiting-planets

ES Module ImportPlayground / npm package

import { OrbitingPlanets } from '@coloxo/ui/visuals';

1. Quick demo

Reference-matched defaults with soft bloom. Open the Blocks page for live controls and variants.

Ice-cyan orbital system

Soft bloom, luminous ribbons, pastel worlds — parent owns the midnight background.

2. Blocks showcase

See the composed hero, live controls, and theme variants on the Blocks page.

See how Orbiting Planets is composed in a block

3. Props

Name	Type	Default	Description
centralColor	string	#8ECBFF	Color of the central body.
centralSize	number	0.92	Central body scale (0.35–1.2).
planets	OrbitingPlanetConfig[]	—	Orbiting bodies (max 16). Defaults to a curated pastel set of 6.
showOrbitPaths	boolean	true	Draw luminous elliptical orbit ribbons.
orbitColor	string	#67E8F9	Orbit path color.
orbitOpacity	number	0.55	Orbit path opacity (0–1).
backgroundColor	string	#050816	Clear color when transparent is false.
transparent	boolean	true	Alpha-cleared canvas so the parent controls background.
speed	number	1	Global orbit speed multiplier (0.1–3).
lightingIntensity	number	0.78	Lambert / specular strength (0–1).
glowIntensity	number	0.85	Global halo / bloom strength (0–1).
interaction	boolean	false	Enable damped camera parallax.
interactionStrength	number	0.35	Parallax strength (0–1).
quality	"low" \| "medium" \| "high"	medium	Sphere tessellation, orbit segments, DPR, and bloom (bloom off on low).
paused	boolean	false	Stop continuous animation.
respectReducedMotion	boolean	true	Honor prefers-reduced-motion (static frame, no parallax).
fallback	"static"	static	Used when WebGL is unavailable.