Aurora Background
A free animated aurora background for premium dark sections.
- Automated axe check
- Reduced-motion tested
- SSR build verified
- CSS and React
- No runtime packages
Aurora Background is a free animated background component for Next.js and React that drifts three oversized, heavily blurred gradient blobs behind your content. It is driven by plain CSS keyframes, styled with Tailwind, and renders as an absolutely positioned fill layer that you drop inside any relative container.
Every movement is a GPU-friendly transform, the blur is applied statically per layer, and a dithered noise overlay stops the gradients banding on dark screens. The layer is decorative and ignores pointer events, an IntersectionObserver pauses the drift while it is fully offscreen, and with prefers-reduced-motion enabled the blobs render as a static gradient wash with zero movement.
Template Empire
Light that drifts, content that holds still
Three blurred gradient blobs wander slowly behind this text while a static noise overlay keeps the falloff smooth on dark screens. The layer never intercepts a click, never moves the layout, and goes completely still when you prefer reduced motion.
Customise
Component settings update the preview and generated code together.
Appearance
Install
Add the @te registry to your components.json once:
{
"registries": {
"@te": "https://templateempire.io/r/{name}.json"
}
}Then install the component:
npx shadcn@latest add @te/bg-auroraUsage
import { BgAurora } from "@/components/bg-aurora";
export function Example() {
return (
<section className="relative overflow-hidden">
<BgAurora />
<div className="relative">
<h2 className="text-4xl font-semibold">Your content here</h2>
<p className="text-muted">The aurora drifts behind it.</p>
</div>
</section>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| className | string | undefined | Additional classes merged onto the root fill layer. |
Customisation
Aurora Background exposes four component tokens, declared in its registry item: --aurora-1, --aurora-2 and --aurora-3 for the three blob colours (defaulting to the brand and accent ramps) and --aurora-blur for the blur radius (defaulting to 90px). Override them from :root, or on any ancestor of the component, to retheme without touching the code:
:root {
--aurora-1: var(--color-accent-400);
--aurora-2: var(--color-brand-400);
--aurora-blur: 120px;
}Frequently asked questions
- Is Aurora Background free for commercial use?
- Yes. Aurora Background is MIT licensed, so you can use it in personal and commercial projects without attribution.
- Does Aurora Background affect performance or accessibility?
- The drift animates transforms only and the blur is applied statically per layer, so the browser compositor does the work. The loop pauses automatically while the component is fully offscreen. The layer is aria-hidden, never receives pointer events or focus, and with reduced motion enabled it renders completely static while staying fully visible.
- How do I change the aurora colours?
- Override the CSS custom properties --aurora-1, --aurora-2 and --aurora-3 from :root or any ancestor element. Each defaults to a token from the library colour system, and --aurora-blur controls how soft the blobs are.