Über diese Vorlage
Das hier ist der Eintrag Hero-Bereich von CoreOS, veröffentlicht mit dem Briefing, das ihn hervorgebracht hat, statt als Screenshot. Die Palette ist schwarz #2E3233 darunter. Geliefert wird React und Tailwind CSS, erfasst bei 1468x1080, damit der Rahmen feststeht, bevor die erste Zeile Code entsteht. Die Seite begrenzt die Bewegung auf Übergänge von 0.5s und eine Videospur in Schleife. Es ist die richtige Referenz für eine Hero-Bereich, die auf dem ersten Bildschirm bewusst gesetzt wirken muss, und sie richtet sich an ein Industrieunternehmen.
Gemacht für
- Wenn die Bewegung wegfallen muss, funktioniert das Hero-Bereich-Design trotzdem, weil dann eine feste Display-Größe von 62px und Abstände in 14px-Schritten die Hierarchie übernehmen.
- Produktmarketer, die brauchen, dass die Komposition (Hero-Bereich) auch mit 4,9s Video in Schleife hinter dem Text lesbar bleibt.
- Gemacht für einen Solo-Gründer, der ein Hero-Bereich-Design für ein Industrieunternehmen ausliefert und kein Designsystem im Rücken hat.
Was enthalten ist
- Links vor der Aktion. Die Leiste überlagert Hero-Bereich, statt Raum darunter zu belegen, damit die Komposition die volle Höhe des ersten Bildschirms behält. Die Leiste liegt ohne eigene Hintergrundfläche über der Komposition von 1468x1080, damit die Medien darunter bis an den Rand durchlaufen.
- Obere Zeile, eine Aktion. Die Zeile wird aus ihrer eigenen Schrift bemessen und nicht aus einer festen Header-Höhe. Übernimm dieses Muster, wenn die Navigation einen lauten ersten Screen überstehen soll.
- Größen stehen im Briefing. Die Größen wurden am Render in 1468x1080 abgelesen: eine feste Display-Größe von 62px, Abstände in 14px-Schritten und 0.5s Übergänge. Weil die Werte feststehen, ändert ein Austausch die Optik, ohne den Rhythmus zu verändern. Wo das Briefing schweigt, schweigt es mit Absicht.
- Ein Medien-Element trägt die Stimmung. Das Video über 1468x1080 läuft 4,9s in Schleife hinter dem Text, stumm und inline, ohne Tönungsebene dazwischen. Das Poster bei 1468x1080 trägt die Komposition, wenn Autoplay nicht verfügbar ist, damit das Layout nicht zusammenfällt. Exportiere bei 1468x1080 oder breiter, damit der Zuschnitt ehrlich bleibt.
Bewegung & Interaktion
Eine Schleife, keine Timeline
Die Hintergrundbewegung kommt aus der 4,9s-Schleife in 1468x1080 und nicht aus Scroll-Effekten, deshalb bleibt die Seite ruhig und die Schrift lesbar. Der Clip ist kurz genug, um ohne sichtbare Naht zu schleifen, und das zählt mehr als seine Auflösung.
Das ganze Animationsbudget
Zustandswechsel sind mit 0.5s angegeben, die Rückmeldung der Bedienelemente ist damit ein gestalteter Wert und kein Browser-Standard. Das Easing steht zusammen mit der Dauer im Briefing (0.5s), ein Nachbau kann also nicht unbemerkt ein anderes Gefühl einsetzen.
Was du in CoreOS zuerst änderst
Eine reine Substitution hat eine Grenze: Wenn dein Produkt eine andere Hierarchie braucht, arbeiten eine feste Display-Größe von 62px und Abstände in 14px-Schritten dagegen. Ändere in dem Fall zuerst die Reihenfolge und danach die Werte. Eine andere Marke kann den ganzen Rahmen wiederverwenden.
Wie CoreOS den ersten Blick ordnet
Wenn ein Leser im Bereich Industrie auf einem einzelnen Screen landet, scannt er, bevor er liest. Das Layout antwortet darauf: die Navigation und der Hintergrund-Clip sind auf das Scannen hin dimensioniert, und eine feste Display-Größe von 62px und Abstände in 14px-Schritten halten jede Station unterscheidbar. Ein Leser im Bereich Industrie bekommt das Angebot vor den Optionen.
Die Zahlen hinter dem Eintrag Hero-Bereich
Der Preis für Wiederholbarkeit sind feste Zahlen: eine feste Display-Größe von 62px, Abstände in 14px-Schritten und 0.5s Übergänge. Genau darum geht es bei dieser Referenz: dieselbe Seite in einer anderen Marke, ohne einen neuen Satz Vermutungen. Nichts in diesem Eintrag Hero-Bereich hängt an einer Voreinstellung.
Häufige Fragen
Was kann ich mit dem Briefing zu CoreOS machen, sobald ich es habe?
Alles, was auf der Seite zitiert wird, stammt aus dem erfassten Briefing mit 5.790 Zeichen und nicht aus einer nachträglich verfassten Beschreibung. Deshalb passen die Zahlen und der Text zusammen.
Ist der Prompt zu CoreOS eine fertige Spezifikation oder ein Ausgangspunkt?
Das Briefing beschreibt den Bau, nicht die Stimmung: Es nennt die Komposition bei 1468x1080, die Abstände und die Bewegungswerte. Das gerenderte Bild dient darin an keiner Stelle als verbindliche Grundlage.
Wie viel von CoreOS hängt von React und Tailwind CSS ab?
CoreOS 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.
