Storm Lattice

A canvas-based storm simulation where a lattice of nodes lights up near your cursor, and branching lightning strikes cascade downward through the grid. Storm particles drift across the scene with color-shifting wind. Click or wait for timed auto-strikes - each one resets the lattice and sends fresh bolts to the bottom.

storm-lattice-preview

Why it helps: The cascading lightning and drifting particles create a hypnotic, ambient centerpiece. Cursor-driven node proximity makes it feel alive and responsive without demanding interaction.

Also good to know:

-Canvas-based rendering means no DOM accessibility for the visuals
-Particle count and node computation can be heavy on low-end devices
-No reduced-motion fallback for the auto-strike interval

Source

components/live/StormLattice.tsx

// Loading source...

Usage

example.tsx

import { StormLattice } from "@/components/live/StormLattice";

<StormLattice
  className="w-full aspect-video"
/>
import { StormLattice } from "@/components/live/StormLattice";

<StormLattice
  className="w-full aspect-video"
/>

Props

className-

string

Additional CSS classes.

style-

CSSProperties

Inline styles.

interval3000

number | false

Auto-strike interval in ms, or false to disable.