Planet

A WebGL planet seen from orbit, switchable between Mars, Jupiter and Earth: procedural Martian terrain and craters drift past; Jupiter’s cloud bands slide along alternating jets with the Great Red Spot and white ovals churning in the turbulence; Earth’s continents, oceans and shadow-casting clouds roll by, with sun glint on the sea and city lights across the night side. Single-scattering atmosphere lights up the limb with its complementary tint at grazing angles, and the sun follows the pointer along the horizon.

Elyri

WebGL · Real-time

Components that come alive

A React library of living backgrounds, motion and text effects — built to make your interface feel alive.

Customize

TextPlanet

Surface

#c1532b

Dark terrain

#4e1e12

Atmosphere

#f2a57c

Atmosphere density0.6Craters0.6City lightsStars0.6Horizon0.62Speed1SunPin sunSun X0.5Sun Y0.5Sun follows pointer

Props

Prop	Type	Default	Description
`children`	`ReactNode`	—	Content layered above the background
`planet`	`'mars' \| 'jupiter' \| 'earth'`	`'mars'`	Which planet to render, 'mars', 'jupiter' or 'earth'; switches the surface shading and default palette
`color`	`string`	—	Main surface color (hex); the light zones on Jupiter, vegetation on Earth. Defaults to the planet palette
`terrainColor`	`string`	—	Dark terrain color (hex); the dark belts on Jupiter, the oceans on Earth. Defaults to the planet palette
`atmosphereColor`	`string`	—	Atmosphere scattering color (hex); grazing views reveal its complement. Defaults to the planet palette
`atmosphere`	`number`	—	Atmosphere density, 0 disables it. Defaults to the planet preset
`craters`	`number`	`0.6`	Crater count and depth, 0 disables them; Mars only
`cityLights`	`boolean`	`true`	Whether city lights glow on the night side; Earth only
`stars`	`number`	`0.6`	Star density, 0 disables them
`horizon`	`number`	`0.62`	Distance from the top of the container to the horizon crest, as a fraction
`speed`	`number`	`1`	Animation speed multiplier
`sun`	`boolean`	`false`	Whether to render the sun
`sunPosition`	`{ x: number; y: number }`	—	Fixed normalized position of the sun (0-1, origin top-left, x azimuth, y elevation); stops following the pointer
`interactive`	`boolean`	`true`	Whether the sun follows the pointer
`className`	`string`	—	Extra class name

Dependencies

WebGL