Aurora Backdrop

A wash of blurred colour that drifts behind content on cycles that never line up.

Weather, not wallpaper

Four blobs on cycles that never line up

Loading preview

Installation

npx shadcn@latest add @loomui/aurora-backdrop

Usage

import { AuroraBackdrop } from "@/components/ui/aurora-backdrop"

The layer is absolutely positioned, so it wants a positioned parent that clips:

<section className="relative overflow-hidden">
  <AuroraBackdrop />
  <div className="relative">{children}</div>
</section>

One blob is drawn per colour. Each runs the same keyframes at its own length and its own phase, so nothing about the wash repeats on a schedule the eye can pick up. seed chooses where they sit and is deterministic, so the server and the client render the same layout.

<AuroraBackdrop
  colors={["#f472b6", "#c084fc", "#60a5fa"]}
  intensity={0.35}
  blur="96px"
/>

Props

Prop	Type	Default	Description
`colors`	`string[]`	four blues	Colours of the blobs. One blob per colour.
`blur`	`string`	`"72px"`	Blur applied to the wash, as a CSS length.
`duration`	`number`	`18`	Seconds for one full drift of a single blob.
`intensity`	`number`	`0.5`	Opacity of the layer, from `0` to `1`.
`seed`	`number`	`1`	Changes where the blobs sit.
`disabled`	`boolean`	`false`	Render the wash static.
`className`	`string`	none	Merged onto the layer.

Any other <div> prop is forwarded.

Cost

A large blur is not free. Keep the layer behind content that does not repaint, and prefer a lower intensity over more blobs when the wash reads too strong.

Accessibility

The layer is aria-hidden and never takes pointer events. Motion stops under prefers-reduced-motion, leaving a still gradient.