# Aurora background

> Slow drifting northern-lights glow behind any section.

Component · Pro · https://lodeui.com/components/aurora-background

## When to use

- Hero sections, pricing headers and empty states that need atmosphere.

## When not to use

- Behind dense data or long text: it lowers contrast.
- More than one per page.

## Installation

```bash
npx shadcn@latest add @lode/aurora-background
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion

## Usage

```tsx title="example.tsx"
import { AuroraBackground } from "@/components/ui/aurora-background";

export function Hero() {
  return (
    <AuroraBackground className="rounded-3xl">
      <div className="px-6 py-24 text-center">…</div>
    </AuroraBackground>
  );
}
```

## API reference

### AuroraBackground

A container with drifting blurred color fields behind its children. Accepts any div attributes.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| colors | `string[]` | `lime, cyan, violet, pink` | Up to four colors. |
| intensity | `number` | `0.55` | Overall opacity, 0–1. |
| speed | `number` | `18` | Seconds per drift cycle; larger is calmer. |
| fadeBottom | `boolean` | `true` | Fade the glow toward the bottom edge. |

## Accessibility

- The glow is aria-hidden and sits behind content.
- Static under reduced motion.
- Check text contrast over the brightest color.

## Motion

- Each field drifts and breathes on its own mirrored loop, offset by 3 seconds.

## Responsive behavior

- Fills its container at any size.

## Performance

- Four blurred, transform-only layers; GPU composited.

## Notes for AI

- Use theme-friendly colors; the glow sits on var(--background).

## Related

- [Spotlight card](https://lodeui.com/components/spotlight-card) — A card lit by a spotlight that follows the pointer, border included.
- [Border beam](https://lodeui.com/components/border-beam) — A light that travels around an element's border.
- [Orbiting circles](https://lodeui.com/components/orbiting-circles) — Icons orbiting a center on rings, staying upright as they travel.