RainOnGlassGL
Hintergrund-EffekteGPU-Fluid-Simulation „Regen auf Glas“ (WebGL2): Tropfen als prozedurales Höhenfeld im Fragment-Shader mit Stick-Slip-Lauf, Schweifen und Tröpfchen-Spuren. Brechung entsteht physikalisch aus dem Normalenfeld, Tiefenschärfe pro Pixel aus Mipmap-LODs. Mit Bokeh-Nachtszene, Laterne, Maus-Parallax und Ken-Burns-Hover.
Live Demo
3D-Szene wird geladen...
Props / API
| Prop | Typ | Pflicht | Default | Beschreibung |
|---|---|---|---|---|
intensity | number | Nein | 0.7 | Regenstärke (0.1 = Niesel, 1 = Wolkenbruch) |
bokehColors | string[] | Nein | — | Bokeh-Lichtfarben |
backgroundTop | string | Nein | '#0a1322' | Hintergrund oben |
backgroundBottom | string | Nein | '#1a2c4a' | Hintergrund unten |
heroLight | {x?, y?, r?, color?} | false | Nein | — | Dominante Lichtquelle; false = aus |
speed | number | Nein | 1 | Animationsgeschwindigkeit |
minHeight | string | Nein | '420px' | Mindesthöhe |
className | string | Nein | — | Zusätzliche CSS-Klasse |
Code-Beispiel
<RainOnGlassGL intensity={0.75} minHeight="70vh" />