Aurora Background
ProAnimated aurora borealis gradient background with layered radial gradients and noise texture.
Backgrounds · primitive · basic · css · zero dependencies
Ship the hero,
not the CSS.
Three color stops and a wrapper. No canvas, no WebGL, no dependencies.
colors ember · speed slow · blur soft
Animated aurora borealis gradient background with layered radial gradients and noise texture.
- SaaS hero section background
- waitlist landing page ambiance
- login and signup page backdrop
- product launch page hero
- dark-mode marketing site header
| Prop | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | — | Content rendered above the aurora layers, e.g. a headline or CTA. |
className | string | — | Additional classes for the outer container — set width/height here. |
colors | [string, string, string] | ["#a78bfa", "#6366f1", "#8b5cf6"] | The three gradient colors used across the aurora layers. |
speed | "slow" | "default" | "fast" | "default" | Animation duration — maps to 12s, 8s, or 4s. |
blur | "soft" | "default" | "sharp" | "default" | Gradient blur radius — maps to 120px, 80px, or 40px. |
Does Aurora Background work with Next.js App Router?
Yes. It's a "use client" React component, so it works as a client component in the App Router and drops in unchanged in the Pages Router.
Are there any dependencies to install?
None. It's built entirely with layered CSS radial gradients and keyframe animations — no external packages required.
Is it responsive?
Yes. It fills whatever container you give it via flex layout, so it works full-bleed as a viewport hero or scoped to a smaller section with a fixed min-height.
Does it respect prefers-reduced-motion?
Not automatically. The aurora layers animate continuously with no reduced-motion media query built in. If you need to honor that preference, wrap the animation properties in your own @media (prefers-reduced-motion: reduce) override to freeze them.