Lightning
Procedurally generated branching lightning with a glow, drawn live as a storm background by a canvas 2D fractal algorithm.
Branching lightning generated procedurally by a midpoint-displacement fractal algorithm: the main channel carries a white core and an outer glow, striking and fading out on a cycle. Everything is drawn on a 2D canvas, with no external dependencies.
Loading preview…
npx shadcn@latest add https://webberui.com/r/lightning.jsonPlayground
Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.
2200
6
0.35
<Lightning />
Installation
npx shadcn@latest add https://webberui.com/r/lightning.jsonOr, once registries are configured in components.json, install it as @webberui/lightning.
Usage
import { Lightning } from "@/components/ui/lightning";
<Lightning className="flex h-[320px] w-full items-center justify-center rounded-xl">
<h3 className="text-4xl font-bold text-white">Electrify.</h3>
</Lightning>The container needs a height of its own (for example h-[320px]); the lightning fills it entirely and layers children above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
color | string | "#7dd3fc" | Primary lightning color |
glowColor | string | Same as color | Glow color |
interval | number | 2200 | Average interval between strikes (ms); the actual value is randomized between 0.6~1.4× |
detail | number | 6 | Number of fractal subdivisions — higher means finer jagged detail (4~7 recommended) |
branchDensity | number | 0.35 | Probability of spawning a branch, 0~1 — higher forks more |
glow | boolean | true | Whether the glow is layered on |
flash | boolean | true | Whether the whole container flashes at the instant of a strike |
children | ReactNode | — | Foreground content layered above the lightning |
className | string | — | Forwarded to the root container, for setting height and layout |
Accessibility
- When the user has "reduce motion" enabled at the system level, only a single static bolt is drawn and the animation loop never starts
- The canvas carries
aria-hiddenandpointer-events-none— decorative only, so it interferes with neither interaction nor assistive technology - When the component leaves the screen it calls
cancelAnimationFrameand disconnects theResizeObserver, leaving no background computation behind