Saturn Background for React

A ringed giant seen from close by: the planet's limb rises from the bottom of the box as a wide horizon, banded and lit from one side, with a soft haze of atmosphere along it. Its rings sweep across the sky above and dip behind the planet, a bright broad ring, a dark gap and fainter rings beyond, with glints and soft spokes travelling along them, and stars twinkle overhead. The planet, haze and rings are CSS gradients painted once and sized from the container, so the scene fills a card, a banner or a full page; only the glints and the stars move, with transforms and opacity the browser composites without repainting.

Put the headline in the sky, above the rings. For flat orbits with travelling bodies, use Orbits; for the Milky Way across the whole sky, Galaxy; for a moon framed by its corona, Eclipse.

Installation

Usage

import { Saturn } from "@/components/ui/saturn";

<Saturn className="flex min-h-[460px] flex-col items-center justify-start pt-20">
  <h1 className="text-5xl font-semibold">Mission to the rings</h1>
  <p>Seven years of flybys, now open as one public data set.</p>
</Saturn>

Saturn is a container: whatever you put inside sits on top of the scene, in normal flow. The planet fills the bottom third of the box and the rings cross just above it, so keep your copy in the top half. Give the container a height or content. For the whole page, render it empty with className="fixed inset-0 -z-10". On a light page it's a pale daylight scene, a soft blue sky over a sandy planet; on a dark page, deep space.

Demos

Tilt

tilt tips the rings, in degrees: positive raises them on the start side, negative on the end side, 0 keeps them level with the horizon. Here tilt={-14} with stars={60}, in a card.

Ice giant

planetColor sets the planet, and its bands, shadow and haze are mixed from it; ringColor sets the rings and their glints. The container's dark class and bg-background keep this scene in deep space in both colour schemes.

Accessibility

The scene 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 glints and the stars hold still, and the planet and rings stay as a still picture. Nothing flashes; the stars fade in and out over two seconds or more.

Keep text in the sky, in your foreground colour (text-foreground): the sky is your page's background lightly tinted, so it reads as it does anywhere else. The bright ring and the lit planet are mid-tones in both colour schemes, so keep text off them.

FAQ

API Reference