Lightning

Use it like any other component. Choose a theme with preset; any prop you pass as well overrides the preset.

import { useRef } from 'react'
import { Lightning, type LightningHandle } from '@/components/effects/lightning/lightning'

export function Hero() {
  const bolts = useRef<LightningHandle>(null)
  return (
    <section className="relative h-[640px] overflow-hidden">
      {/* a storm behind a headline: fills its parent, strikes from the top edge */}
      <Lightning ref={bolts} preset="Tesla" frequency={12} className="absolute inset-0" />
      <div className="relative z-10 mx-auto max-w-xl px-6 pt-32 text-center text-white">
        <h1 className="text-6xl font-semibold tracking-tight">Call down the storm.</h1>
        <button onClick={() => bolts.current?.strike()}>Strike</button>
      </div>
    </section>
  )
}

// An arc between two points (fractions of the box, y down), drawn only as light over your own page:
//   <Lightning mode="arc" transparent source={[0.15, 0.5]} target={[0.85, 0.5]} className="absolute inset-0" />
// A tendril that reaches for the pointer from the top centre, click to strike:
//   <Lightning mode="pointer" preset="Violet Storm" className="absolute inset-0" />
// Presets: Tesla, Violet Storm, Solar Flare, Ink (the light one: ink on paper), Toxic.
// The stage above is <LightningShowcase />, also exported, with a headline, a Strike button and an arc between two buttons.

<Lightning preset="Violet Storm" mode={"storm"} />

• Tesla
• Violet Storm
• Solar Flare
• Ink
• Toxic

What the command adds to your project, and where.

• components/effects/lightning/lightning.tsx

  The component.

• components/effects/lightning/scene.tsx

  The component.

• components/effects/lightning/showcase.tsx

  The component.

• components/effects/lightning/poster.tsx

  The component.

• components/effects/lightning/look.ts

  The component.

• components/effects/lightning/bolt.ts

  The component.

• components/effects/lightning/sim.ts

  The component.

• components/effects/lightning/shaders.ts

  The fragment shader, as a string. Edit it to change the picture.

• components/effects/lightning/stage-styles.ts

  The component.

• lib/effect-runtime.ts

  Shared by every shader effect: resizing, pausing, reduced motion, context loss and the no-WebGL fallback. Installed once.

• Bolts are generated procedurally: a main channel built by midpoint-style displacement with thinner forks fanning off it. Each strike is timed like the real thing: a leader runs down the channel in a fraction of a second, a white-hot stroke, one return stroke, then an afterglow that fades over a second or two. Between strikes a storm has faint crackles near the top edge and drifting haze lit from within.
• Storm mode strikes from the top edge at the set frequency (strikes per minute), sometimes twice in quick succession. Arc mode keeps a continuous arc between source and target that wriggles smoothly, with a thinner second strand, forks that come and go and glowing end points; strike() makes it surge. Pointer mode reaches a tendril most of the way toward the pointer from the source (the top centre) and a click or tap strikes at that point.
• Photosensitivity: strikes are never closer than about half a second, so the scene swells at most twice in any second, and a swell is soft (about 60 ms up, 200 ms down), not a hard flash. The return stroke does not flash the scene, and an arc only drifts in brightness. Set flash to 0 for none at all.
• Lines are drawn analytically, so they stay crisp at any resolution and never shimmer: a thin channel loses brightness instead of aliasing. Dark looks add light in linear space (a strong core goes to white while the glow keeps its hue); Ink is dark graphite strokes on warm paper with no glow, for light pages. With transparent on, only the light is drawn, so it can sit over your own page.
• It fills its parent and pauses off screen and in a background tab, lowers its resolution automatically if frames run slow, and under prefers-reduced-motion draws one frozen bolt with no flashing. Without WebGL, and before the first frame, you see a poster of a bolt with its forks in the same colours.
• Click or tap the stage (not a button or link) to strike toward that point; clickToStrike={false} turns that off. ref.current.strike() fires one from code.

See all effects