MorphBlob
Hintergrund-EffekteOrganisch morphender 3D-Blob (Three.js): Eine Ikosaeder-Oberfläche wird von Sinusfeldern verformt und von zwei farbigen Lichtern irisierend beleuchtet. Lehnt sich zur Maus. Der Trend-Hingucker für Hero-Sektionen.
Live Demo
3D-Szene wird geladen...
Props / API
| Prop | Typ | Pflicht | Default | Beschreibung |
|---|---|---|---|---|
color1 | string | Nein | '#22d3ee' | Erste Lichtfarbe |
color2 | string | Nein | '#e879f9' | Zweite Lichtfarbe |
background | string | Nein | '#070b14' | Hintergrund ('transparent' möglich) |
intensity | number | Nein | 0.45 | Verformungsstärke (0.1–1) |
speed | number | Nein | 1 | Geschwindigkeit |
wireframe | boolean | Nein | false | Wireframe-Look |
minHeight | string | Nein | '420px' | Mindesthöhe |
className | string | Nein | — | Zusätzliche CSS-Klasse |
Code-Beispiel
<MorphBlob color1="#22d3ee" color2="#e879f9" intensity={0.5} minHeight="60vh" />