Über diese Vorlage
Velorah ist die Referenz (Hero-Bereich) für dieses Publikum, also für eine Agentur oder ein Studio. Das Briefing dahinter ist eine vollständige Bauvorgabe statt eines Moodboards. Sie beginnt mit „Where dreams rise through the silence“ und gibt dieser Zeile den Rahmen, statt sie in eine Karte zu schrumpfen. Die Palette umfasst petrol #01405F darunter und gelb #D9BF63 für die Schrift, die Schrift ist Inter. Die Referenz ist mit React und Tailwind CSS gebaut; die Layout-Entscheidungen stehen unabhängig davon im Briefing. Die Seite begrenzt die Bewegung auf Übergänge von 0.8s. Lass es beim Schreiben offen: Die 3.788 Zeichen Briefing sind der Teil, der sich auf deine Seite überträgt.
Gemacht für
- Gründer, die eine Agentur briefen, nehmen den 800x589-Rahmen als Abnahmekriterium für die erste Runde.
- Gemacht für Content-Leads, die ein Hero-Bereich-Design neu betexten, dessen Headline so lang bleiben muss wie die von Velorah.
- Wenn du das Hero-Bereich-Design von Velorah auf deine eigene Schrift umstellst, behalte die Proportionen von Inter, sonst passt die Schriftgrößen-Skala nicht mehr.
Was enthalten ist
- Leiste im Raster der Seite. 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 800x589, damit die Medien darunter bis an den Rand durchlaufen.
- Werte bis in den Build. Hier ist nichts geschätzt. Die Spezifikation legt Abstände in 90px-Schritten und 0.8s Übergänge fest, und der Rest des Layouts leitet sich aus diesen Werten ab. Die Rahmenproportionen sind zusammen mit den Größen festgehalten, damit ein Nachbau auch das Seitenverhältnis trifft.
- Zurückhaltende Navigation. Die Navigation ist eine einzige Zeile ohne zweite Ebene darunter.
- Nichts davon ist geerbt. Die Abstände sind genauso zitiert (Abstände in 90px-Schritten und 0.8s Übergänge) und nicht als Skala, die von selbst weiterwächst.
Bewegung & Interaktion
Rückmeldung an den Bedienelementen
Die Seite reagiert nur dort, wo man handeln kann: Hover-Zustände auf Buttons und Links statt auf jeder Karte. Ein Bedienelement, das interaktiv aussieht, verhält sich auch so; es gibt keine falschen Affordanzen.
Eine Dauer für die Bedienelemente
Zustandswechsel sind mit 0.8s 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.8s), ein Nachbau kann also nicht unbemerkt ein anderes Gefühl einsetzen.
Velorah als Spezifikation lesen
Fast jede Entscheidung hier ist ein prüfbarer Wert: Abstände in 90px-Schritten und 0.8s Übergänge. Das Medium ist ein Standbild in 800x589. Die Schrift bleibt in Inter, ein Ersatz muss also dieselben Proportionen behalten. Nichts in diesem Eintrag Hero-Bereich hängt an einer Voreinstellung.
Die Reihenfolge im Eintrag Hero-Bereich
Setz deinen eigenen Text in diesen Eintrag Hero-Bereich, und die Abfolge hält, weil die Elemente nicht austauschbar sind: die Navigation, die Kennzahlen-Zeile und der Hintergrund-Clip tragen jeweils eine Aufgabe. Ein Leser im Bereich Agentur bekommt das Angebot vor den Optionen.
Was sich in Velorah bewegt
Zähl die animierten Elemente, und die Liste ist kurz: Übergänge von 0.8s und Hover- und Druckzustände. Nichts in diesem Eintrag Hero-Bereich animiert um seiner selbst willen.
Häufige Fragen
Ist der Prompt zu Velorah eine fertige Spezifikation oder ein Ausgangspunkt?
Das erfasste Briefing umfasst 3.788 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 nennt der Eintrag React und Tailwind CSS überhaupt?
Velorah 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.
Wie viel von Velorah ist animiert?
Die Bewegung ist genauso genau festgelegt wie das Layout: Zustandswechsel sind im Bereich von 0.8s abgeschlossen. Portiere zuerst die Komposition und danach die Zeitwerte, denn sie lassen sich leichter angleichen, wenn das Layout steht.
