ParallaxHero3D

Layout & Hero

Hero-Sektion als 3D-Diorama: Headline und frei platzierbare Deko-Ebenen liegen auf verschiedenen Z-Tiefen und verschieben sich bei Mausbewegung gegeneinander, die ganze Bühne neigt sich subtil mit.

Live Demo

Echte italienische Küche

Steinofen-Pizza, hausgemachte Pasta und Dolci wie bei Nonna — mitten in Dahn.

Zur Speisekarte Tisch reservieren

Props / API

Prop	Typ	Pflicht	Default	Beschreibung
`title`	`string`	Ja	—	Hauptüberschrift
`subtitle`	`string`	Nein	—	Untertitel
`layers`	`ParallaxLayer[]`	Nein	—	Deko-Ebenen {node, depth, x, y, size?}
`children`	`ReactNode`	Nein	—	CTA-Inhalt
`background`	`string`	Nein	—	Hintergrund (Gradient)
`minHeight`	`string`	Nein	`'480px'`	Mindesthöhe
`strength`	`number`	Nein	`1`	Parallax-Stärke
`className`	`string`	Nein	—	Zusätzliche CSS-Klasse

Code-Beispiel

<ParallaxHero3D
  title="Echte italienische Küche"
  subtitle="Steinofen-Pizza, hausgemachte Pasta und Dolci wie bei Nonna."
  layers={[
    { node: '🍕', depth: -2, x: 12, y: 22, size: '2.6rem' },
    { node: '🌿', depth: 1.5, x: 84, y: 18 },
    { node: '🍅', depth: 2.5, x: 16, y: 74 },
  ]}
>
  <a href="#speisekarte">Zur Speisekarte</a>
</ParallaxHero3D>