Lightning
lightningGenerates flickering noise-driven electric arcs with inverse-distance glow.
Usage
Basic usage
The default blue-purple phase is 230, the component comes with absolute inset-0 z-0, and the content overlaps z-10.
Lightning
fbm Noise arc background
<div className="relative h-64 overflow-hidden rounded-xl"
style={{ background: "oklch(0.10 0.02 265)" }}>
<Lightning />
<div className="relative z-10 flex h-full flex-col items-center justify-center gap-2">
<p className="text-2xl font-bold tracking-tight text-white/90">Lightning</p>
<p className="text-sm text-white/50">fbm Noise arc background</p>
</div>
</div>Warm orange phase (high intensity)
hue=30 Cut warm orange, intensity / speed turn it up to be brighter and noisier.
hue = 30
<div className="relative h-64 overflow-hidden rounded-xl"
style={{ background: "oklch(0.10 0.02 265)" }}>
<Lightning hue={30} intensity={1.4} speed={1.3} />
</div>Eat chart token (light and dark adaptive)
Pass color to cover the hue path, shader directly eat token, and follow the theme switching.
token Color Picking · Light and Dark Adaptive
<div className="relative h-64 overflow-hidden rounded-xl"
style={{ background: "oklch(0.10 0.02 265)" }}>
<Lightning color="var(--color-chart-1)" intensity={1.2} />
</div>Fine and slow battery
size turns it up to make the splits thinner, and speed turns it down to make the surge more soothing.
size=1.6 · speed=0.6
<div className="relative h-64 overflow-hidden rounded-xl"
style={{ background: "oklch(0.10 0.02 265)" }}>
<Lightning size={1.6} speed={0.6} hue={280} />
</div>When to Use
Use it when you need a vertical arc/aurora glow background and a technological hero with random flashes. For a single stable volumetric beam use LightPillar; for a radial beam use LightRays; for a falling beam use Lightfall.
Import
import { Lightning } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
| hue | number | 230 | Lightning hue (0–360, HSV color wheel), only effective when color is not passed. Example 30 warm orange / 120 turquoise / 280 magenta |
| color | string | undefined | Explicit lightning color. When set, it overrides hue; use var(--color-chart-1) for theme-aware token color |
| xOffset | number | 0 | Horizontal offset (clip-space), positive values push to the right, negative values push to the left |
| speed | number | 1 | Animation speed factor, the larger the factor, the faster the flashing/surging |
| intensity | number | 1 | Brightness intensity, the larger, the brighter and the thicker |
| size | number | 1 | Noise scale, the larger the bifurcation, the finer the bifurcation, the smaller the more macroscopic |
| className | string | — | Additional class name for the root container or fallback div |
Slots
| Slot | Type | Description |
|---|---|---|
| fallback | ReactNode | reduced-motion / static replacement content without WebGL, default token vertical glow gradient |
Usage Guidelines
- Choose one of
colorandhue: ifcoloris passed,huewill be invalid. For token adaptation,color="var(--color-chart-1)"is preferred. - OGL/WebGL renders on the client; SSR, reduced motion, and unavailable WebGL use the token-gradient fallback.
colormust use the--color-prefix token when passing CSS variables. The barevar(--primary)shader does not parse, see [[hulian-token-color-var-needs-color-prefix]].- Fullscreen background layers in a non-cascading context parent of an opaque background may be obscured by the parent background, see [[webgl-canvas-rendered-but-invisible-negative-zindex-covered]].
Related
DotPattern · GridPattern · StripedPattern · Spotlight · RetroGrid · Ripple
Playground
Lightning · WebGL Background
<div className="relative h-64 overflow-hidden rounded-xl"
style={{ background: "oklch(0.10 0.02 265)" }}>
<Lightning
hue={230}
speed={1}
intensity={1}
size={1}
xOffset={0}
/>
<div className="relative z-10">Content</div>
</div>