Lightning Background for React

A ceiling of heavy cloud drifts across the box in three layers, and the storm never goes quiet: every few seconds the clouds light up from inside, and now and then a forked bolt strikes the ground, dims and strikes again, while faint rain falls under it all. The clouds are noise textures the browser draws once and CSS slides sideways; the bolts are SVG paths seeded once, so the server and the browser draw the same ones; one CSS clock fires every flash in its own slot, so flashes never overlap. It follows your theme: an overcast grey storm on a light page, a blue-black night storm on a dark one.

Use it for a launch or a countdown, a deadline banner or a weather page. For the rain alone, use Rain; for the other storm in this family, Tornado; for glowing tubes that hold steady, Neon; for electricity running in straight traces, Circuit. With reduced motion nothing flashes: the clouds stop, lit by one still bolt.

Installation

Usage

import { Lightning } from "@/components/ui/lightning";

The storm fills the box behind whatever you put inside. Give the container a height; for the whole page, render it empty with className="fixed inset-0 -z-10".

<Lightning className="flex min-h-[420px] items-center justify-center">
  <h1 className="text-4xl font-semibold">Strike while it's hot</h1>
</Lightning>

Demos

Colors

glowColor sets the light in the clouds and the bolts' halo, and boltColor their core; here an amber storm at dusk. The card adds the dark class to its own container, so it shows the night storm on a light page too.

Heat lightning

bolts={0} keeps every flash inside the clouds, intensity="subtle" dims them, rain={false} clears the air and speed={0.7} slows the storm, for a distant, quieter sky behind a card's copy.

Accessibility

The storm is decorative: it's hidden from assistive tech and never takes the pointer, and your content stays on top in normal flow.

Flashing is capped for photosensitive users. Eight flashes share one 24-second cycle, each in its own slot, at least 1.6 seconds after the one before even at the top speed, and each is at most two pulses, so the storm never flashes more than twice in a second. speed is capped at 1.5 in the component, and the stylesheet keeps the cycle at 16 seconds or longer even if a stylesheet sets --lightning-speed higher. With reduced motion nothing flashes at all: the clouds and the rain stop, and one bolt stays on screen, still, with its cloud lit.

Put copy over it in your foreground colour (text-foreground). The sky behind it keeps body text above 4.5:1 at the default intensity in both color schemes; only the instant a bolt crosses the text, a tenth of a second, is brighter. intensity="strong" brightens every flash, so keep small text off it on a dark page.

FAQ

API Reference