Über diese Vorlage
F1 Racing Hub: Hero-Bereich für Lifestyle, gebaut aus einem einzigen geschriebenen Briefing. Diese Seite dokumentiert es. Die ganze Seite baut auf tiefes blau #0A0E1C darunter und helles orange #EDB40B für die Akzente auf. Die Referenz ist mit React und Tailwind CSS gebaut; die Layout-Entscheidungen stehen unabhängig davon im Briefing. Die Bewegung ist Übergänge von 400ms, cubic-bezier(0.16,1,0.3,1) und eine Videospur in Schleife und bleibt so zurückhaltend, dass die Texte weiter führen. Es ist die richtige Referenz für eine Hero-Bereich, die auf dem ersten Bildschirm bewusst gesetzt wirken muss, und sie richtet sich an eine Lifestyle-Marke.
Gemacht für
- Wer mit einem KI-Builder arbeitet und ein Briefing will, das ein Breakpoint bei 768px schon enthält, statt sie dem Modell zu überlassen.
- Growth-Teams, die ein Hero-Bereich-Design für eine Lifestyle-Marke neu einfärben und den 1470x1080-Rahmen behalten wollen, während sich die Angebotstexte ändern.
- Produktmarketer, die brauchen, dass die Komposition (Hero-Bereich) auch mit 7s Video in Schleife hinter dem Text lesbar bleibt.
Was enthalten ist
- Eine Leiste ohne Beiwerk. Die obere Zeile trägt die Wortmarke, vier bis fünf Links und eine einzelne Aktion in #EDB40B, knapp genug, um neben dem Rest der Seite leise zu bleiben. Unter 768px klappen die Links zu einem bildschirmfüllenden Overlay zusammen. Unter 768px klappen die Links ein, statt in eine zweite Zeile umzubrechen.
- Ein Clip, keine Illustration. Der Clip läuft 7s in 1470x1080 und schleift ohne sichtbaren Schnitt, dadurch wirkt er als Fläche und nicht als Filmmaterial. Das Poster bei 1470x1080 trägt die Komposition, wenn Autoplay nicht verfügbar ist, damit das Layout nicht zusammenfällt.
- Die Skala ist begrenzt, nicht gestuft. Das Briefing nutzt eine Größe zwischen 13px und 120px für die Headline, und das verhindert, dass eine lange Zeile unschön umbricht. Weil die Skala begrenzt ist, springt die Display-Zeile nie zwischen Breakpoints.
- Navigation ohne Hintergrund. Die Labels passen bei 768px in eine Zeile, und der aktive Eintrag ist über das Schriftgewicht markiert, nicht über eine Pille.
Bewegung & Interaktion
Kurze, aufeinander abgestimmte Zeiten
Das Animationsbudget ist klein und ausdrücklich benannt: 400ms auf cubic-bezier(0.16,1,0.3,1), eingesetzt für Zustandswechsel und nicht für Auftritte. Kurze Zeiten lassen die Seite gesetzt wirken; ein langsamer Standard würde die Komposition zunichtemachen.
Hintergrundbewegung ohne Scroll-Bibliothek
Die Hintergrundbewegung ist ein Clip von 7s in 1470x1080, der leise hinter dem Text schleift statt auf den Zeiger zu reagieren. Sonst animiert nichts auf der Seite durchgehend, das Medium ist also das Einzige, das Aufmerksamkeit verlangt.
Was du in F1 Racing Hub zuerst änderst
Eine Zeile, eine Schrift, ein Akzent: Diese drei Substitutionen ändern das Design am stärksten. Schrift von 13px bis 120px, 42vh hohe Sektionen, Abstände in 20px-Schritten, 400ms Übergänge und Easing cubic-bezier(0.16,1,0.3,1) sind die Werte, die sich nicht bewegen sollten. Eine andere Marke kann den ganzen Rahmen wiederverwenden.
Die Zeitwerte hinter dem Eintrag Hero-Bereich
Wo ein Template jede Sektion beim Eintritt animiert, ist die Liste hier kurz: Übergänge von 400ms, eine Medienschleife von 7s und Hover- und Druckzustände, und dann Ruhe. Nichts in diesem Eintrag Hero-Bereich animiert um seiner selbst willen.
Was eine Lifestyle-Marke hier gewinnt
Die meisten Seiten im Bereich Lifestyle hängen eine weitere Sektion an, wenn der erste Screen schwach ist. Diese hier streicht Optionen: die Navigation, die Überschrift, die Kennzahlen-Zeile und das Kartenraster in genau dieser Reihenfolge, und nichts, was das Angebot wiederholt. F1 Racing Hub nennt das Angebot einmal und lässt die Komposition es wiederholen, statt eine zweite Behauptung zu ergänzen.
Häufige Fragen
Was bekomme ich, wenn ich das Briefing zu F1 Racing Hub kopiere?
Das erfasste Briefing umfasst 10.448 Zeichen und beschreibt Rahmen, Schriftgrößen-Skala, Palette und Übergänge. Wenn du es kopierst, hast du genau diesen Text; schickst du es an Studio, wird dieselbe Anfrage mit der bereits beschriebenen Seite vorbereitet.
Warum steht der Prompt von F1 Racing Hub hier nicht abgedruckt?
Alles, was auf der Seite zitiert wird, stammt aus dem erfassten Briefing mit 10.448 Zeichen und nicht aus einer nachträglich verfassten Beschreibung. Deshalb passen die Zahlen und der Text zusammen.
Wie viel von F1 Racing Hub hängt von React und Tailwind CSS ab?
F1 Racing Hub wurde in React und Tailwind CSS gebaut, und der Eintrag nennt das, um die Herkunft zu belegen. Das Briefing beschreibt Positionen, Größen und Zeitwerte, also lässt sich die Seite in jedem Framework nachbauen, das Schrift setzen und Elemente platzieren kann.
