React Rainfall

Beautiful, tunable rain for your React app. Clouds, lightning, and splashes included.

npm install react-rainfall

📖Docs 🐙GitHub 📦npm

Fully typed
Rain, snow & hail
Clouds & lightning
Wind & glass effects
Preset profiles

SCENE PRESETS

Set the mood.

MIDNIGHT RAIN

MIDNIGHT · SOFT RAIN

Rain taps at the quiet hours.

A living rainfall layer, tuned to set the mood.

MIDNIGHT RAIN

Drops

profile

dropStyle

size

duration

numDrops68

angle20°

dropletOpacity0.52

dropletColor

#daeaff

rainEffect: rainbow

default

depth

default

Impact

showImpact

impactStyle

impactThickness2.5pxdefault

impactOpacity0.65default

Clouds

showClouds

default

cloudProfile

rainFromClouds

default

cloudCount3default

cloudSize320pxdefault

cloudSpeed36sdefault

cloudOpacity0.4default

cloudDrift120pxdefault

cloudBlur4pxdefault

cloudColor

#43527f

default

Wind

showWind

default

windProfile

windVariation8°default

gustFrequency8sdefault

Surface

surface

glassFog0.18default

glassRefraction2pxdefault

Lightning

showLightning

default

lightningFrequency9sdefault

flashDuration450msdefault

lightningColor

#dfe6ff

default

Playback

playing

default

intensity1default

pauseWhenHidden

default

respectReducedMotion

default

const options: dropletOptions = {
  size: "long",
  numDrops: 68,
  angle: 20,
  dropletOpacity: 0.52,
  dropletColor: "rgb(218, 234, 255)",
  showImpact: true,
};

<Rain {...options} />