FX · Backgrounds

AuroraBackdrop

Soft drifting colour glow behind any content. Decorative only, pauses offscreen, and stays still under reduced motion.

Build something bright

Installation

bash
npx shadcn@latest add https://www.rad-ui.com/r/aurora-backdrop.json

Usage

React
import AuroraBackdrop from "@/components/fx/aurora-backdrop"

<AuroraBackdrop className="rounded-2xl px-8 py-24">
    <h1>Build something bright</h1>
</AuroraBackdrop>

Pause control

React
const [paused, setPaused] = useState(false)

<AuroraBackdrop paused={paused}>
    <button aria-pressed={paused} onClick={() => setPaused(p => !p)}>
        {paused ? "Play background" : "Pause background"}
    </button>
</AuroraBackdrop>

Accessibility contract

The glow layer is aria-hidden and ignores pointer events; only children are exposed.
prefers-reduced-motion: reduce keeps the colours but stops the drift.
The drift pauses automatically offscreen. If it runs behind content for long, give users a visible pause control wired to the `paused` prop (WCAG 2.2.2).
Check text contrast over the brightest part of the glow.

API Documentation

Prop	Type	Default	Description
colors	string[]	indigo, purple, cyan, pink	Up to four colours for the glow.
speed	number	10	Seconds per drift cycle. Higher is calmer.
blur	number	64	Blur radius in px.
intensity	number	0.5	Opacity of the glow, 0–1.
paused	boolean	false	Stop the animation. It also pauses itself offscreen.
...props	ComponentProps<'div'>	—	Passed to the root div; children render above the effect.