Supernova Background for React

Supernova shows what's left long after a star explodes: a vast shell of glowing filaments, rose braids at the rim with patchy gas along them, teal wisps inside and a hot core up in the corner, larger than the box, over a field of stars. The shell keeps growing, two sets of filaments grow and cross-fade in turn so it never jumps back; soft shock waves run out from the core, one always in flight; and the core pulses gently. The filaments are a drawing the browser rasterises once, and everything moves by scale and opacity, with no canvas and no script. It's ink on paper on a light page and deep space on a dark one.

Use it on launch or announcement heroes, and on pages that should feel vast. For clouds of coloured gas use Nebula; for flying through stars, Starfield; for celebration, with falling trails, Fireworks.

Installation

Usage

import { Supernova } from "@/components/ui/supernova";

<Supernova className="flex min-h-[440px] items-center justify-center">
  <h1 className="text-5xl font-semibold">Launch day</h1>
</Supernova>

Supernova is a container: whatever you put inside sits on top of the sky, in normal flow. The remnant's core sits in the top corner on the end side (top left on a right-to-left page) and its rim sweeps across the box, sized from the box's diagonal, so it frames a card as well as a hero. For the whole page, render it empty with className="fixed inset-0 -z-10".

Demos

In a card

intensity="subtle" dims the remnant so a block of text can sit on top, and stars sets how many stars fill the sky.

Colors

colors takes up to four colours: the rim, the knots between, the wisps inside, and the core with its shock waves. The container's dark class and bg-background keep this scene dark in both colour schemes.

Accessibility

The sky is decorative: it's hidden from screen readers and never takes the pointer, and your content stays on top in normal flow. Nothing flashes: the shells fade in and out over 40 seconds, the shock waves over 14, and the core's pulse is a gentle swell every 7 seconds. With reduced motion nothing moves: the remnant holds still, a shell and a shock wave mid-way out.

Keep text in your foreground colour. The interior of the shell is a soft wash, so a centred headline keeps its contrast in both themes; the core's glow is brightest, so keep small text away from the top corner on the end side, or use intensity="subtle".

FAQ

API Reference