RolloverNav

Navigation

Der typografische Award-Hover: Beim Überfahren rollt jeder Buchstabe einzeln nach oben aus dem Sichtfeld, während sein farbiges Duplikat von unten hereinrollt — gestaffelt von links nach rechts, plus wachsende Underline.

Live Demo

Über die Links fahren — jeder Buchstabe rollt einzeln mit Stagger

Props / API

Prop	Typ	Pflicht	Default	Beschreibung
`items`	`RolloverNavItem[]`	Ja	—	Navigationspunkte {href, label}
`logo`	`ReactNode`	Nein	—	Logo links
`rightContent`	`ReactNode`	Nein	—	Inhalt rechts (z.B. CTA)
`color`	`string`	Nein	`'#f2ede4'`	Textfarbe
`hoverColor`	`string`	Nein	`'#c8f04e'`	Farbe der hereinrollenden Buchstaben
`backgroundColor`	`string`	Nein	`'#14130f'`	Hintergrundfarbe
`fontSize`	`string`	Nein	`'0.95rem'`	Schriftgröße der Links
`staggerMs`	`number`	Nein	`22`	Stagger pro Buchstabe in ms
`renderLink`	`(item, props) => ReactNode`	Nein	—	Custom Link-Renderer
`className`	`string`	Nein	—	Zusätzliche CSS-Klasse

Code-Beispiel

<RolloverNav
  logo={<strong style={{ fontSize: '1.1rem' }}>STUDIO</strong>}
  items={[
    { href: '/arbeiten', label: 'Arbeiten' },
    { href: '/studio', label: 'Studio' },
    { href: '/journal', label: 'Journal' },
    { href: '/kontakt', label: 'Kontakt' },
  ]}
  hoverColor="#c8f04e"
/>