Über diese Vorlage
PROMPT wurde bei 1472x1080 erfasst und als Spezifikation abgelegt, nicht als Galeriebild. Die Palette ist schwarz #000000 darunter und weiß #FFFFFF für die Schrift, gesetzt in Inter Tight. Der Bau ist React und Tailwind CSS; jedes Maß darin ist aufgeschrieben, und genau das macht ihn wiederverwendbar. Die Seite begrenzt die Bewegung auf Übergänge von 80ms und eine Videospur in Schleife. Lass es beim Schreiben offen: Die 13.186 Zeichen Briefing sind der Teil, der sich auf deine Seite überträgt.
Gemacht für
- Wenn drei Leute an einem Hero-Bereich-Design arbeiten, gib Content-Leads 100vh hohe Sektionen und Abstände in 32px-Schritten statt eines Screenshots.
- Produktmarketer, die brauchen, dass die Komposition (Hero-Bereich) auch mit 5,7s Video in Schleife hinter dem Text lesbar bleibt.
- Gemacht für Content-Leads, die ein Hero-Bereich-Design neu betexten, dessen Headline so lang bleiben muss wie die von PROMPT.
Was enthalten ist
- Zurückhaltende Navigation. 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 1472x1080, damit die Medien darunter bis an den Rand durchlaufen.
- Werte bis in den Build. Das Briefing hält seine Größen bei der Aufnahme fest (100vh hohe Sektionen, Abstände in 32px-Schritten und 80ms Übergänge), damit sich ein Nachbau überprüfen und nicht schätzen lässt. Die Rahmenproportionen sind zusammen mit den Größen festgehalten, damit ein Nachbau auch das Seitenverhältnis trifft.
- Karten übernehmen die Struktur. Das Raster ist die Struktur: gleich große Panels, in Inter Tight gesetzt, so angeordnet, dass das Auge quer statt nach unten wandert. Das Raster fällt auf eine Spalte zusammen, ohne die Reihenfolge der Panels zu ändern.
- Links vor der Aktion. Eine Aktion pro Leiste. Die Referenz wurde mit 1472x1080 erfasst.
Bewegung & Interaktion
Zeiten in Millisekunden
Das Briefing legt den Übergangswert auf 80ms fest, ein Nachbau kann also keinen langsameren Standard einsetzen. Jeder Zustandswechsel nennt einen Wert, der Browser-Standard kommt nie zum Einsatz.
Hintergrundbewegung ohne Scroll-Bibliothek
Ein einziger Clip von 5,7s ist die ganze Hintergrundebene: Er läuft hinter dem Text, schleift ohne sichtbaren Schnitt und reagiert nie auf den Zeiger. Die Schleife ist auf Cover zugeschnitten, die Komposition hängt also nicht an einer bestimmten Bildgröße. Dreh oder exportiere in 1472x1080 oder breiter.
Was der Eintrag Hero-Bereich richtig macht
PROMPT funktioniert, weil die Hierarchie entschieden und nicht dekoriert ist. Das Briefing hat die Zahlen schon festgelegt: 100vh hohe Sektionen, Abstände in 32px-Schritten und 80ms Übergänge, damit neuer Text in den Rahmen fällt, statt ihn wieder aufzureißen. PROMPT nennt das Angebot einmal und lässt die Komposition es wiederholen, statt eine zweite Behauptung zu ergänzen.
Die Reihenfolge im Eintrag Hero-Bereich
Der Preis ist Geduld: Die Seite hält das Detail zurück, das ein scanbares Raster sofort liefern würde. Was sie dafür kauft, ist ein erster Screen, auf dem die Navigation, das Ankündigungs-Badge, die Kennzahlen-Zeile, das Kartenraster und die Feature-Liste nicht falsch gelesen werden können. Ein Leser im Bereich Agentur bekommt das Angebot vor den Optionen.
Wie der Eintrag Hero-Bereich umbricht
Die meisten Responsive-Arbeiten hören beim Ausblenden auf. Hier ändert das Layout seine Form: der Bereich wird auf 100vh gehalten, die Navigation klappt zu einem mobilen Menü zusammen und die Bewegung hat einen Reduced-Motion-Zweig, und nichts Wichtiges fällt weg, damit der Fold passt. Autoplay und Bewegung sind ehrlich behandelt, die Seite kommuniziert also auch ohne sie.
Häufige Fragen
Ist der Prompt zu PROMPT eine fertige Spezifikation oder ein Ausgangspunkt?
Das erfasste Briefing umfasst 13.186 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.
Brauche ich React und Tailwind CSS, um PROMPT nachzubauen?
PROMPT 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.
Was steuert die Bewegung in PROMPT?
Auftritte und Zustandswechsel liegen im Bereich von 80ms mit einem Reduced-Motion-Zweig im Briefing. Sie hängen an Zustandswechseln statt an einer Scroll-Bibliothek und halten die Texte nie auf.
