Über diese Vorlage
Lies Coffee Rewards als Spezifikation zum Thema Landingpage: Die Werte standen fest, bevor die Seite gebaut wurde. Die Zeile lautet „Plum Parfait Latte“, und der Rest des Eintrags Landingpage ordnet sich darum. Die Palette umfasst tiefes orange #070402 darunter und #EDE4D8 für die Schrift, die Schrift ist Helvetica Now Display. Die Referenz ist mit Vite gebaut; die Layout-Entscheidungen stehen unabhängig davon im Briefing. Die Bewegung kommt über Übergänge von 0.7s, cubic-bezier(0.16, 1, 0.3, 1) und eine Videospur in Schleife nicht hinaus. Am nützlichsten ist es, wenn beim Eintrag Landingpage für E-Commerce ein Textwechsel ohne Redesign möglich bleibt.
Gemacht für
- Übernimm die Struktur aus dem Landingpage-Layout komplett und nimm ein 1482x1080 Rahmen als Maßstab für jede Zeile.
- Dieses Landingpage-Layout richtet sich an Gründer, die einen einzigen Screen als Beleg brauchen, dass Copy für E-Commerce 5,9s Video in Schleife tragen kann.
- Wer ein Modell mit einem Landingpage-Briefing versorgt, startet mit dem Prompt über 5.054 Zeichen.
Was enthalten ist
- Größen stehen im Briefing. Schrift und Abstände stammen hier aus einer einzigen Liste: Abstände in 16px-Schritten, 0.7s Übergänge und Easing cubic-bezier(0.16, 1, 0.3, 1). Die Werte stammen aus dem aufgezeichneten Prompt und sind nicht abgeleitet, deshalb überstehen sie ein erneutes Rendern.
- Vollflächiges Video, keine Kachel. Das Video liegt in der untersten Ebene der Komposition 1482x1080, die Schrift ist darüber angeordnet, dazwischen liegt nichts. Exportiere in 1482x1080 oder breiter, dann funktioniert der Zuschnitt auf volle Abdeckung weiter.
- Die Schrift trägt die Hierarchie. Helvetica Now Display erledigt die Arbeit, die Größen fallen von der Headline zum Begleittext deutlich ab, und die Laufweite wird enger, je größer die Schrift wird, damit die Hierarchie über Schrift trägt und nicht über Farbe. Die Größenstufen sind feste Werte, dadurch behält ein Schriftwechsel dieselbe Hierarchie.
- Werte zum Nachmessen. Die Abstände sind genauso zitiert (Abstände in 16px-Schritten, 0.7s Übergänge und Easing cubic-bezier(0.16, 1, 0.3, 1)) und nicht als Skala, die von selbst weiterwächst.
Bewegung & Interaktion
Hintergrundbewegung ohne Scroll-Bibliothek
Die Hintergrundbewegung ist ein Clip von 5,9s in 1482x1080, der leise hinter dem Text schleift statt auf den Zeiger zu reagieren. Der Clip ist stumm und inline, das erste Bild ist also ohne Interaktion verfügbar.
Das ganze Animationsbudget
Jeder Zustandswechsel in der Spezifikation hat eine Dauer: Übergänge laufen etwa 0.7s mit cubic-bezier(0.16, 1, 0.3, 1). Nichts bleibt beim Browser-Standard, deshalb wirkt die Seite gesetzt und nicht animiert. 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.
Das Argument des Eintrags Landingpage
Zurückhaltung kostet Platz für Belege über dem Fold. Dieses Briefing akzeptiert den Preis und gibt den ersten Screen für das Angebot aus; Abstände in 16px-Schritten und 0.7s Übergänge stehen fest, damit eine Beleg-Sektion darunter ohne Umbau passt. Coffee Rewards nennt das Angebot einmal und lässt die Komposition es wiederholen, statt eine zweite Behauptung zu ergänzen.
Was sich in Coffee Rewards bewegt
Zähl die animierten Elemente, und die Liste ist kurz: Übergänge von 0.7s, eine Medienschleife von 5,9s und eine live gerenderte Canvas. Nichts in diesem Eintrag Landingpage animiert um seiner selbst willen.
Coffee Rewards als Spezifikation lesen
Die meisten Referenzen zeigen das Ergebnis und behalten die Zahlen. Diese dreht es um: Abstände in 16px-Schritten, 0.7s Übergänge und Easing cubic-bezier(0.16, 1, 0.3, 1) stehen neben der Seite, damit das Ergebnis reproduzierbar ist und nicht angenähert. Nichts in diesem Eintrag Landingpage hängt an einer Voreinstellung.
Häufige Fragen
Was bekomme ich, wenn ich das Briefing zu Coffee Rewards kopiere?
Das Briefing beschreibt den Bau, nicht die Stimmung: Es nennt die Komposition bei 1482x1080, die Abstände und die Bewegungswerte. Das gerenderte Bild dient darin an keiner Stelle als verbindliche Grundlage.
Wie viel von Coffee Rewards hängt von Vite ab?
Nein. Das Briefing ist eine Spezifikation, keine Liste von Abhängigkeiten. Es wurde für Vite geschrieben, dieselbe Komposition lässt sich aber in allem nachbauen, was du ohnehin nutzt. Der Stack ist genannt, damit du weißt, wie die Referenz entstanden ist.
Darf ich Coffee Rewards in einem Kundenprojekt verwenden?
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 1482x1080 erfasst.
