Account

Backgrounds

Creative

Aurora Background

Three blurred bands drifting out of phase. Atmospheric in the theme's own colours; vivid with a brand palette.

Install

Included with Creative: needs your API key. Initialize and log in once.

Terminal
npx @galactrex/ui add aurora-background

Usage

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

<section className="relative overflow-hidden">
  <AuroraBackground />
  <h1 className="relative">Light on the horizon</h1>
</section>

Source

Installs to components/galactrex/aurora-background.tsx, with the shared motion primitives beside it.

Source for this component comes with its plan. Install it with the command above, or open your licensed copy here.

See plans

Props

PropTypeDefaultDescription
colors[string, string, string]—Three CSS colours; defaults to theme glow, muted and accent.
speednumber16Seconds for one sway.
intensitynumber0.35Light strength, 0 to 1.
position"top" | "center""top"Where the curtains hang.
classNamestring—Extra classes for the outer element.

Variants

  • Monochrome. Theme tones, a quiet glow.
  • Brand. Pass `colors` for a vivid aurora.

Accessibility

  • Decorative only and aria-hidden; never takes pointer events.

Motion and reduced motion

  • Transform-only sway on three blurred layers.
  • Still offscreen.
  • Reduced motion: the curtains hold still.