Spiral Galaxy Shader for React

Spiral Galaxy Shader draws a grand-design spiral galaxy, tilted 60° away from you across the box: a warm golden bulge, two blue-white arms threaded with dark dust lanes along their inner edges, pink star-forming knots where the arms are densest, and a halo of faint stars on black-indigo. A WGSL fragment shader on WebGPU un-tilts each pixel into the galaxy's own plane and computes it there: the arms are a logarithmic spiral density wave, the dust is fractal simplex noise, the knots are Voronoi cells, and a filmic curve maps the light. The arms turn slowly as one pattern while the dust turns faster near the centre, as in a real galaxy, but it never winds up.

Use it behind an astronomy, science or education hero, or an AI "universe of data" landing page. For the Milky Way band seen from inside, use the Galaxy background; for gas clouds instead of a galaxy, Nebula Shader; for a single world, Planet Shader. It runs only while it's on screen, holds a still frame with reduced motion, and shows a CSS glow of the same colors in browsers without WebGPU.

Installation

Usage

import {
  SpiralGalaxyShader,
} from "@/components/ui/spiral-galaxy-shader";

<SpiralGalaxyShader className="flex min-h-[32rem] flex-col justify-between p-12">
  <h1 className="text-5xl font-semibold text-white">Map the universe</h1>
  <p className="text-white/80">Every star, one query away.</p>
</SpiralGalaxyShader>

Spiral Galaxy Shader is a container: your content sits on top of the galaxy, 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". The galaxy sits in the middle of the box on near-black, in both color schemes, so put white or light text above and below it rather than over the bright bulge.

The galaxy scales to fit its box at any tilt. armColor, coreColor, knotColor and dustColor take any CSS color and follow a theme switch.

Demos

Three arms

arms={3} gives the galaxy three arms, twist={1.4} winds them tighter, and tilt={45} leans the disc less, so more of the spiral shows.

Face-on, in a card

tilt={0} shows the galaxy face-on, a round spiral that suits a square or tall card.

Performance

About 0.95 ms of GPU time a frame at 1280×720 on an M2 Max laptop; slower GPUs take several times longer. It keeps quality={1} by default, for crisp knots and stars; quality={0.5} renders a quarter of the pixels and softens them. 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 glow, a golden core in a blue haze tilted like the galaxy, 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 galaxy 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 galaxy turns once every three and a half minutes. White text reads at about 17:1 or better on three quarters of the box, and above 5:1 on 95% of it. Over the bulge it drops to about 3:1, so keep text above and below the galaxy, or lower intensity.

FAQ

API Reference