PParable
All components

Aurora Background

Hero Backgrounds

A GPU-cheap animated aurora of drifting radial-gradient bands with optional grain. Fills its container behind content; freezes under reduced-motion.

Inspired by Componentry — Silk Aurora — independently built, not affiliated. Attribution policy

Aurora

Installation

npx shadcn@latest add https://parable-three.vercel.app/r/aurora-background.json

Runs the shadcn CLI — the component source is copied intocomponents/parable/aurora-background.tsx. You own it from there.

Usage

The exact code rendering the preview above.

<AuroraBackground className="grid h-56 w-full place-items-center rounded-xl">
    <span className="text-lg font-medium text-white/90">Aurora</span>
  </AuroraBackground>

Props

AuroraBackgroundProps extends React.HTMLAttributes<HTMLDivElement>

PropTypeDefaultDescription
colorsstring[]["#8b5cf6", "#ec4899", "#22d3ee"]Two or more colours the aurora blends between.
backgroundstring"#0a0a0c"Base backdrop colour.
speednumber18Animation seconds for one cycle.
blurstring"72px"Blur radius of the aurora bands.
grainbooleantrueShow a subtle grain overlay.