React ThunderBolt Bg

A reusable React component that renders a thunderstorm background with animated lightning bolts.

Features

• Random lightning bolts starting from the top
• Adjustable lightning behavior
• Color-customizable bolts and flash
• Optional built-in control panel (hide/show support)

Component

LightningStorm is available at:

• src/components/LightningStorm.tsx

Live Demo

• https://thunderboltbg.vercel.app/

Installation

Install from npm:

npm install react-thunderboltbg

How To Use

Import and render in your app:

import { LightningStorm } from 'react-thunderboltbg'

function App() {
  return (
    <LightningStorm
      lightningFrequency={55}
      boltLength={65}
      boltWidth={55}
      lightningColor="#DEEFFF"
      showControls={true}
    />
  )
}

export default App

Props

showControls prop is required in usage (pass true or false explicitly).

• lightningFrequency?: number
• boltLength?: number
• boltWidth?: number
• lightningColor?: string
• showControls?: boolean

Default Values

• lightningFrequency = 55
• boltLength = 65
• boltWidth = 55
• lightningColor = "#DEEFFF"
• showControls = true

Number Rules (for frequency/length/width)

All number inputs are treated as percent values:

• Less than 0 -> 0%
• Greater than 100 -> 100%
• Between 0 and 100 -> same value as percent (example: 44 -> 44%)

Controls (when showControls={true})

• Lightning Frequency: controls how often strikes happen
• Bolt Length: controls how long/deep bolts travel
• Bolt Width: controls bolt thickness
• Lightning Color: changes bolt and flash tint
• Hide button: hides control panel
• Show Controls button (top-left): shows panel again

Example Without Controls

<LightningStorm
  lightningFrequency={80}
  boltLength={70}
  boltWidth={60}
  lightningColor="#C7E6FF"
  showControls={false}
/>