Backgrounds

Aurora

Three blobs and a generation defined.

Drifting radial gradient blobs. Sits absolutely inside its `position: relative` parent. Override `blobs` for any palette you want; in good taste or otherwise.

Install

Copy this owned-code component into your app from the registry.

pnpm dlx shadcn-svelte@latest add https://benjamin-brady.github.io/performative-ui-svelte/registry/aurora.json

Examples

Default purple/pink/cyan

Aurora as a hero backdrop

<div style={{ position: "relative" }}>
  <Aurora />
  <div style={{ position: "relative", zIndex: 1 }}>…</div>
</div>

Lava-lamp animated (blobs push each other around)

<Aurora
  animated
  blobs={[
    { color: "rgba(124,58,237,0.55)", x: 30, y: 40, size: 55 },
    { color: "rgba(236,72,153,0.45)", x: 65, y: 35, size: 50 },
    { color: "rgba(6,182,212,0.40)",  x: 55, y: 75, size: 50 },
    { color: "rgba(251,191,36,0.30)", x: 25, y: 70, size: 40 },
  ]}
/>

Custom palette

<Aurora blobs={[
  { color: "rgba(34,197,94,0.45)", x: 25, y: 30, size: 55 },
  { color: "rgba(251,191,36,0.4)",  x: 75, y: 60, size: 45 },
]} />

Props

Prop	Type	Default	Description
blobs	{color,x,y,size?}[]	-	Color stops with positions (0–100%).
blur	number	50	CSS blur in px.
static	boolean	-	Disable the slow drift.
animated	boolean	-	Lava-lamp mode, blobs become independent bubbles that push each other around. Overrides the CSS drift.
repulsion	number	0.18	When animated, how aggressively blobs push each other apart (0 disables interaction).

Next NodeGraphBackground ] →