Der Hero ist der erste Eindruck deiner Seite. Er entscheidet in wenigen Sekunden, ob Besucher bleiben. Dieser Leitfaden zeigt, wie du mit React und Tailwind CSS einen Hero baust, der schnell lädt, klar kommuniziert und mit ruhiger Bewegung überzeugt.
- Ein Hero beantwortet drei Fragen sofort: worum es geht, warum es dich betrifft und was du als Nächstes tust.
- Die Struktur ist wichtiger als der Effekt. Erst Aufbau und Typografie, dann Bewegung.
- Das Hero-Bild ist meistens das größte Element der Seite und entscheidet über die Ladezeit.
- Bewegung führt den Blick. Ein Fade und ein kurzer Weg nach oben reichen fast immer.
Was ein guter Hero leisten muss
Ein Hero beantwortet drei Fragen sofort: Worum geht es, warum betrifft es mich und was tue ich als Nächstes. Alles andere ist zweitrangig.
Halte den Textblock kurz. Eine klare Überschrift, ein bis zwei Sätze Erklärung und eine eindeutige Handlung reichen. Zu viele Angebote lähmen die Entscheidung.
Worum geht es?
Kicker und Überschrift sagen in einem Blick, was hier angeboten wird.
Warum betrifft mich das?
Zwei Sätze, die den Nutzen benennen. Nicht die Firmengeschichte.
Was mache ich jetzt?
Eine Handlung, klar hervorgehoben. Der Rest ist Textlink.
- „Websites für Arztpraxen, in vier Wochen live“
- Ein Button, daneben ein Textlink
- Zwei Sätze, die die Überschrift belegen
- „Digitale Lösungen für morgen“
- Drei Buttons nebeneinander
- Ein Absatz mit fünf Sätzen
Jede Frage hat ihren Platz im Hero. Wer eine davon streicht, muss die Antwort woanders nachliefern.
Aufbau mit Tailwind
Ein zentriertes Raster mit großzügigen Abständen reicht für die meisten Heroes. Wichtiger als die Klassen ist, dass die Schriftgröße mit der Breite mitwächst, sonst brauchst du für jedes Gerät eine eigene Regel.
<section className=" px-6"> <div className="mx-auto flex flex-col "> <p>Kicker</p> <h1>Überschrift</h1> <p>Zwei Sätze</p> <div className="flex "> <a>Termin buchen</a> <a>Projekte</a> </div> </div></section>
Zeig auf eine markierte Klasse, dann siehst du ihre Stelle in der Vorschau.
Fünf Klassen bestimmen den ganzen Aufbau. Alles andere ist Inhalt.
<h1 className="font-display font-semibold leading-[1.04]" style={{ fontSize: "clamp(2rem, 5vw, 4rem)" }} Websites für Arztpraxen, in vier Wochen live</h1>
Bilder und Ladezeit
Nutzt du ein Hintergrundbild, ist es fast immer das größte Element im ersten Bildschirm und damit ausschlaggebend für den Largest Contentful Paint. Liefere es in einem modernen Format, in der richtigen Größe und mit hoher Priorität.
- Format
- WebP
- Größe
- 142 KB
- Maße
- 1600 × 1000
- Laden
- bevorzugt
- alt
- gesetzt
Fünf Angaben entscheiden, ob das Hero-Bild die Seite trägt oder ausbremst.
<img src="/heros/praxis.webp" alt="" fetchPriority="high" decoding="async" className="h-full w-full object-cover"/>
Gute Heroes nehmen Entscheidungen ab.
Drei Anordnungen, die tragen. Welche passt, entscheidet das Bildmaterial, nicht der Geschmack.
Dezente Animation mit framer-motion
Bewegung soll den Blick führen, nicht ablenken. Ein sanftes Einblenden der Überschrift beim Laden reicht meistens. Verzichte auf große Wege und schnelle Wechsel.
- initial
- opacity 0, y 12
- animate
- opacity 1, y 0
- duration
- 0.5 s
- ease
- cubic-bezier(.22, 1, .36, 1)
- stagger
- 80 ms
Zwölf Pixel Weg und eine halbe Sekunde. Mehr braucht ein Hero nicht.
Derselbe Weg, nur versetzt gestartet. Der Schalter zeigt, was bei weniger Bewegung passiert.
<motion.h1 initial={{ opacity: 0, y: 12 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.5, ease: [0.22, 1, 0.36, 1] }}
Fehler, die wir immer wieder sehen
Die meisten schwachen Heroes scheitern nicht an der Technik, sondern an einer Entscheidung, die niemand getroffen hat.
- Drei gleichwertige Buttons. Wer alles anbietet, empfiehlt nichts. Ein primärer Weg, höchstens ein zweiter als Textlink.
- Eine Überschrift, die nur die Branche nennt. Nenne, was du tust und für wen. Der Rest steht weiter unten.
- Ein Bild, das nur Fläche füllt. Wenn das Motiv austauschbar ist, ist es Ballast. Lieber mehr Weißraum als ein beliebiges Stockfoto.
- Animation als Selbstzweck. Alles, was gleichzeitig wackelt, hält niemanden.
Wenn dein Hero ohne das Bild nicht mehr funktioniert, war der Text das Problem.
So gehst du vor
Der Aufbau geht schneller, wenn du in dieser Reihenfolge arbeitest statt alles gleichzeitig zu entscheiden.
- Schreibe die Überschrift zuerst. Ohne Layout, als einen Satz. Wenn er nackt funktioniert, funktioniert er auch gesetzt.
- Setze den Text im Raster. Größen über clamp, Lesebreite begrenzen, Abstände großzügig.
- Bring das Bild dazu. Als WebP, in der richtigen Größe, mit hoher Priorität. Erst danach über Effekte nachdenken.
- Lege die Bewegung darüber. Ein Fade und wenige Pixel nach oben, gestaffelt. Danach einmal mit reduzierter Bewegung prüfen.
Wenn du nicht bei Null anfangen willst: in der Library liegen fertige Hero-Sections mit genau diesem Aufbau, als Quelltext zum Einsetzen.
