# Aurora Background

> Slowly drifting aurora gradient background with configurable colors and speed.

- Author: Atelier UI
- License: MIT
- Page: https://chromotion.dev/en/components/aurora-background
- Site: Atelier UI (https://chromotion.dev)

## Install

```bash
npx shadcn@latest add https://chromotion.dev/r/aurora-background.json
```

Stack: React + TypeScript + Tailwind CSS v4, shadcn/ui conventions. `cn` comes from `@/lib/utils`.

## Dependencies

No extra dependencies.

## Usage

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

export default function AuroraBackgroundDemo() {
  return (
    <AuroraBackground className="flex min-h-svh flex-col items-center justify-center px-6 text-center">
      <h1 className="text-4xl font-semibold tracking-tight sm:text-6xl">Northern lights</h1>
      <p className="mt-4 max-w-md text-muted-foreground">
        A calm, drifting gradient for hero sections and empty states.
      </p>
    </AuroraBackground>
  )
}
```

## Source

```tsx title="components/aurora-background.tsx"
import * as React from "react"

import { cn } from "@/lib/utils"

const keyframes = `@keyframes aurora-drift{0%{transform:translate3d(-12%,-8%,0) rotate(0deg) scale(1)}50%{transform:translate3d(10%,6%,0) rotate(25deg) scale(1.15)}100%{transform:translate3d(-12%,-8%,0) rotate(0deg) scale(1)}}`

export interface AuroraBackgroundProps extends React.ComponentProps<"div"> {
  /** Up to four blob colors */
  colors?: string[]
  /** Seconds per drift cycle; lower is faster */
  speed?: number
  /** Blob opacity, 0–1 */
  intensity?: number
}

const positions = [
  "left-[-10%] top-[-20%] h-[70%] w-[60%]",
  "right-[-15%] top-[10%] h-[65%] w-[55%]",
  "bottom-[-25%] left-[20%] h-[70%] w-[60%]",
  "bottom-[-10%] right-[5%] h-[50%] w-[40%]",
]

export function AuroraBackground({
  colors = ["#f97316", "#a855f7", "#06b6d4"],
  speed = 18,
  intensity = 0.55,
  className,
  children,
  ...props
}: AuroraBackgroundProps) {
  return (
    <div
      className={cn("relative isolate overflow-hidden bg-background text-foreground", className)}
      {...props}
    >
      <style href="aurora-background" precedence="default">
        {keyframes}
      </style>
      <div aria-hidden className="pointer-events-none absolute inset-0 -z-10">
        {colors.slice(0, 4).map((color, i) => (
          <div
            key={i}
            className={cn("absolute rounded-full blur-[80px]", positions[i])}
            style={{
              background: `radial-gradient(circle at center, ${color}, transparent 65%)`,
              opacity: intensity,
              animation: `aurora-drift ${speed + i * 4}s ease-in-out ${-i * 3}s infinite`,
            }}
          />
        ))}
        <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_center,transparent_40%,var(--background)_100%)]" />
      </div>
      {children}
    </div>
  )
}
```