Über diese Vorlage
Peakflow Footer hält den Entscheidungsweg fest: Hinter dem Eintrag Footer stehen 3.693 Zeichen Briefing. Farbe bleibt auf schwarz #111111 darunter und weiß #FAFAFA für die Schrift begrenzt, gesetzt in Inter. Geliefert wird Tailwind CSS: eine Seite, kein Plugin, kein Build-Tooling zwischen dir und dem Design. Die Bewegung beschränkt sich auf Übergänge von 100ms, cubic-bezier(0.5, 0, 0, 1) und eine Videospur in Schleife. Nutze es als Referenz, wenn du eine Footer für dieses Publikum baust, also für ein KI- oder SaaS-Produkt, und eine fertige Komposition willst statt eines Ausgangspunkts.
Gemacht für
- Gründer, die eine Agentur briefen, nehmen den 1920x1470-Rahmen als Abnahmekriterium für die erste Runde.
- Produktteams, die die Footer-Copy selbst schreiben und jede Zeile auf die Länge halten müssen, die die Display-Schrift vorgibt.
- Dieses Footer-Layout richtet sich an Gründer, die einen einzigen Screen als Beleg brauchen, dass Copy für SaaS 7,9s Video in Schleife tragen kann.
Was enthalten ist
- Werte zum Nachmessen. Das Layout ist gegen feste Werte gelöst (Abstände in 30px-Schritten, 100ms Übergänge und Easing cubic-bezier(0.5, 0, 0, 1)), und das hält den ersten Screen bei jeder Breite komponiert. Ein Nachbau, der diese Zahlen trifft, sieht ohne weitere Anpassung aus wie die Referenz.
- Ein randloses Video hinter der Schrift. Der Rahmen 1920x1470 wird von einer einzigen Schleife gefüllt, die hinter dem Text läuft und keine Bedienelemente verlangt. Exportiere in 1920x1470 oder breiter, dann funktioniert der Zuschnitt auf volle Abdeckung weiter.
- Anmeldung als Komposition. Hier ist eine Entscheidung zu treffen: das Formular ausfüllen oder gehen. Alles andere auf dem Screen stützt diese Entscheidung. Fehler- und Fokuszustände sind festgelegt und nicht dem Browser überlassen.
- Der Footer ist eine volle Komposition. Die Links sind zu Spalten gruppiert, die Wortmarke hat ihren eigenen Block, und das hält einen langen Footer lesbar, statt ihn zu einer Liste zu machen. Die Schriftgrößen fallen von den Spaltenüberschriften zu den Links ab, damit die Hierarchie auch in einem dichten Footer trägt. Behalte den Akzent für eine einzelne Aktion.
Bewegung & Interaktion
Position statt Timer
Scroll ist ein Auslöser und keine Zeitachse: beim Eintritt in den Viewport werden Sektionen sichtbar, und das Tempo bestimmt, wer scrollt. Es sind ein paar Zeilen statt einer Scroll-Bibliothek, der Nachbau bleibt also leicht. Hänge die Texte nie hinter einen Scroll-Trigger.
Die Schleife übernimmt die Grundbewegung
Der Hintergrundclip läuft 7,9s in 1920x1470 als Endlosschleife, stumm und inline, deshalb bewegt sich die Seite weiter, während die Aufmerksamkeit auf dem Text liegt. Eine Scroll-Bibliothek ist nicht nötig, denn die einzige Hintergrundbewegung ist das Medium selbst. Sonst animiert nichts auf der Seite durchgehend, das Medium ist also das Einzige, das Aufmerksamkeit verlangt.
Was der Eintrag Footer richtig macht
Peakflow Footer funktioniert, weil die Hierarchie entschieden und nicht dekoriert ist. Das Briefing hat die Zahlen schon festgelegt: Abstände in 30px-Schritten, 100ms Übergänge und Easing cubic-bezier(0.5, 0, 0, 1), damit neuer Text in den Rahmen fällt, statt ihn wieder aufzureißen. Es gibt einem Leser im Bereich SaaS den kürzesten ehrlichen Weg zum Angebot.
Die Zahlen hinter dem Eintrag Footer
Die Seite enthält mehr Zahlen, als es den Anschein hat. Abstände in 30px-Schritten, 100ms Übergänge und Easing cubic-bezier(0.5, 0, 0, 1) sind die, die ein Nachbau behalten muss; der Rest darf wandern. Nichts in diesem Eintrag Footer hängt an einer Voreinstellung.
Was sich in Peakflow Footer bewegt
Zähl die animierten Elemente, und die Liste ist kurz: Übergänge von 100ms, eine Medienschleife von 7,9s und ein Scroll-Reveal. Nichts in diesem Eintrag Footer animiert um seiner selbst willen.
Häufige Fragen
Was bekomme ich, wenn ich das Briefing zu Peakflow Footer kopiere?
Das Briefing beschreibt den Bau, nicht die Stimmung: Es nennt die Komposition bei 1920x1470, die Abstände und die Bewegungswerte. Das gerenderte Bild dient darin an keiner Stelle als verbindliche Grundlage.
Brauche ich Tailwind CSS, um Peakflow Footer nachzubauen?
Peakflow Footer wurde in 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.
Darf ich Peakflow Footer 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 1920x1470 erfasst.
