# Aurora Background — Animated React Background

> Slow drifting colour ribbons behind your content, built from blurred gradients with no canvas.

- Category: [Backgrounds](https://pixelpapa.com/components/backgrounds.md)
- Tags: background, aurora, gradient, ambient
- Dependencies: none (plus React and Tailwind CSS v4)
- Last updated: 2026-11-13
- Live preview: https://pixelpapa.com/components/backgrounds/aurora-background

## Install

```bash
npx shadcn@latest add "https://pixelpapa.com/r/aurora-background.json"
```

The file is written to `components/pixelpapa/aurora-background.tsx`. To install manually, copy the source below into your project. It imports `cn` from `@/lib/utils`, which every shadcn project has.

## Source

```tsx
"use client";

import type { CSSProperties, ReactNode } from "react";
import { cn } from "@/lib/utils";

type AuroraBackgroundProps = {
  children?: ReactNode;
  className?: string;
  /** Any CSS colours. Defaults follow the theme's primary and chart tokens. */
  colors?: [string, string, string];
  /** Seconds for one full drift cycle. */
  speed?: number;
};

export function AuroraBackground({
  children,
  className,
  colors = ["var(--primary)", "var(--chart-2)", "var(--chart-3)"],
  speed = 18,
}: AuroraBackgroundProps) {
  const ribbons = [
    { color: colors[0], className: "left-[-10%] top-[-30%] h-[70%] w-[70%]", delay: 0 },
    { color: colors[1], className: "right-[-15%] top-[-10%] h-[65%] w-[60%]", delay: -speed / 3 },
    { color: colors[2], className: "bottom-[-35%] left-[20%] h-[70%] w-[65%]", delay: (-speed * 2) / 3 },
  ];

  return (
    <div className={cn("relative isolate overflow-hidden bg-background", className)}>
      <style>{`
        @keyframes pp-aurora-drift {
          0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
          33% { transform: translate3d(8%, 6%, 0) rotate(18deg) scale(1.12); }
          66% { transform: translate3d(-6%, 10%, 0) rotate(-12deg) scale(0.94); }
        }
      `}</style>
      <div aria-hidden className="pointer-events-none absolute inset-0 -z-10 opacity-60 dark:opacity-45">
        {ribbons.map((r, i) => (
          <div
            key={i}
            className={cn("absolute rounded-[50%] blur-[90px] motion-reduce:animate-none", r.className)}
            style={
              {
                background: r.color,
                animation: `pp-aurora-drift ${speed}s ease-in-out ${r.delay}s infinite`,
              } as CSSProperties
            }
          />
        ))}
      </div>
      {/* Fine grain keeps the gradients from banding. */}
      <div
        aria-hidden
        className="pointer-events-none absolute inset-0 -z-10 opacity-[0.12] mix-blend-overlay"
        style={{
          backgroundImage:
            "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E\")",
        }}
      />
      {children}
    </div>
  );
}

export default function AuroraBackgroundDemo() {
  return (
    <AuroraBackground className="flex min-h-screen w-full items-center justify-center">
      <div className="px-6 text-center">
        <p className="text-xs font-medium uppercase tracking-[0.2em] text-muted-foreground">Ambient</p>
        <h2 className="mt-4 text-5xl font-semibold tracking-tight text-foreground sm:text-6xl">
          Light that never sits still
        </h2>
        <p className="mx-auto mt-4 max-w-md text-muted-foreground">
          Three blurred ribbons on a slow loop. Pass your own colours or let the theme decide.
        </p>
      </div>
    </AuroraBackground>
  );
}
```

## AI prompt

```text
Add the "Aurora Background" component from PixelPapa UI to this project.

What it is: Slow drifting colour ribbons behind your content, built from blurred gradients with no canvas.
Category: Backgrounds. Depends on: no extra packages.

1. Install it with the shadcn CLI:
   npx shadcn@latest add "https://pixelpapa.com/r/aurora-background.json"
   (If the CLI is unavailable, fetch that URL, write files[0].content to components/pixelpapa/aurora-background.tsx and install the listed dependencies.)
2. Import it from "@/components/pixelpapa/aurora-background" and place it where I describe below.
3. Keep its animation timings and accessibility attributes. Replace the demo copy and data with content that fits my product, and use my existing theme tokens (bg-background, text-foreground, bg-primary, border-border) rather than hard-coded colours.

Where to use it: <describe the page and position here>
```

## More backgrounds

- [Animated Grid Lines](https://pixelpapa.com/components/backgrounds/bg-animated-grid-lines.md) (Pro): A perspective floor of grid lines that scrolls toward the viewer forever, with light pulses racing down a few of the lines.
- [Beams Light Rays](https://pixelpapa.com/components/backgrounds/bg-beams-light-rays.md) (Pro): Soft light rays fan out from above and sway a few degrees while breathing in brightness, with dust motes drifting through them.
- [Dot Grid Spotlight](https://pixelpapa.com/components/backgrounds/bg-dot-grid-spotlight.md) (Pro): A quiet dot grid where a soft light trails the cursor and swells the dots it passes over; it wanders on its own when idle.
- [Flow Field](https://pixelpapa.com/components/backgrounds/bg-flow-field.md) (Pro): Hundreds of canvas particles ride a slowly shifting vector field and leave fading silk trails in your theme colours.
- [Gradient Mesh Blobs](https://pixelpapa.com/components/backgrounds/bg-gradient-mesh-blobs.md): Five saturated blobs wander on separate looping paths and melt into a mesh gradient, while one extra blob follows the cursor on a spring.
- [Hex Tiles Hover](https://pixelpapa.com/components/backgrounds/bg-hex-tiles-hover.md) (Pro): A canvas honeycomb (or square grid) where the tile under the cursor lights up, spills into its neighbours and slowly cools, with stray tiles sparking while idle.