React Lightning Background

Animated lightning storm background for React and Next.js — jagged electric bolts fork across the sky with bright white-blue cores, violet-indigo glow, and ambient sky flashes at each strike.

React Lightning Background preview

Scroll to load preview

A dark, brooding sky that cracks open every second or two with a branching bolt of electricity. Each strike is generated procedurally via recursive midpoint displacement — a straight line A→B is subdivided 5 times, each midpoint shoved perpendicularly by a halving amount, yielding the same jagged silhouette real lightning has. A 30% branch probability at each split spawns forked offshoots, the canvas lifts with a brief white ambient flash on every strike, and afterglow trails fade through a semi-transparent background wipe. Built on a single canvas + RAF with a seeded PRNG so it never mismatches between server and client, and every knob — strike rate, branchiness, core and glow color, intensity — is a prop. Ideal for cyberpunk product launches, storm/fantasy landing pages, dramatic 404s, and any hero that needs to feel electric.

Install with AI

If you've connected the shadcn.io MCP server to Claude Code, Cursor, Windsurf, or any MCP-ready AI editor, prompt your agent to install this background for you — no copy-paste, no CLI:

use shadcnio to install the lightning background into my project

React Lightning Background