Galaxy Background for React

The Milky Way crosses the box from corner to corner: a band of soft light with a warm bulge glowing along it, split by dark lanes of dust and crowded with stars, while more stars are scattered across the rest of the sky and some of them twinkle. The clouds and the band's stars drift slowly along the band at two speeds, so the near stars pass the far dust, each by exactly one box length per loop, so it never jumps. The glow is CSS gradients and a fine grain painted once, the stars are placed by a fixed seed, and the drift is a transform the browser composites without repainting. On a light page it reads like an ink drawing of the sky on paper; on a dark page, deep space.

Use it behind space, science or research headlines. For colour clouds without the band, use Nebula; for a ringed planet's horizon, Saturn; for flying through the stars instead of watching them drift, Starfield.

Installation

Usage

import { Galaxy } from "@/components/ui/galaxy";

<Galaxy className="flex min-h-[440px] flex-col items-center justify-center">
  <h1 className="text-5xl font-semibold">Explore the deep sky</h1>
</Galaxy>

Galaxy is a container: whatever you put inside sits on top of the sky, in normal flow. The band follows the container's diagonal, from the bottom corner on the start side to the top corner on the end side, and its thickness follows the shorter side, so it crosses a card, a banner or a full page the same way. Give the container a height or content. For the whole page, render it empty with className="fixed inset-0 -z-10".

Demos

In a card

count={400} thins the band's stars, intensity="subtle" pales the glow and speed={2} drifts twice as fast. The band scales with the box, so it still runs corner to corner.

Ice

coreColor and dustColor take any CSS colour: here a cyan bulge in a violet band, at intensity="strong". The container's dark class and bg-background keep this scene dark in both colour schemes.

Accessibility

The galaxy is decorative: it's hidden from screen readers and never takes the pointer, and your content stays on top in normal flow. With reduced motion the band stops drifting and the stars stop twinkling, so a still sky stays. Nothing flashes; the twinkling stars fade over three seconds or more.

Text in your foreground colour (text-foreground) reads across the whole box at the default intensity, the band included: on a dark page the glow stays a mid-dark tone, and on a light page it's a pale grey wash. At intensity="strong" the bulge brightens, so keep small text off it there.

FAQ

API Reference