Atelier UI

Search components…

Search components…

Aurora Background

Slowly drifting aurora gradient background with configurable colors and speed.

Edit in sandbox

Copy a prompt for your AI coding tool with the source, dependencies and usage

Props

AuroraBackgroundProps

Also accepts all props of React.ComponentProps<"div">

PropTypeDefaultDescription
colorsstring[]["#f97316", "#a855f7", "#06b6d4"]Up to four blob colors
speednumber18Seconds per drift cycle; lower is faster
intensitynumber0.55Blob opacity, 0–1

Install

$ npx shadcn@latest add https://chromotion.dev/r/aurora-background.json

The CLI installs the base component; your customizations live in the code generated on the Customize tab.

More like this