← DOCS
backgrounds

Lightning

WebGL-based lightning effect with fractal noise and customizable colors.

npx chaos add lightning

PREVIEW

USAGE

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

<Lightning />
<Lightning hue={120} intensity={1.5} />
<Lightning xOffset={-0.3} speed={2} />

PROPS

PropTypeDefault
hueBase hue for lightning color (0-360)
number230
xOffsetHorizontal offset for lightning (-1 to 1)
number0
speedAnimation speed multiplier
number1
intensityLightning brightness intensity
number1
sizeLightning bolt thickness
number1
classNameCustom className
string""