Über diese Vorlage
Für eine Agentur oder ein Studio löst Stories in Light das Thema Hero-Bereich mit einem einzigen erfassten Briefing. Farbe bleibt auf tiefes blau #2B3342 darunter und weiß #FFFFFF für die Schrift begrenzt, gesetzt in Archivo. Geliefert wird eine einzelne Komponente, erfasst bei 2502x1730, damit der Rahmen feststeht, bevor die erste Zeile Code entsteht. Das Briefing gibt sein Bewegungsbudget für Übergänge von 0.4s und eine Videospur in Schleife aus. Lass es beim Schreiben offen: Die 4.462 Zeichen Briefing sind der Teil, der sich auf deine Seite überträgt.
Gemacht für
- Die Seite richtet sich an Frontend-Entwickler, die ein Hero-Bereich-Design für eine Agentur oder ein Studio in eine einzelne Komponente nachbauen und die Zahlen hinter der Optik suchen.
- Wer mit einem KI-Builder arbeitet und ein Briefing will, das ein Breakpoint bei 560px schon enthält, statt sie dem Modell zu überlassen.
- Dieses Hero-Bereich-Design richtet sich an Designer, die einen Build in eine einzelne Komponente an die Entwicklung übergeben und die Bewegung schriftlich haben wollen.
Was enthalten ist
- Zurückhaltende Navigation. Die Leiste ist eine Zeile aus Text und einer Aktion, auf eine feste Display-Größe von 15px und 100vh hohe Sektionen bemessen, damit sie als Streifen wirkt und nicht als Band. Unter 560px klappen die Links ein, statt in eine zweite Zeile umzubrechen.
- Medien hinter der Schrift. Ein stummer, loopender Clip füllt das Format von 2502x1730 über 13,3s, auf Cover gesetzt, der Text darüber gestapelt. Das Briefing lässt Overlays vom Video weg, damit es nicht ausgegraut wird. Die Schleife ist kurz genug (13,3s), dass das Auge sie als Textur liest und nicht als Zeitachse.
- Die Ankündigungs-Pille. Ein Badge, eine Botschaft: die Pille sitzt in Archivo auf der kleinsten Stufe über der Headline, und um diesen Platz konkurriert nichts anderes. Die Pille steht auf der kleinsten Stufe im Briefing, damit sie als Label und nicht als zweiter Titel gelesen wird. Ein Badge, eine Botschaft.
- Die Skala ist begrenzt, nicht gestuft. Das obere Ende der Skala ist fließend (eine Größe zwischen 55px und 40px), der Rest ist fest, damit der Rahmen auch bei schmalerem Viewport komponiert bleibt. Mit schmalerem Viewport ändert die Schrift ihre Größe, nicht ihre Rolle.
Bewegung & Interaktion
Kurze, aufeinander abgestimmte Zeiten
Eine Dauer deckt alle Interaktionen ab (0.4s); so wirken Hover und Druck als ein System. Das Easing steht zusammen mit der Dauer im Briefing (0.4s), ein Nachbau kann also nicht unbemerkt ein anderes Gefühl einsetzen.
Die Schleife übernimmt die Grundbewegung
Die Hintergrundbewegung ist ein Clip von 13,3s in 2502x1730, der leise hinter dem Text schleift statt auf den Zeiger zu reagieren. Sonst animiert nichts auf der Seite durchgehend, das Medium ist also das Einzige, das Aufmerksamkeit verlangt.
Was du in Stories in Light zuerst änderst
Die Komposition ist der wiederverwendbare Teil, das Thema gehört dir. eine feste Display-Größe von 15px und 100vh hohe Sektionen bleiben, Text, Medien und Markenzeichen werden ersetzt. Setze den neuen Text in derselben Display-Größe und prüfe den Kontrast erneut, bevor du etwas ergänzt.
Die Zeitwerte hinter dem Eintrag Hero-Bereich
Bewegung beschränkt sich auf Übergänge von 0.4s, eine Medienschleife von 13,3s und Hover- und Druckzustände; sie läuft einmal beim Eintritt und tritt dann zurück, das richtige Budget, damit die Komposition (Hero-Bereich) lesbar bleibt. Nichts in diesem Eintrag Hero-Bereich animiert um seiner selbst willen.
Wie Stories in Light den ersten Blick ordnet
Wo eine Marketingseite Belege unter dem Fold stapelt und hofft, stehen in diesem Eintrag Hero-Bereich die Navigation, die Überschrift, das Ankündigungs-Badge und die Kennzahlen-Zeile vorn, und der Rest wird zurückgehalten. Ein Leser im Bereich Agentur bekommt das Angebot vor den Optionen.
Häufige Fragen
Kann ich Hero-Bereich von Stories in Light in einem anderen Stack nachbauen?
Stories in Light wurde in eine einzelne Komponente 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 steht eigentlich im Briefing hinter Stories in Light?
Das Briefing beschreibt den Bau, nicht die Stimmung: Es nennt die Komposition bei 2502x1730, die Abstände und die Bewegungswerte. Das gerenderte Bild dient darin an keiner Stelle als verbindliche Grundlage.
Woher stammt das Design von Stories in Light?
Das Briefing ist eine Beschreibung, keine Lizenz zur Weitergabe fremder Dateien. Behalte Struktur und Zahlen, ersetze Medien und Markenzeichen, und nenne die Quelle, wenn ein Kunde fragt, woher das Layout stammt. Die Referenz wurde mit 2502x1730 erfasst.
