Bolt Strike

lightning bolts burst randomly with sparks and particles, creating a high-energy, reactive background effect.

Bolt Animation,
Background.

Installation

npx shadcn@latest add https://scrollxui.dev/registry/bolt-strike.json

Usage

import { BoltStrike } from "@/components/ui/bolt-strike";
<BoltStrike 
      color="#7c3aed" 
      intensity={1} 
      className="relative h-[400px] w-full flex flex-col items-center justify-center"
    >
      <h2 className="bg-clip-text text-transparent text-center bg-gradient-to-b from-neutral-900 to-neutral-700 dark:from-neutral-600 dark:to-white text-2xl md:text-4xl lg:text-7xl font-sans py-2 md:py-10 relative z-20 font-bold tracking-tight">
        Bolt Animation, <br /> Background.
      </h2>
    </BoltStrike>

API Reference

Bolt Strike

lightning bolts burst randomly with sparks and particles, creating a high-energy, reactive background effect.

Props

PropertyTypeDefaultDescription
colorstring"#7c3aed"
Primary color of the lightning bolts, sparks, and glow effects.
speednumber1
Controls the overall animation speed (higher values feel more rapid and energetic).
intensitynumber1
Controls how frequently lightning strikes occur (higher values = more strikes).
classNamestring—
Custom classes applied to the outer container.
childrennode—
Content rendered above the lightning animation.

Built withby Ahdeetai.