React Rainfall

Install the package, then import its stylesheet once in your app.

npm install react-rainfall

Rain fills its parent element, so give the parent position: relative and a height. The rain layer is decorative and never intercepts pointer events.

import { Rain } from "react-rainfall";
import "react-rainfall/dist/style.css";
 
function WeatherPanel() {
  return (
    <div style={{ position: "relative", height: 600 }}>
      <Rain />
    </div>
  );
}

A profile is a preset for the whole scene. It supplies defaults for the properties it defines, and any prop you pass yourself takes precedence.

Control how many particles fall, what they look like and how fast they move.

Impacts play where a particle reaches the bottom edge of the parent.

Animated clouds drift behind the precipitation. Turn them on with showClouds, or with rainFromClouds.

<Rain
  profile="heavy-rain"
  angle={18}
  showClouds
  cloudCount={5}
  showLightning
  lightningFrequency={15}
  dropStyle="pixel"
  depth
/>

Lightning is a visual flash only. There is no thunder audio.

Wind slants the rain and varies the slant over time in gusts.

Render the rain as if it falls on a window instead of through open air.

The DOM renderer is the default. The canvas renderer draws precipitation and impacts together, which removes most particle DOM nodes. Clouds, glass, wind and lightning stay DOM/CSS in both.

<Rain renderer="canvas" profile="heavy-rain" quality="high" maxDrops={1200} />

Start, pause and scale the animation, and decide when it should stop on its own.

Use a ref when controls should act directly on Rain without mirroring animation state in React state. Use useRainfall when other UI needs to show the current play state and intensity.

const rainRef = useRef<RainHandle | null>(null);
 
<Rain ref={rainRef} profile="heavy-rain" />
<button onClick={() => rainRef.current?.triggerLightning()}>
  Flash lightning
</button>