WaveField
Hintergrund-EffekteWogendes 3D-Partikelfeld (Three.js): Tausende Lichtpunkte bewegen sich wie eine Wasseroberfläche aus überlagerten Sinuswellen, die Kamera schwebt sanft mit der Maus. Edler, ruhiger Hero-Hintergrund.
Live Demo
3D-Szene wird geladen...
Props / API
| Prop | Typ | Pflicht | Default | Beschreibung |
|---|---|---|---|---|
color | string | Nein | '#38bdf8' | Partikelfarbe |
colorDeep | string | Nein | '#0e7490' | Zweite Farbe (Tiefe) |
background | string | Nein | '#030712' | Hintergrundfarbe |
density | number | Nein | 110 | Rasterauflösung pro Achse |
amplitude | number | Nein | 2.4 | Wellenhöhe |
speed | number | Nein | 1 | Geschwindigkeit |
minHeight | string | Nein | '420px' | Mindesthöhe |
className | string | Nein | — | Zusätzliche CSS-Klasse |
Code-Beispiel
<WaveField color="#38bdf8" colorDeep="#0e7490" minHeight="70vh" />