RainBackground

Hintergrund-Effekte

Fotorealistische Regen-Simulation (Canvas 2D) mit echter Physik: Tropfen beschleunigen bis zur Terminal-Velocity (Motion-Blur-Streaks, Tiefenstaffelung), ballistische Splash-Partikel und perspektivische Ripples beim Aufprall, nasser Boden mit gespiegelten Lichtquellen und Tropfen-Reflexionen, Windböen, optional Blitze.

Live Demo

Tropfen mit Terminal-Velocity, Splashes, Ripples, gespiegelte Lichter — alle paar Sekunden ein Blitz

Props / API

Prop	Typ	Pflicht	Default	Beschreibung
`intensity`	`number`	Nein	`0.6`	Regenstärke (0.1 = Niesel, 1 = Wolkenbruch)
`wind`	`number`	Nein	`-0.25`	Wind: negativ = links, positiv = rechts (-1 bis 1)
`skyTop`	`string`	Nein	`'#0b1020'`	Himmelsfarbe oben
`skyBottom`	`string`	Nein	`'#1c2740'`	Himmelsfarbe am Horizont
`dropColor`	`string`	Nein	`'#aac6e8'`	Farbe der Tropfen (Hex)
`lights`	`RainLight[]`	Nein	—	Lichtquellen am Horizont {x: 0–1, color} — spiegeln sich im Boden
`groundRatio`	`number`	Nein	`0.24`	Anteil des nassen Bodens (0–0.5)
`lightning`	`boolean`	Nein	`false`	Gelegentliche Blitze
`minHeight`	`string`	Nein	`'420px'`	Mindesthöhe
`className`	`string`	Nein	—	Zusätzliche CSS-Klasse

Code-Beispiel

<RainBackground
  intensity={0.7}
  wind={-0.3}
  lightning
  lights={[
    { x: 0.18, color: '#f59e0b' },
    { x: 0.5, color: '#67e8f9' },
    { x: 0.82, color: '#f472b6' },
  ]}
  minHeight="70vh"
/>