AuroraHero

Layout & Hero

Hero-Sektion mit animiertem Aurora-Gradient: wabernde Farb-Blobs (mix-blend-mode: screen), Grain-Overlay und Gradient-Headline. Nutzt CSS @property für den animierten Gradient-Winkel.

Live Demo

Webdesign aus der Pfalz

Websites, die leuchten

Moderne, blitzschnelle Websites für kleine Unternehmen — DSGVO-konform gehostet in Deutschland.

Projekt starten Referenzen ansehen

Props / API

Prop	Typ	Pflicht	Default	Beschreibung
`title`	`string`	Ja	—	Hauptüberschrift
`subtitle`	`string`	Nein	—	Untertitel unter der Headline
`badge`	`string`	Nein	—	Kleines Badge über der Headline
`colors`	`string[]`	Nein	`['#2dd4bf', '#38bdf8', '#fb7185']`	Aurora-Farben (2–4 Farben)
`backgroundColor`	`string`	Nein	`'#04070d'`	Hintergrundfarbe
`minHeight`	`string`	Nein	`'100vh'`	Mindesthöhe der Sektion
`gradientTitle`	`boolean`	Nein	`true`	Headline als animierter Gradient-Text
`grain`	`boolean`	Nein	`true`	Film-Grain-Overlay anzeigen
`align`	`'center' \| 'left'`	Nein	`'center'`	Ausrichtung des Inhalts
`children`	`ReactNode`	Nein	—	CTA-Buttons unter dem Untertitel
`className`	`string`	Nein	—	Zusätzliche CSS-Klasse

Code-Beispiel

<AuroraHero
  badge="Neu in Dahn"
  title="Webdesign, das leuchtet"
  subtitle="Moderne Websites für kleine Unternehmen — schnell, sicher und DSGVO-konform."
  colors={['#2dd4bf', '#38bdf8', '#fb7185']}
  minHeight="80vh"
>
  <a href="#kontakt" style={{ background: '#fff', color: '#0f172a', padding: '0.9rem 1.8rem', borderRadius: 12, fontWeight: 700, textDecoration: 'none' }}>
    Projekt starten
  </a>
</AuroraHero>