Electric Storm React component
A night storm background shader: rolling clouds and slanting rain, with jagged lightning that strikes on its own every few seconds, flickers, branches and lights up the clouds around it; click or tap to call a strike down where you point.
About the Electric Storm component
Electric Storm is a dark, moody sky with rolling clouds and slanting rain, where lightning strikes every few seconds: a jagged bolt flickers down to the ground, splits into a branch and lights up the clouds around it before fading.
Click or tap anywhere and a strike comes down right where you point. It's a WebGL shader, so it's light on the page, and it pauses when it's off screen.
When to use it
Use it for game and film launches, weather or energy brands, dramatic event pages, Halloween campaigns or a 404 page with attitude.
Flashes brighten the whole frame for a moment, so avoid it behind long reading content.
Installation
Add the Electric Storm component to your project with the shadcn CLI. It lands in components/electric-storm.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/electric-stormOr copy the source by hand and install its dependencies:
npm install clsx tailwind-mergeProps
<ElectricStorm /> accepts 8 props, all optional. It also accepts the usual <div> attributes, like className, style, id and aria-*, and passes them to its root element.
| Prop | Type | Default |
|---|---|---|
| children Content shown on top of the background. | React.ReactNode | — |
| colors Storm colours: the lightning bolt, its glow in the clouds, the clouds and the rain. | [string, string, string, string] | DEFAULT_COLORS |
| background Base colour behind the effect. | string | DEFAULT_BACKGROUND |
| speed Animation speed multiplier. | number | 1 |
| intensity Overall brightness of the effect. | number | 1 |
| interactive Click or tap to strike lightning where you point. | boolean | true |
| resolution Render scale: 1 is full resolution, lower values are cheaper on very large screens. | number | 1 |
| paused Freeze the animation on its current frame. | boolean | false |
- children
Content shown on top of the background.
React.ReactNode - colors
Storm colours: the lightning bolt, its glow in the clouds, the clouds and the rain.
[string, string, string, string]Default: DEFAULT_COLORS - background
Base colour behind the effect.
stringDefault: DEFAULT_BACKGROUND - speed
Animation speed multiplier.
numberDefault: 1 - intensity
Overall brightness of the effect.
numberDefault: 1 - interactive
Click or tap to strike lightning where you point.
booleanDefault: true - resolution
Render scale: 1 is full resolution, lower values are cheaper on very large screens.
numberDefault: 1 - paused
Freeze the animation on its current frame.
booleanDefault: false
npm dependencies
Installed for you by the shadcn CLI.
Electric Storm FAQ
- How do I put content on top?
- Pass it as children. ElectricStorm is a relative container with the effect drawn behind its children, so give it a height (or make it absolute inset-0 inside a section) and lay your content out inside.
- Can I change the colours?
- Pass colors with four colours: the bolt itself, the glow it casts into the clouds, the clouds and the rain.
- Is it heavy on performance?
- It's one small WebGL shader. It only animates while it's on screen and the tab is visible, caps the pixel density at 1.5x, and resolution={0.6} renders it smaller and scales it up on very large screens.
- What about reduced motion?
- With reduced motion turned on, or paused set, it draws a single still frame instead of animating. Without WebGL it falls back to a soft CSS gradient in the same colours.
