← DOCS
backgrounds

Aurora

Northern lights-inspired color wave effect with multiple layers.

npx chaos add aurora

PREVIEW

USAGE

case 'glass-button': return ; case 'neon-glow': return ; case 'floating-button': return ;
import { Aurora } from '@oalacea/chaosui/backgrounds/aurora';

<Aurora />
<Aurora colors={['#ff00ff', '#00ffff', '#ff0080']} intensity={0.7} />
<Aurora region="top" variant="subtle" />

PROPS

PropTypeDefault
colorsArray of aurora colors (5 colors)
string[]["#00ff00", "#00ffff", ...]
speedAnimation duration in seconds
number20
intensityOpacity/strength of the aurora effect
number0.5
blurBlur amount in pixels
number100
positionPosition the aurora effect
"fixed" | "absolute""fixed"
variantAnimation style variant
"default" | "subtle" | "dynamic""default"
regionConstrain aurora to specific area
"full" | "top" | "bottom" | "left" | "right""full"
blendModeCustom CSS blend mode
string"screen"