Rain and lightening Hero Section

Heroes 103

About

Dramatic hero section with bold centered headline and subtle subtext over a dark, animated rain and lightening background, creating an immersive stormy atmosphere.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Rain and lightening Hero Section to your project and fits it to your theme.

Code

How Rain and lightening Hero Section is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { WeatherEffect } from "@/components/ui/rain-and-lightening-hero-section"

export default function WeatherEffectDemo() {
  return (
    <div className="w-full h-screen">
      <WeatherEffect
        className="bg-background relative flex h-full w-full flex-col items-center justify-center overflow-hidden rounded-xl border bg-gradient-to-b from-zinc-950 via-zinc-800 to-zinc-950"
        // Rain props
        rainIntensity={200}
        rainSpeed={0.1}
        rainAngle={15}
        // Lightning props
        lightningEnabled={true}
        lightningFrequency={4}
        lightningSpeed={0.8}
        lightningIntensity={1.3}
        lightningSize={1.8}
        // Thunder props
        thunderEnabled={true}
        thunderVolume={0.8}
        thunderDelay={1.5}
      >
        <div className="p-6 text-center">
          <h1 className="z-10 text-4xl font-bold text-white md:text-7xl">
            A Storm is Brewing
          </h1>
          <p className="z-10 mt-2 text-lg text-zinc-300">
            Experience the full force of the storm.
          </p>
        </div>
      </WeatherEffect>
    </div>
  )
}