Aurora Background

Soft aurora blobs with slow motion. Supports auto, dark, and light variants.

Aurora (transparent + card surface)

Installation

Requires MotionProvider and gsap. Add the aurora background component with the shadcn CLI.

npx shadcn@latest add https://yami.ui.unsanity.ai/r/aurora-background.json

Usage

import { AuroraBackground } from "@/void/background/aurora-background"

<AuroraBackground variant="auto" mode="always" className="min-h-[400px] rounded-xl border bg-card/80">
  <div className="relative z-10 p-8">Content</div>
</AuroraBackground>

Examples

Dark surface

Transparent fill — glow sits on your own dark surface.

Dark surface

Code

<AuroraBackground variant="dark" mode="always" className="min-h-[400px] rounded-xl border bg-zinc-950/90">
  <div className="relative z-10 p-8 text-white/90">Hero</div>
</AuroraBackground>

Light surface

Transparent fill — glow on a light card, not flat gray.

Light surface

Code

<AuroraBackground variant="light" mode="always" className="min-h-[400px] rounded-xl border bg-white/90">
  <div className="relative z-10 p-8 text-foreground">Hero</div>
</AuroraBackground>