Planet Shader for React

Planet Shader draws a lit ocean world rising from the lower right of the box. Ochre continents sit on a deep blue ocean under drifting bands of cloud; the sun comes from the upper left, so a crisp terminator crosses the planet, warm city lights speckle the night side, and a thin blue atmosphere glows brightest on the lit edge, over sparse stars. The planet is an analytic sphere, with no mesh: a WGSL fragment shader on WebGPU finds the surface under each pixel, builds land, sea and cloud from 3D simplex noise on it, and lights it, every frame, as it slowly turns.

Use it behind a space, telecom, travel or global SaaS hero, or as a curved horizon under a headline. For a dotted globe in plain CSS, use the Sphere background; for a ringed giant, Saturn; for a whole galaxy instead of one world, Spiral Galaxy Shader. It runs only while it's on screen, holds a still frame with reduced motion, and shows a CSS disc with its rim in browsers without WebGPU.

Installation

Usage

import { PlanetShader } from "@/components/ui/planet-shader";

<PlanetShader className="flex min-h-[32rem] items-start p-12">
  <h1 className="text-5xl font-semibold text-white">Connect the world</h1>
</PlanetShader>

Planet Shader is a container: your content sits on top of the scene, in normal flow. It fills its own box, so give it a height or content. For a backdrop behind the whole page, render it empty with className="fixed inset-0 -z-10". Space is near-black in both color schemes, so put white or light text over it, in the upper left, away from the planet.

position sets where the planet sits: "bottom-right" (the default) rises from the lower right corner, "center" shows the whole world in the middle of the box, and "horizon" draws it much larger, so its edge is a gentle curve along the bottom. size scales it, from 0.5 to 2: at the lower right, its radius is that many box heights.

Demos

Horizon

position="horizon" puts the planet's edge along the bottom of the box, like the view from orbit, and leaves the top two thirds to space and your headline.

In a card

size={0.6} makes the planet small enough to show most of its upper half in a card, with the terminator and the night side's lights in view.

Performance

About 0.55 ms of GPU time a frame at 1280×720 on an M2 Max laptop, at the default size and position; slower GPUs take several times longer. Only the pixels the planet covers compute land, sea and clouds, so a larger planet costs more, up to about 1.3 ms when it fills the box. It keeps quality={1} by default, for sharp coasts and city lights; quality={0.5} renders a quarter of the pixels and softens them slightly. The animation stops when the shader scrolls out of view, and the browser pauses it in a hidden tab. Every shader on a page shares one GPU device and one frame loop, and vgpu (about 50 KB gzipped) loads only when the first one mounts.

Browser support

The shader needs WebGPU: Chrome and Edge, Safari 26 and later, and Firefox on Windows and macOS. Elsewhere, and until the first frame, the box shows a CSS disc in the ocean color with a blue rim and a shaded night side, at the same position, so the layout never jumps. data-state on the root reads unsupported there, if you want to style around it. See Shader Canvas.

Accessibility

The planet is decoration: it's hidden from assistive tech and lets every click through to your content. With reduced motion it draws one still frame and stops. Nothing flashes: the planet turns once every three minutes, and the clouds drift with it. In the space above the planet, white text reads at about 20:1. Over the planet itself it drops to under 6:1 on a quarter of it and to about 3:1 on the lit clouds, so keep text in the upper left, or use position="horizon" for more room.

FAQ

API Reference