Skip to content
Dethink Components
Dethink studio

ComponentsAuroraBackground

AuroraBackground

Add soft, flowing bands of color behind your content.

On this page

Installation

Install component source from the public registry, or use the local workspace package. Follow the setup guide first. The npm package is not published yet.

View registry files

Built with

Shared foundation: React, clsx for conditional classes, tailwind-merge for resolving utility-class conflicts. Styles use Tailwind CSS and Dethink CSS variables.

Based on this component’s source and registry composition. Libraries used only in showcase examples are excluded.

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
PropWhat it doesDefault
animatebooleanSet 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"
seednumberDrives 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
childrenReactNodeHero 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 }) => stringOpen-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