Aurora Background

Aurora Background is a React aurora background component built with Tailwind CSS and Motion. Three large blurred radial-gradient blobs drift slowly using transforms, with no canvas or WebGL, and your foreground content goes in children.

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

<AuroraBackground/>

    </div>
  );
}

When to use

• Hero sections on SaaS or AI product homepages, adding a soft animated layer behind the headline and CTA.
• Full-page backgrounds for sign-in and sign-up pages, with the form card floating above.
• The main visual area of a product launch or event registration page.
• Backgrounds for pricing or CTA sections, using brand colors to set the section apart.

Installation

npx webberui@latest add https://webberui.com/r/aurora-background.en.json

Usage

Put your foreground content in children, and write the layout (centering, height) on className:

import { AuroraBackground } from "@/components/ui/aurora-background";

<AuroraBackground className="flex min-h-[400px] items-center justify-center">
  <h1 className="text-4xl font-bold">Hero heading</h1>
</AuroraBackground>

Custom colors, with grain and mouse tracking enabled:

<AuroraBackground
  colors={["#f472b6", "#a78bfa", "#38bdf8"]}
  grain
  interactive
  className="flex h-[320px] items-center justify-center rounded-2xl"
>
  <p className="text-lg">Warm-toned aurora</p>
</AuroraBackground>

Examples

Full-screen hero

Put the height and centering on className and keep the foreground as regular text and buttons.

import { AuroraBackground } from "@/components/ui/aurora-background";

export default function HomePage() {
  return (
    <AuroraBackground className="flex min-h-svh flex-col items-center justify-center px-6 text-center">
      <h1 className="text-4xl font-semibold tracking-tight md:text-6xl">Turn support threads into a task list</h1>
      <p className="mt-4 max-w-xl text-neutral-600 dark:text-neutral-300">
        Connect your inbox and forms, sort issues automatically and assign them to the right teammate.
      </p>
      <a href="/signup" className="mt-8 rounded-full bg-neutral-900 px-6 py-3 text-sm text-white dark:bg-white dark:text-neutral-900">
        Create a free workspace
      </a>
    </AuroraBackground>
  );
}

Dark brand palette

The base color comes from the container's bg-neutral-50 dark:bg-neutral-950, which you can override through className thanks to cn (tailwind-merge). colors maps to the three blobs in order.

<AuroraBackground
  colors={["#f97316", "#e11d48", "#7c3aed"]}
  grain
  className="flex h-[480px] items-center justify-center bg-zinc-950 text-white dark:bg-zinc-950"
>
  <h2 className="text-3xl font-semibold">Annual product keynote</h2>
</AuroraBackground>

Sign-in page background

Turn on interactive so the blobs follow the mouse slightly, and place the form in a translucent card.

<AuroraBackground interactive className="flex min-h-svh items-center justify-center p-4">
  <form className="w-full max-w-sm rounded-2xl border border-white/40 bg-white/70 p-6 backdrop-blur dark:bg-neutral-900/70">
    <h1 className="text-lg font-medium">Sign in</h1>
    {/* form fields */}
  </form>
</AuroraBackground>

Props

How it works

• Performance: transform only. All three blobs drift via x / y / scale, never touching top / left, so neither layout nor paint is triggered; will-change is managed automatically by Motion during the animation, so you never set it by hand
• Each blob has its own period (17s / 23s / 19s) paired with repeat: Infinity + repeatType: "mirror", travelling back and forth between origin and target. The three never sync up, which is what makes the motion read as natural flow
• The blobs are blur-3xl radial-gradient circles — the blur is composited once by the GPU and then translated by transform, so its cost is fixed and does not accumulate over the animation
• The whole background layer is pointer-events-none and sits at -z-10 beneath the content (the container has isolate to create its own stacking context), so foreground interaction is completely unaffected
• With interactive on, the cursor position is normalized to -1 ~ 1, smoothed through a low-stiffness useSpring, then multiplied by a different depth amount per blob (including negative values) to produce a subtle parallax; it only applies when pointerType === "mouse"
• The grain is a data URI of an inline feTurbulence SVG — no extra network request — tiled at 180px and layered over the blobs at low opacity
• When the user has "reduce motion" enabled at the system level, both the drift and the mouse tracking are disabled and the blobs render as static gradients, with no change to the DOM structure

FAQ

Does it work with the Next.js App Router?

Yes. The source starts with "use client", so import it from a Server Component page; children can still be server-rendered content. The first render matches the SSR output, and the static version for reduced motion is applied only after mount.

Does it affect performance?

The blobs only animate the x, y and scale transforms, so they do not trigger layout; the blur comes from blur-3xl. The animation is an infinite Motion loop, and the component has no logic to pause it when it is offscreen.

Can I change the colors or speed?

Pass three colors with colors and override the base color with className. The drift periods of the three blobs (17, 23 and 19 seconds) live in the BLOBS constant in the source with no matching prop, so edit the source to change the speed.

Does mouse following work on phones?

No. interactive only updates when the pointerType is a mouse, so touch does not move the blobs; they return to rest when the pointer leaves the container.

What happens with reduced motion?

Drift and mouse following are turned off and the blobs render as static gradients. The background layer has aria-hidden and pointer-events-none, so it never interferes with clicks or screen reader output for your content.