rain-default
Rain
"use client"
import { Rain } from "@/components/ui/backgrounds/rain"
export function Component() {
return (
<div className="h-[500px] w-full">
<Rain
intensity={500}
speed={0.5}
angle={10}
color={"rgba(174, 194, 224, 0.6)"}
dropSize={{ min: 1, max: 2 }}
lightningEnabled={true}
lightningFrequency={8}
thunderEnabled={true}
thunderVolume={1}
thunderDelay={2}
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"
>
<div className="p-6">
<p className="z-10 text-center text-3xl font-semibold tracking-tighter whitespace-pre-wrap text-white md:text-7xl">
Rain
</p>
</div>
</Rain>
</div>
)
}
pnpm dlx shadcn@latest add "https://ui.dalim.in/r/rain-default.json"Installation
pnpm dlx shadcn@latest add https://ui.dalim.in/r/styles/default/rain.json
Usage
import { Rain } from "@/components/ui/rain"<div className="relative h-[400px] w-full rounded-lg border bg-black">
<Rain lightningEnabled thunderEnabled className="text-blue-400">
<div className="relative z-10 flex h-full items-center justify-center">
<p className="text-lg font-medium text-white">
Content over animated rain background
</p>
</div>
</Rain>
</div>API Reference
Rain
Renders animated raindrops with optional lightning and thunder effects.
| Prop | Type | Default | Description |
|---|---|---|---|
intensity | number | 100 | Number of raindrops rendered. |
speed | number | 1 | Speed multiplier for raindrop fall. |
color | string | "rgba(174, 194, 224, 0.6)" | Raindrop color. |
angle | number | 0 | Wind angle in degrees (rotation of rain). |
dropSize | object | {min:1,max:3} | Minimum and maximum raindrop size. |
lightningEnabled | boolean | false | Enable lightning effects. |
lightningFrequency | number | 8 | Average frequency of lightning in seconds. |
thunderEnabled | boolean | false | Enable thunder sound effects. |
thunderVolume | number | 0.5 | Thunder volume (0–1). |
thunderDelay | number | 2 | Delay between lightning and thunder in seconds. |
className | string | – | Additional Tailwind/CSS classes applied to wrapper. |
children | ReactNode | – | Content to render above the rain. |