Über diese Vorlage
Gulfselite ist eine brauchbare Referenz für dieses Publikum: die Komposition (Hero-Bereich), ausgelegt für eine Reise- oder Tourismusmarke, vermessen und bereit zum Nachbauen. Die Palette ist gedämpftes orange #69574B darunter und weiß #FEFEFE für die Schrift, gesetzt in Inter. Der Bau ist Tailwind und Vanilla JavaScript; jedes Maß darin ist aufgeschrieben, und genau das macht ihn wiederverwendbar. Die Bewegung beschränkt sich auf Übergänge von 120ms und eine Videospur in Schleife. Diese Referenz ist für eine Reise- oder Tourismusmarke gedacht, wenn der erste Screen vor dem Build feststehen soll.
Gemacht für
- Frontend-Entwickler, die das im Normalbetrieb ausliefern müssen, nutzen Tailwind und Vanilla JavaScript als Referenzimplementierung.
- Externe Teams, die ein Hero-Bereich-Design übernehmen und ein 1920x1448 Rahmen im Repository festhalten müssen, bevor der erste Commit läuft.
- Gemacht für Designer, die in ein Projekt kommen, das schon auf Tailwind und Vanilla JavaScript läuft und nur noch neue Texte braucht.
Was enthalten ist
- Obere Zeile, eine Aktion. Eine schmale Leiste liegt über der Komposition (Hero-Bereich), die Wortmarke links, die Links in Inter gesetzt, damit die Komposition zuerst als Inhalt und erst danach als Rahmen wirkt. Die Leiste liegt ohne eigene Hintergrundfläche über der Komposition von 1920x1448, damit die Medien darunter bis an den Rand durchlaufen. Eine Aktion pro Leiste.
- Größen im Briefing fixiert. Das Layout ist gegen feste Werte gelöst (Abstände in 20px-Schritten und 120ms Übergänge), und das hält den ersten Screen bei jeder Breite komponiert. Die Rahmenproportionen sind zusammen mit den Größen festgehalten, damit ein Nachbau auch das Seitenverhältnis trifft.
- Links vor der Aktion. In der Leiste animiert beim Scrollen nichts; sie steht vom ersten Frame an und hält sich danach zurück. Teste die Leiste über deinen eigenen Medien, bevor sie einen Hintergrund bekommt.
- Werte zum Nachmessen. Die Abstände sind genauso zitiert (Abstände in 20px-Schritten und 120ms Übergänge) und nicht als Skala, die von selbst weiterwächst.
Bewegung & Interaktion
Kurze, aufeinander abgestimmte Zeiten
Das Briefing legt den Übergangswert auf 120ms fest, ein Nachbau kann also keinen langsameren Standard einsetzen. Fokus-Zustände laufen mit demselben Wert wie Hover, Tastatur- und Zeiger-Rückmeldung passen dadurch zusammen.
Die Schleife übernimmt die Grundbewegung
Der Hintergrundclip läuft 9,9s in 1920x1448 als Endlosschleife, stumm und inline, deshalb bewegt sich die Seite weiter, während die Aufmerksamkeit auf dem Text liegt. Eine Scroll-Bibliothek ist nicht nötig, denn die einzige Hintergrundbewegung ist das Medium selbst. Ein Posterbild springt ein, wenn Autoplay blockiert wird, die Bewegung ist also ein Zusatz und keine Voraussetzung.
Die Zeitwerte hinter dem Eintrag Hero-Bereich
Ein fertiges Animationspaket wäre schneller ausgeliefert gewesen. Das Briefing hält es stattdessen kurz: Übergänge von 120ms, eine Medienschleife von 9,9s und eine Überschrift Wort für Wort, und deshalb wirkt die Seite verfasst statt inszeniert. Nichts in diesem Eintrag Hero-Bereich animiert um seiner selbst willen.
So wird der Eintrag Hero-Bereich deiner
Ändere zuerst den Inhalt und prüf danach den Rahmen. Abstände in 20px-Schritten und 120ms Übergänge sind die Werte, die du beim Tauschen des Textes schützt. Hilft ein neues Element nicht, das Angebot oder den nächsten Schritt zu erklären, gehört es unter den Fold.
Wie der Eintrag Hero-Bereich umbricht
Wenn der Text lang ist, bricht zuerst das schmale Layout. Hier greift die Klemmung: eine Größe zwischen 40px und 20px fängt die Änderung auf, und die Skala ist fließend statt gestuft. Eine Quetschung wäre billiger gewesen und würde nicht halten.
Häufige Fragen
Warum nennt der Eintrag Tailwind und Vanilla JavaScript überhaupt?
Die Referenz ist zufällig in Tailwind und Vanilla JavaScript gebaut. Im Layout hängt nichts von dieser Entscheidung ab: Abstände, Schrift und Bewegungswerte übertragen sich auf das, was du bereits verwendest.
Warum steht der Prompt von Gulfselite hier nicht abgedruckt?
Alles, was auf der Seite zitiert wird, stammt aus dem erfassten Briefing mit 2.498 Zeichen und nicht aus einer nachträglich verfassten Beschreibung. Deshalb passen die Zahlen und der Text zusammen.
Wie lang ist der Prompt hinter Gulfselite?
Das Briefing beschreibt den Bau, nicht die Stimmung: Es nennt die Komposition bei 1920x1448, die Abstände und die Bewegungswerte. Das gerenderte Bild dient darin an keiner Stelle als verbindliche Grundlage.
