Component

Aurora Background

Layered gradient blobs that drift slowly behind your content. The motion runs entirely on the compositor and freezes to a static gradient under reduced motion.

Aurora backdrop

Installation

Registry CLI — copy the source straight into your project:

$pnpm dlx shadcn@latest add @stacklyui/aurora-background

Or install the package and import it:

$pnpm add @stacklyui/ui motion

Usage

Wrap any hero or section. The component is position: relative and clips its own overflow, so place your content as children — it renders above the aurora automatically. Pass static to disable motion, or speed to tune the drift.

Props

Prop	Type	Default	Description
`static`	`boolean`	`false`	Render a static gradient with no animation.
`vignette`	`boolean`	`true`	Darken the edges with a radial vignette.
`speed`	`number`	`1`	Animation speed multiplier (2 = twice as fast).
`className`	`string`	—	Classes for the container (e.g. min-height, layout).