Aurora background effect in React

To add an aurora background to a React app, install the free Aurora component and give it a height. It draws folded curtains of light over a night sky, live on the GPU, and renders your content on top:

npx shadcn@latest add https://gradients.sh/r/aurora.json

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

export function AuroraDemo() {
  return (
    <Aurora className="flex h-[360px] items-end p-8">
      <h2 className="text-3xl font-semibold tracking-tight text-white">
        Northern lights
      </h2>
    </Aurora>
  );
}

Most aurora effects you find are CSS: a few blurred radial gradients sliding around. Aurora is a shader instead. Each curtain sways and folds on its own, brighter at the hem and fading as it rises, and the whole thing loops seamlessly every 18 seconds by default. It isn't a video, so it stays sharp at any size.

1. Install

You need a React project with a components.json. Run npx shadcn@latest init first if you don't have one. Next.js, Vite, React Router and TanStack Start all work.

The CLI adds components/aurora.tsx, the shared components/gradient-surface.tsx and the engine in lib/gradient-engine/. The code is yours to read and edit.

2. Put it behind a section

Aurora is a div that fills its box with the gradient and puts its children on top. Give it a height and lay out the content as you would in any div:

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

export function LaunchSection() {
  return (
    <Aurora className="flex min-h-[520px] flex-col items-center justify-center px-6 text-center">
      <h2 className="text-5xl font-semibold tracking-tight text-white">
        Northern lights, no video
      </h2>
      <p className="mt-4 max-w-md text-white/75">
        A live aurora behind your headline, drawn on the GPU.
      </p>
    </Aurora>
  );
}

The component file starts with "use client", so a Next.js Server Component can import it. The server renders a CSS approximation of the aurora's colours, and the first GPU frame replaces it at the same size, so nothing shifts while the page loads.

As a full hero

For a landing page hero, Hero Background can draw the same aurora and adds centred content, a bottom edge that fades into the page and a little more pointer and scroll response:

import { HeroBackground } from "@/components/hero-background";

<HeroBackground kind="aurora">
  <h1 className="text-5xl font-semibold text-white">Ship your next launch</h1>
</HeroBackground>;

3. Change the colours

The defaults are a mint-to-violet aurora (#a0f0c8, #3fb5a3, #5147b6, #b25c9c) over a near-black sky (#03050b). Pass two to six colors and a background. Any CSS colour works, including your theme variables:

<Aurora
  className="h-[480px]"
  colors={["var(--primary)", "var(--chart-2)", "var(--chart-5)"]}
  background="oklch(0.14 0.02 264)"
>
  {children}
</Aurora>

An aurora reads best on a dark sky, so keep background dark even in light mode. When the class on <html> changes, the component re-reads the CSS variables, so a dark mode toggle updates the curtains along with the page. See Theming.

4. Tune the motion

Aurora's defaults, and what each prop does:

For a calm background behind body text, try speed={0.4} and interaction={{ pointer: 0, scroll: 0 }}. The Aurora props table lists everything. To find values by eye, open the editor, pick the aurora look, adjust it, and install exactly what you see.

Performance

• The first gradients.sh component costs about 50 KB of gzipped JavaScript, engine included. More components add a few KB each.
• The engine uses WebGPU where it's available and WebGL2 elsewhere. A browser with neither keeps the server-rendered CSS gradient.
• Gradients off screen or in a hidden tab stop drawing.
• The canvas renders at no more than 1.5× device pixels. For a full-screen aurora on slow phones, pass maxDpr={1}.
• Visitors who prefer reduced motion see one still frame.

Two or three moving gradients on one page stay well inside the budget. The technical FAQ has the limits.

Related

• Animated gradient background for shadcn/ui covers the mesh gradient and the hero in more depth.
• Animated gradient border puts a live gradient around a card instead of behind it.
• Export an animated gradient as a seamless MP4 loop turns the same aurora into a video for slides and edits.
• React libraries for animated gradient backgrounds, compared puts this next to React Bits' Aurora, Paper Shaders and ShaderGradient.