RainOnGlass

Hintergrund-Effekte

Regen auf einer Fensterscheibe bei Nacht: verschwommene Bokeh-Lichter im Hintergrund, Tropfen brechen das Licht wie echte Wasserlinsen (invertiertes scharfes Abbild der Szene im Tropfen), wachsen durch Kondensation, verschmelzen und laufen mit schlängelnder Spur herunter.

Live Demo

Tropfen brechen das Licht, wachsen, verschmelzen und laufen mit Spur herunter — Bokeh-Lichter funkeln

Props / API

Prop	Typ	Pflicht	Default	Beschreibung
`intensity`	`number`	Nein	`0.6`	Regenstärke (0.1 = wenige Tropfen, 1 = stark)
`bokehColors`	`string[]`	Nein	—	Bokeh-Lichtfarben der Nachtszene
`backgroundTop`	`string`	Nein	`'#0a1322'`	Hintergrundfarbe oben
`backgroundBottom`	`string`	Nein	`'#1a2c4a'`	Hintergrundfarbe unten
`blur`	`number`	Nein	`14`	Hintergrund-Unschärfe in Pixeln
`heroLight`	`{x?, y?, r?, color?} \| false`	Nein	—	Dominante warme Lichtquelle (Laterne); false = aus
`minHeight`	`string`	Nein	`'420px'`	Mindesthöhe
`className`	`string`	Nein	—	Zusätzliche CSS-Klasse

Code-Beispiel

<RainOnGlass
  intensity={0.7}
  bokehColors={['#f59e0b', '#67e8f9', '#f472b6', '#a5b4fc']}
  minHeight="70vh"
/>