Über diese Vorlage
Audio Showcase ist die Referenz (Hero-Bereich) für dieses Publikum, also für eine Lifestyle-Marke. Das Briefing dahinter ist eine vollständige Bauvorgabe statt eines Moodboards. Sie beginnt mit „Press 04. Vernal woods“ und gibt dieser Zeile den Rahmen, statt sie in eine Karte zu schrumpfen. Farbe bleibt auf blau #216CD1 darunter und grau #C7D5D5 für die Schrift begrenzt, gesetzt in Helvetica, Arial. 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 0.7s und cubic-bezier(0.22, 1, 0.36, 1). Diese Referenz ist für eine Lifestyle-Marke gedacht, wenn der erste Screen vor dem Build feststehen soll.
Gemacht für
- Gemacht für Agenturen, die Projekte aus dem Bereich Lifestyle pitchen und ein 640x474 Rahmen schon in der ersten Antwort an den Kunden brauchen.
- Wer ein Modell mit einem Hero-Bereich-Briefing versorgt, startet mit dem Prompt über 6.927 Zeichen.
- Gemacht für Content-Leads, die ein Hero-Bereich-Design neu betexten, dessen Headline so lang bleiben muss wie die von Audio Showcase.
Was enthalten ist
- Links vor der Aktion. Eine kurze Reihe Links und eine einzelne Aktion liegen in Hero-Bereich, auf Abstände in 20px-Schritten und 0.7s Übergänge gehalten, damit die Leiste nie mit der Komposition dahinter konkurriert. Die Leiste liegt ohne eigene Hintergrundfläche über der Komposition von 640x474, damit die Medien darunter bis an den Rand durchlaufen.
- Eine Pille für das eine Neue. Ein Badge, eine Botschaft: die Pille sitzt in Helvetica, Arial auf der kleinsten Stufe über der Headline, und um diesen Platz konkurriert nichts anderes. Es gibt nur eine Ankündigung, und das lässt das Badge wie eine Neuigkeit wirken. Halte es über der Headline, nie daneben.
- Leiste im Raster der Seite. Gib der Wortmarke nicht mehr Raum, als ihre Schrift braucht. Die Referenz wurde mit 640x474 erfasst.
- Am Viewport gemessen. Das Layout arbeitet mit absoluten Werten statt mit Verhältnissen: Abstände in 20px-Schritten, 0.7s Übergänge und Easing cubic-bezier(0.22, 1, 0.36, 1). Das Briefing nennt Werte und keine Proportionen, damit die Komposition ihre Verhältnisse behält, wenn der Text länger oder kürzer wird.
Bewegung & Interaktion
Die Zeiten stehen im Briefing
Hover-, Druck- und Fokuszustände lösen sich alle in 0.7s auf, deshalb wirkt die Oberfläche unmittelbar. Das Easing steht zusammen mit der Dauer im Briefing (0.7s), ein Nachbau kann also nicht unbemerkt ein anderes Gefühl einsetzen. Eine Dauer pro Verhalten.
Leinwand statt Bild
Das Herzstück wird live gerendert (ein WebGL-Canvas) und nicht als Bild ausgeliefert, die 640x474-Komposition reagiert also auf den Viewport, statt dahinter zu liegen. Das Rendering bringt seine eigene Farbe mit, die Palette darum herum bleibt deshalb zurückhaltend.
Warum das Briefing für Lifestyle trägt
Der Preis ist Dichte: Dieser Eintrag Hero-Bereich sagt auf dem ersten Screen weniger als ein feature-getriebenes Layout. Was bleibt, ist die Leserichtung, und die Navigation, die Überschrift, das Ankündigungs-Badge, die Kennzahlen-Zeile und das Kartenraster leisten die Arbeit, die eine längere Seite verteilen würde. Audio Showcase nennt das Angebot einmal und lässt die Komposition es wiederholen, statt eine zweite Behauptung zu ergänzen.
Wie Audio Showcase den ersten Blick ordnet
Aufmerksamkeit wird gelenkt und nicht dem Zufall überlassen. Die Seite sagt es selbst: „Press 04. Vernal woods“. Die Abfolge steht fest: die Navigation, die Überschrift, das Ankündigungs-Badge, die Kennzahlen-Zeile und das Kartenraster, und Abstände in 20px-Schritten und 0.7s Übergänge bestimmen die Größe jeder Station, damit nichts in falscher Reihenfolge ankommt. Ein Leser im Bereich Lifestyle bekommt das Angebot vor den Optionen.
Wie der Eintrag Hero-Bereich umbricht
Breit ist die Komposition dicht; schmal gilt: die Navigation klappt zu einem mobilen Menü zusammen und die Bewegung hat einen Reduced-Motion-Zweig. Beide Zustände sind im Briefing beschrieben. Autoplay und Bewegung sind ehrlich behandelt, die Seite kommuniziert also auch ohne sie.
Häufige Fragen
Was bekomme ich, wenn ich das Briefing zu Audio Showcase kopiere?
Das Briefing beschreibt den Bau, nicht die Stimmung: Es nennt die Komposition bei 640x474, die Abstände und die Bewegungswerte. Das gerenderte Bild dient darin an keiner Stelle als verbindliche Grundlage.
Kann ich Hero-Bereich von Audio Showcase in einem anderen Stack nachbauen?
Audio Showcase 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 Audio Showcase?
Die Übergänge hängen an Zuständen der Oberfläche statt an einer Scroll-Zeitleiste und sind im Bereich von 0.7s mit cubic-bezier(0.22, 1, 0.36, 1) angesetzt. Das Briefing hält die Werte fest, damit eine Portierung sie ohne Raten übernehmen kann.
