Aurora Background for React

Soft curtains of green light drift across the top of the box, like the northern lights, and fade out toward the opposite corner, so the copy on top stays easy to read. Two layers of tilted color bands slide past each other in opposite directions, each by exactly one stripe, so the loop never jumps. They move with CSS transforms, which the browser composites without repainting, and there's no blur filter and no script: it's markup and CSS keyframes the install adds to your stylesheet.

Use it behind a hero, a sign-up section or a launch card. For calm color blobs instead of bands, use Mesh Gradient; for bands that flow as waves, Light Waves; for a night sky, Starfield. With reduced motion the curtains stand still.

Installation

Usage

import { Aurora } from "@/components/ui/aurora";

<Aurora className="flex min-h-[32rem] items-center justify-center">
  <h1 className="text-5xl font-semibold">Ship faster</h1>
</Aurora>

Aurora is a container: whatever you put inside sits on top of the light, 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".

Demos

Colors

colors takes up to five CSS colors, repeated when there are fewer; here violet, cyan and pink. The surface is the root's own background, bg-background by default, and nothing in the light depends on it, so a className such as bg-slate-950 gives it a night sky.

In a card

fade={false} fills the whole box instead of fading from the corner, intensity="subtle" pales it, and speed={2} drifts twice as fast. The stripes scale with the box, so the light works at card size too.

Accessibility

The light is decoration: it's hidden from assistive tech and lets every click through to your content. With reduced motion both layers stop where they are, and a still aurora stays. Nothing flashes.

Put copy over it in your foreground color (text-foreground), the supporting lines too. The brightest curtain behind the text keeps it above 4.5:1 at the default intensity in both color schemes, but a muted color falls to about 2:1 on a dark surface, and intensity="strong" on a dark surface brings even the foreground color down to about 3.4:1, so keep small text off it there.

FAQ

API Reference