Text3D
Hintergrund-EffekteMassive Display-Headline mit echter Tiefenwirkung: Die Extrusion entsteht aus gestapelten text-shadow-Ebenen, der Schriftzug rotiert zur Mausposition und die Tiefe verschiebt sich sichtbar mit.
Live Demo
Props / API
| Prop | Typ | Pflicht | Default | Beschreibung |
|---|---|---|---|---|
text | string | Ja | — | Der Text |
depth | number | Nein | 10 | Extrusionstiefe in Pixeln |
color | string | Nein | '#fdf6e3' | Schriftfarbe (Vorderseite) |
depthColor | string | Nein | '#b45309' | Farbe der Flanke |
fontSize | string | Nein | — | Schriftgröße (CSS-Wert, clamp empfohlen) |
maxTilt | number | Nein | 16 | Maximaler Neigungswinkel |
className | string | Nein | — | Zusätzliche CSS-Klasse |
Code-Beispiel
<Text3D text="BELLA NAPOLI" depth={12} color="#fdf6e3" depthColor="#b45309" />