Effects/AuroraBackground
AuroraBackground
Animated aurora borealis background with three floating gradient blobs. Perfect for hero sections, login pages, and dark-mode landing screens.
import { AuroraBackground } from "@animui/ui"Basic
Build faster
Beautiful components.
Custom colors
colors: amber / red / pink
Props
| Prop | Type | Default | Description |
|---|---|---|---|
colors | [string, string, string] | ["#8b5cf6","#3b82f6","#10b981"] | Three CSS colors for the three aurora blobs. |
speed | "slow" | "normal" | "fast" | "normal" | Animation speed of the blob movement. |
blur | number | 80 | Gaussian blur amount in px applied to the blobs. |
children | ReactNode | — | Content rendered on top of the aurora. |
className | string | — | Classes on the wrapper — set height and background here. |