ComponentsBackgrounds & EffectsAurora Background

Aurora Background

New

Ethereal aurora borealis effect with smooth color blending and gentle motion.

Preview

Aurora Background

Interactive preview — import this component to see it in action

IO Context

Where IO uses this

IO-UI home page hero. Creates atmospheric depth behind the headline.

Why this component matters

Motion with meaning. The aurora effect creates atmospheric depth without competing with content.

Usage guidance

Pair with large, light-weight typography (Inter 300) for maximum contrast. Never layer it under a busy interface — works best behind sparse, centered content.

Installation

bash

npx shadcn@latest add @aceternity/aurora-background

Usage

example.tsxtsx

import { AuroraBackground } from "@/components/ui/aurora-background";

export default function Example() {
  return (
    <AuroraBackground>
      {/* Your content here */}
    </AuroraBackground>
  );
}

Source

aurora-background.tsx

components/ui/aurora-background.tsx

View on GitHub

Related Components

Background Gradient Animation

Backgrounds & Effects

Wavy Background

Backgrounds & Effects

Sparkles

Backgrounds & Effects