BackgroundsCanvasStorm

Lightning Storm

Branching Lichtenberg lightning bolts that strike on click or auto-fire.

Effect guide

Copy the lightning storm animated background effect

What it is: Branching Lichtenberg lightning bolts that strike on click or auto-fire.

Where to use it: Use this motion pattern for hero sections, product pages, dashboards, and interactive marketing surfaces.

Supported formats: React, Vue, Vanilla JS.

Explore Animated Backgrounds

"use client";

import { useEffect, useRef } from "react";

export default function LightningStorm() {
  const canvasRef = useRef(null);

useEffect(() => {
    const reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    if (reduceMotion) return;
    const canvas = canvasRef.current;
const ctx = canvas.getContext("2d");
const bolts = [];
const config = {
  boltColor: "#b4c8ff",
  bgFade: 0.35,
  autoStrike: true,
  autoInterval: 2200
};
let frame = 0;
let timer = 0;

function hexToRgbChannels(hex) {
  const clean = hex.replace("#", "");
  const value = parseInt(clean, 16);
  return `${(value >> 16) & 255},${(value >> 8) & 255},${value & 255}`;
}

function resize() {
  canvas.width = canvas.offsetWidth;
  canvas.height = canvas.offsetHeight;
}

function strike(originX = Math.random() * canvas.width) {
  const h = canvas.height;
  branch(originX, 0, originX + (Math.random() - 0.5) * 120, h * 0.65 + Math.random() * h * 0.3, 2.5, 0);
}

function click(event) {
  const rect = canvas.getBoundingClientRect();
  bolts.length = 0;
  strike(event.clientX - rect.left);
}
    resize();
    draw();
    const observer = new ResizeObserver(resize);
    observer.observe(canvas);
    canvas.addEventListener("pointerdown", click);
    if (config.autoStrike) timer = window.setInterval(() => strike(), config.autoInterval);
    return () => {
      cancelAnimationFrame(frame);
      observer.disconnect();
      canvas.removeEventListener("pointerdown", click);
      if (timer) clearInterval(timer);
    };
  }, []);

return <canvas ref={canvasRef} style={{ width: "100%", height: "100%", cursor: "pointer", display: "block" }} />;
}