Aurora Background

A flowing aurora background — large blurred color blobs drift slowly via transform, with optional grain overlay and mouse tracking.

Loading preview…

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

Playground

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

Follow cursorinteractive

Noise overlaygrain

<AuroraBackground />

Installation

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

Or, once registries are configured in components.json, install it as @webberui/aurora-background.

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>

Props

Prop	Type	Default	Description
`colors`	`string[]`	Cool-toned aurora palette	Three aurora gradient colors, mapped in order to the three blobs
`interactive`	`boolean`	`false`	Blobs follow the mouse slightly (mouse pointers only; touch has no effect)
`grain`	`boolean`	`false`	Overlays low-opacity grain to reduce banding across large gradients
`children`	`React.ReactNode`	—	Foreground content, layered above the aurora
`className`	`string`	—	Appended to the outermost container's className

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