A night storm with branching bolts that strike at random intervals, light up the clouds with a restrike and fade, over a layer of slanted rain.
Storm alerts,
minutes earlier
npx shadcn@latest add https://hyperblur.dev/r/bg-lightning.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/bg-lightning.tsx.
import { BgLightning } from "@/components/hyperblur/bg-lightning"
<div className="relative h-96"><BgLightning><h1>Storm alerts</h1></BgLightning></div>| Prop | Type | Default | Description |
|---|---|---|---|
| accent | string | "#a9c8ff" | Color of the bolts, glow and lit clouds. Hex color. |
| background | string | "#05070d" | Night sky color. Hex color. |
| interval | number | 3.2 | Average seconds between strikes, minimum 0.6. |
| branches | number | 1 | Amount of side branches per bolt. Set 0 for single bolts. |
| rain | boolean | true | Shows falling rain streaks. |
| speed | number | 1 | Overall time scale. |
| className | string | "" | Extra classes for the root. The root is absolutely positioned and fills its parent. |
| children | ReactNode | Content rendered on top of the background. |