Über diese Vorlage
Das hier ist der Eintrag Hero-Bereich von Planetary Pulse, veröffentlicht mit dem Briefing, das ihn hervorgebracht hat, statt als Screenshot. Farbe bleibt auf grau #C2CCD3 darunter begrenzt, gesetzt in Helvetica, Arial. Der Eintrag nennt den Stack, der die Seite erzeugt hat (Tailwind und Vanilla JavaScript), statt ihn zu verschweigen. Die Bewegung bleibt auf Übergänge von 300ms, cubic-bezier(0.16, 1, 0.3, 1) und eine Videospur in Schleife beschränkt. Nimm es als Briefing für eine Bildungs- oder Community-Marke: Der Eintrag Hero-Bereich muss einem Nachbau standhalten, nicht nur dem ersten Blick.
Gemacht für
- Frontend-Entwickler, die das in Tailwind und Vanilla JavaScript nachbauen und die Übergänge spezifiziert statt geraten haben wollen.
- Übergib Tailwind und Vanilla JavaScript zusammen mit dem 1826x1080-Zuschnitt an die Entwicklung und lass sie den Rest nachbauen.
- Schreib deine eigene Headline und baue dieses Hero-Bereich-Design dann in Tailwind und Vanilla JavaScript mit unveränderten Maßen nach.
Was enthalten ist
- Navigation ohne Hintergrund. Die Wortmarke hält die linke Kante, rechts davon laufen die Links, alles in Helvetica, Arial gesetzt, damit die Leiste zur Seite darunter gehört und nicht zu einem eigenen System. Die Labels passen bei 280px in eine Zeile, und der aktive Eintrag ist über das Schriftgewicht markiert, nicht über eine Pille.
- Ein Medien-Element trägt die Stimmung. Die Komposition ist auf den Clip in 1826x1080 gebaut und nicht daneben, deshalb bekommen die Medien nie eine Kachel oder einen Rahmen. Das Poster bei 1826x1080 trägt die Komposition, wenn Autoplay nicht verfügbar ist, damit das Layout nicht zusammenfällt.
- Ziffern als Typografie. Ein kompakter Zahlenstreifen trägt die Aussagen, die sonst einen Absatz bräuchten, und hält damit die Komposition (Hero-Bereich) davon ab, zur Feature-Liste zu werden. Die Zahlen haben ein einziges Gewicht, die Reihe rankt ihre eigenen Statistiken also nicht.
- Navigation in einer Zeile. Unter 280px klappen die Links ein, statt in eine zweite Zeile umzubrechen.
Bewegung & Interaktion
Die Schleife übernimmt die Grundbewegung
Die Hintergrundbewegung kommt aus der 5,9s-Schleife in 1826x1080 und nicht aus Scroll-Effekten, deshalb bleibt die Seite ruhig und die Schrift lesbar. Der Clip ist stumm und inline, das erste Bild ist also ohne Interaktion verfügbar.
Schnell genug, um bewusst zu wirken
Das Animationsbudget ist klein und ausdrücklich benannt: 300ms mit cubic-bezier(0.16, 1, 0.3, 1), eingesetzt für Zustandswechsel und nicht für Auftritte. Die Werte sind kurz genug, um als Rückmeldung zu lesen und nicht als Animation. Schnelle Zustandswechsel, keine Scroll-Timelines.
Die Reihenfolge im Eintrag Hero-Bereich
Wenn deine Seite heute mit Features beginnt, ist das die Reihenfolge zum Übernehmen: die Navigation, die Kennzahlen-Zeile, das Kartenraster, die Feature-Liste und der Hintergrund-Clip vorn, das Stützdetail danach, und 100vh hohe Sektionen und Radius 9999px bestimmen den Abstand. Ein Leser im Bereich Bildung bekommt das Angebot vor den Optionen.
Die Zeitwerte hinter dem Eintrag Hero-Bereich
Bewegung beschränkt sich auf Übergänge von 300ms, eine Medienschleife von 5,9s und ein maskierter Zeilen-Reveal; sie läuft einmal beim Eintritt und tritt dann zurück, das richtige Budget, damit die Komposition (Hero-Bereich) lesbar bleibt. Nichts in diesem Eintrag Hero-Bereich animiert um seiner selbst willen.
Wie der Eintrag Hero-Bereich umbricht
Eine fluide Skala und eine gestufte sehen auf breitem Screen ähnlich aus. Vereng den Viewport, und der Unterschied zeigt sich: eine Größe zwischen 20px und 14px gegen feste Sprünge. Beide Zustände sind im selben Briefing beschrieben.
Häufige Fragen
Warum nennt der Eintrag Tailwind und Vanilla JavaScript überhaupt?
Nein. Das Briefing ist eine Spezifikation, keine Liste von Abhängigkeiten. Es wurde für Tailwind und Vanilla JavaScript geschrieben, dieselbe Komposition lässt sich aber in allem nachbauen, was du ohnehin nutzt. Der Stack ist genannt, damit du weißt, wie die Referenz entstanden ist.
Warum steht der Prompt von Planetary Pulse hier nicht abgedruckt?
Alles, was auf der Seite zitiert wird, stammt aus dem erfassten Briefing mit 26.446 Zeichen und nicht aus einer nachträglich verfassten Beschreibung. Deshalb passen die Zahlen und der Text zusammen.
Ist das Layout von Planetary Pulse für Mobilgeräte entworfen oder nur hineingequetscht?
Die Spezifikation nennt ihre Breakpoints (max-Breite 280px, min-Breite 640px und min-Breite 768px) und beschreibt, was sich an jedem ändert; das schmale Layout ist damit gestaltet und nicht geerbt.
