Aurora

Free · MIT

Soft colored light drifts slowly behind a section, with light and dark palettes and only transform animations for low CPU.

Markdown Open in v0

Open in v0

Installation

$ npx shadcn@latest add https://goodui.dev/r/aurora.json

The file lands in components/goodui/aurora.tsx and is yours to edit. With the @goodui registry added, npx shadcn@latest add @goodui/aurora works too.

Usage

import { Aurora } from "@/components/goodui/aurora"

export function SignupHero() {
  return (
    <section className="relative overflow-hidden rounded-3xl border px-6 py-24 text-center">
      <Aurora palette="brand" intensity={0.8} />
      <div className="relative">
        <h1 className="text-4xl font-semibold tracking-tight">Start taking bookings today</h1>
        <p className="mt-3 text-muted-foreground">14-day free trial. No card needed.</p>
      </div>
    </section>
  )
}

When to use

Use it for

Hero sections and sign-up pages that need color and calm motion behind the headline.
Behind glass UI (liquid-glass-button), which needs something colorful to blur.
Pricing or CTA banners that should follow the theme (palette="brand").

Reach for something else

Behind data-dense app screens: moving color behind numbers is distracting. Use a plain background or dot-grid.
A crisp, technical texture: use dot-grid or flickering-grid.
Text that needs a gradient: use gradient-text.

If you need	Use
Cool teal and violet	palette="aurora" (default)
Warm peach and pink	palette="sunset"
Calm blues	palette="ocean"
Follow the theme's chart colors	palette="brand"
Exact colors in both themes	colors={["#…", "#…", "#…", "#…"]}
Quieter	intensity={0.5} speed={0.6}

Examples

Sunset palette behind a glass toolbar

<div className="relative h-80 overflow-hidden rounded-2xl">
  <Aurora palette="sunset" speed={1.4} />
  <div className="absolute inset-x-0 top-6 flex justify-center">
    <LiquidGlassToolbar defaultValue="week" aria-label="Calendar range">
      <LiquidGlassToolbarItem value="day">Day</LiquidGlassToolbarItem>
      <LiquidGlassToolbarItem value="week">Week</LiquidGlassToolbarItem>
    </LiquidGlassToolbar>
  </div>
</div>

API reference

Prop	Type	Default
palette Theme-aware preset; "brand" mixes the theme's chart colors.	"aurora" \| "sunset" \| "ocean" \| "brand"	"aurora"
colors Custom colors for the four blobs (overrides the palette in both themes).	[string, string, string, string]	—
speed Speed multiplier; 1 is a slow drift.	number	1
intensity Blob opacity, 0–1.	number	0.9

Also accepts every <div> attribute.

The layer is aria-hidden and has pointer-events: none.
Light-mode palettes are pale and dark-mode palettes deep, so foreground text keeps its usual color on top. Check contrast yourself with custom colors or high intensity.

Motion

Four radial-gradient blobs drift, scale and alternate direction on ease-in-out loops of 18, 22, 26 and 20 s, divided by `speed`.
Only transform is animated; the blobs are soft gradients, not filter: blur.
It pauses while off-screen and while the tab is hidden.
Reduced motion: the blobs stay still; the colors remain.

CSS keyframes on four elements, transform only, so the compositor does the work and no JavaScript runs per frame.

Notes for AI

Coding agents read these rules through MCP and llms.txt, or paste this page with Copy page.

Place it inside a relative overflow-hidden parent; it fills it with absolute inset-0. Give the content after it position: relative.
colors must be exactly four CSS colors and replaces the palette in both light and dark.
speed is a multiplier (2 is twice as fast); intensity is blob opacity from 0 to 1.
The "brand" palette mixes --chart-1, --chart-2, --chart-4 and --chart-5 with the background, so it follows the theme.

FAQ

Does it change between light and dark?

Yes. Every preset has a pale light-mode set and a deeper dark-mode set. Custom colors are used in both.

Can I make it static?

There is no off switch for the motion besides reduced motion; for a still look use a very low speed, or a CSS gradient background.

Dot grid

A dot or line grid background with a radial, top or edge fade and an optional glow that follows the pointer. Pure CSS.

Particles

Canvas particles drift gently, link up with fine lines and move out of the pointer's way; density scales with the area.

Gradient text

Text filled with a slowly drifting multi-stop gradient, with Aurora, Sunset, Ocean and theme palettes tuned separately for light and dark.

Liquid glass button

Frosted glass button and pill toolbar with backdrop blur, rim light and a specular highlight that follows the pointer, falling back to a solid tint without backdrop-filter.