Bolt Strike

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

Installation

npx shadcn@latest add @scrollxui/bolt-strike

Usage

import { BoltStrike } from '@/components/ui/bolt-strike';

<BoltStrike
  color='#7c3aed'
  intensity={1}
  className='relative h-100 w-full flex flex-col items-center justify-center'
>
  <h2 className='bg-clip-text text-transparent text-center bg-linear-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

Property	Type	Default	Description
`color`	string	`"#7c3aed"`	Primary color of the lightning bolts, sparks, and glow effects.
`speed`	number	`1`	Controls the overall animation speed (higher values feel more rapid and energetic).
`intensity`	number	`1`	Controls how frequently lightning strikes occur (higher values = more strikes).
`className`	string	`—`	Custom classes applied to the outer container.
`children`	node	`—`	Content rendered above the lightning animation.