Components
Loading preview...
Dramatic hero section with bold centered headline and subtle subtext over a dark, animated rain and lightening background, creating an immersive stormy atmosphere.
@ravikatiyar
npx shadcn@latest add https://21st.dev/r/ravikatiyar162/rain-and-lightening-hero-sectionimport { 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>
)
}