ComponentsAuroraBackground

AuroraBackground

Add soft, flowing bands of color behind your content.

On this page

Installation

Use this component from the local workspace package. Follow the setup guide first. A public npm package and registry are not available yet.

View registry files

Usage

Import the component into your page or component file.

Usage

import { AuroraBackground } from "@dethink/components";

Examples

Try the examples, then open the code to use them in your app. The background fills its container; these previews bound it with a height utility.

Hero composition

The default primary tone. Ribbons drift on mirrored loops at seeded offsets, each slot hue-rotated from the tone token.

Northern lights included

Soft light for bold launches

Flowing ribbons of blurred, hue-shifted gradient light drift and breathe behind your hero — every hue derived from one tone token.

Show sourceexamples/aurora-background/basic.tsx

examples/aurora-background/basic.tsx

"use client";

import { Badge, Button, AuroraBackground } from "@dethink/components";

export function AuroraBackgroundBasic() {
  return (
    <AuroraBackground
      className="border-border h-[24rem] rounded-lg border"
      tone="primary"
    >
      <div className="flex h-[24rem] flex-col items-center justify-center gap-4 px-6 text-center">
        <Badge tone="primary" variant="soft">
          Northern lights included
        </Badge>
        <h2 className="text-foreground max-w-xl text-3xl font-semibold tracking-tight">
          Soft light for bold launches
        </h2>
        <p className="text-muted-foreground max-w-md text-sm leading-6">
          Flowing ribbons of blurred, hue-shifted gradient light drift and
          breathe behind your hero — every hue derived from one tone token.
        </p>
        <div className="flex gap-3">
          <Button>Get started</Button>
          <Button variant="outline">View docs</Button>
        </div>
      </div>
    </AuroraBackground>
  );
}

Tones, densities, intensities, and speeds

Every visual axis is a literal token-backed variant. Density sets the ribbon count, intensity the opacity tier, speed the drift cycle, and tone the base color every hue derives from.

tone="primary" · dense · fast

intensity="bold" · slow drift

tone="muted" · quiet ambient wash

tone="foreground" · sparse · faint

Show sourceexamples/aurora-background/variants.tsx

examples/aurora-background/variants.tsx

"use client";

import { AuroraBackground } from "@dethink/components";

export function AuroraBackgroundVariants() {
  return (
    <div className="grid gap-4 sm:grid-cols-2">
      <AuroraBackground
        className="border-border h-48 rounded-lg border"
        density="dense"
        seed={3}
        speed="fast"
        tone="primary"
      >
        <div className="flex h-48 items-end p-4">
          <span className="text-muted-foreground text-xs font-medium">
            tone=&quot;primary&quot; · dense · fast
          </span>
        </div>
      </AuroraBackground>
      <AuroraBackground
        className="border-border h-48 rounded-lg border"
        intensity="bold"
        seed={7}
        speed="slow"
        tone="primary"
      >
        <div className="flex h-48 items-end p-4">
          <span className="text-muted-foreground text-xs font-medium">
            intensity=&quot;bold&quot; · slow drift
          </span>
        </div>
      </AuroraBackground>
      <AuroraBackground
        className="border-border h-48 rounded-lg border"
        seed={5}
        tone="muted"
      >
        <div className="flex h-48 items-end p-4">
          <span className="text-muted-foreground text-xs font-medium">
            tone=&quot;muted&quot; · quiet ambient wash
          </span>
        </div>
      </AuroraBackground>
      <AuroraBackground
        className="border-border h-48 rounded-lg border"
        density="sparse"
        intensity="faint"
        seed={9}
        tone="foreground"
      >
        <div className="flex h-48 items-end p-4">
          <span className="text-muted-foreground text-xs font-medium">
            tone=&quot;foreground&quot; · sparse · faint
          </span>
        </div>
      </AuroraBackground>
    </div>
  );
}

Static frame

animate={false} — and any user with a reduced-motion preference — gets this composition: every ribbon frozen at its seeded offset, still designed.

Designed at rest

animate={false} renders the same frame reduced-motion users see: every ribbon frozen at its seeded offset with layered opacities, no loops mounted.

Show sourceexamples/aurora-background/static.tsx

examples/aurora-background/static.tsx

"use client";

import { AuroraBackground } from "@dethink/components";

export function AuroraBackgroundStatic() {
  return (
    <AuroraBackground
      animate={false}
      className="border-border h-56 rounded-lg border"
      tone="primary"
    >
      <div className="flex h-56 flex-col items-center justify-center gap-2 px-6 text-center">
        <h3 className="text-foreground text-xl font-semibold">
          Designed at rest
        </h3>
        <p className="text-muted-foreground max-w-sm text-sm leading-6">
          animate={"{false}"} renders the same frame reduced-motion users see:
          every ribbon frozen at its seeded offset with layered opacities, no
          loops mounted.
        </p>
      </div>
    </AuroraBackground>
  );
}

Props

AuroraBackground accepts div props plus the shared background contract — animate, density, intensity, speed, tone, and seed.

AuroraBackground props
Prop	What it does	Default
`animateboolean`	Set to false to force the static composition regardless of OS motion preference: every ribbon frozen at its seeded offset with layered opacities, no animation loops mounted.	`true`
`density"sparse" \| "normal" \| "dense"`	Ribbon count (3/4/5). Sparser skies read calmer; denser ones fill tall heroes with more overlapping light.	`"normal"`
`intensity"faint" \| "subtle" \| "bold"`	Opacity tier for the ribbon layer. Keep faint or subtle under body copy; bold is for short hero statements.	`"subtle"`
`speed"slow" \| "normal" \| "fast"`	Drift cycle duration (32/22/14s per mirrored pass), jittered per ribbon by the seed. Loops pause automatically while the background is offscreen.	`"normal"`
`tone"foreground" \| "muted" \| "primary"`	Semantic token driving the ribbon colors via currentColor. Each ribbon slot hue-rotates that color in OKLCH through CSS relative color syntax, so one token yields a multi-hue aurora that adapts to light and dark mode; browsers without relative color syntax fall back to a designed mono-hue composition.	`"primary"`
`seednumber`	Drives all pseudo-random ribbon placement and timing jitter deterministically. The same seed renders the same layout on the server and every client, so markup is SSR-stable; change it to reshuffle the sky.	`1`
`childrenReactNode`	Hero content rendered in the content slot above the aria-hidden decorative layer. The layer is pointer-events-none, so children stay fully interactive.	Not set
`getAuroraBackgroundMotionConfig / getAuroraBackgroundGeometry / auroraBackgroundHueShifts / *ClassNames helpers(speed, reducedMotion) => config, (seed, density) => ribbons, readonly number[], ({ className }) => string`	Open-code escape hatches: read the resolved drift transitions, reuse the seeded ribbon geometry, inspect the literal per-slot hue-shift map, or apply the root, layer, and content class recipes to custom elements.	Not set