Über diese Vorlage
Tenlas Footer zeigt einen Weg, die Komposition (Footer) für dieses Publikum zu bauen. Gedacht ist sie für ein KI- oder SaaS-Produkt, und die Anweisungen dazu sind veröffentlicht. Sie beginnt mit „Take control of your productivity today“ und gibt dieser Zeile den Rahmen, statt sie in eine Karte zu schrumpfen. Die Palette ist schwarz #050505 darunter, weiß #F5F5F2 für die Schrift und helles gelb #DBFF00 für die Akzente, gesetzt in Inter. Geliefert wird Tailwind und Vanilla JavaScript: eine Seite, kein Plugin, kein Build-Tooling zwischen dir und dem Design. Die Bewegung kommt über Übergänge von 50ms und eine Videospur in Schleife nicht hinaus. Es ist die richtige Referenz für eine Footer, die auf dem ersten Bildschirm bewusst gesetzt wirken muss, und sie richtet sich an ein KI- oder SaaS-Produkt.
Gemacht für
- Growth-Teams, die ein Footer-Design für ein KI- oder SaaS-Produkt neu einfärben und den 1920x1556-Rahmen behalten wollen, während sich die Angebotstexte ändern.
- Inhouse-Teams, die ein Footer-Design erweitern und Schrift von 14px bis 18px und 50vh hohe Sektionen unverändert in die neuen Blöcke übernehmen müssen.
- Dieses Footer-Design richtet sich an Designer, die einen Build in Tailwind und Vanilla JavaScript an die Entwicklung übergeben und die Bewegung schriftlich haben wollen.
Was enthalten ist
- Navigation in einer Zeile. Die Zeile setzt ihren Kontrast an genau einer Stelle: die Aktion in #DBFF00, während Wortmarke und Links auf der Textfarbe zurücktreten. Die Links sind kleiner gesetzt als die Wortmarke, und die Aktion in #DBFF00 ist das einzige Element in der Leiste mit Gewicht. Gestalte den eingeklappten Zustand, bevor du einen sechsten Link ergänzt.
- Nichts davon ist geerbt. Das Briefing legt Schrift von 14px bis 18px, 50vh hohe Sektionen, Abstände in 18px-Schritten und 50ms Übergänge fest und überlässt den Rest der Anordnung, das Gegenteil einer Skala, die von selbst wächst. Zwischen den genannten Werten gibt es keinen erfundenen Zwischenwert; die Werteliste ist das ganze System.
- Ein randloses Video hinter der Schrift. Das Briefing legt das Video auf 1920x1556 mit einer Schleife von 8,8s fest, und jedes Textelement ist gegen diesen Rahmen gesetzt. Das Poster bei 1920x1556 trägt die Komposition, wenn Autoplay nicht verfügbar ist, damit das Layout nicht zusammenfällt.
- Leiste im Raster der Seite. Die Leiste liegt ohne eigene Hintergrundfläche über der Komposition von 1920x1556, damit die Medien darunter bis an den Rand durchlaufen.
Bewegung & Interaktion
Die Zeiten stehen im Briefing
Hover-, Druck- und Fokuszustände lösen sich alle in 50ms auf, deshalb wirkt die Oberfläche unmittelbar. Fokus-Zustände laufen mit demselben Wert wie Hover, Tastatur- und Zeiger-Rückmeldung passen dadurch zusammen.
Sektionen kommen beim Scrollen
Der Effekt liegt auf einem fertigen Layout und erzeugt es nicht, die Seite bleibt also lesbar, wenn beim Eintritt in den Viewport werden Sektionen sichtbar abgeschaltet ist. Die Seite ändert sich im Tempo des Lesers und nicht nach einem Zeitplan. Hänge die Texte nie hinter einen Scroll-Trigger.
Was du in Tenlas Footer zuerst änderst
Der Preis ist Wiedererkennbarkeit. Behalt zu viel von Tenlas Footer, und die Seite wirkt wie die eines anderen; behalt die Zahlen und tausch den Inhalt, und sie wirkt wie deine. Rahmen und Skala bleiben; das Thema ist der Teil, der sich ändern soll.
Was sich in Tenlas Footer bewegt
Ehrgeizige Bewegung kostet den ersten Screen meist die Lesbarkeit. Dieses Briefing hält die Liste kurz: Übergänge von 50ms, eine Medienschleife von 8,8s und ein Scroll-Reveal, kurz genug, dass die Schrift nie warten muss. Nichts in diesem Eintrag Footer animiert um seiner selbst willen.
Tenlas Footer als Spezifikation lesen
Der Preis für Wiederholbarkeit sind feste Zahlen: Schrift von 14px bis 18px, 50vh hohe Sektionen, Abstände in 18px-Schritten und 50ms Übergänge. Genau darum geht es bei dieser Referenz: dieselbe Seite in einer anderen Marke, ohne einen neuen Satz Vermutungen. Nichts in diesem Eintrag Footer hängt an einer Voreinstellung.
Häufige Fragen
Warum nennt der Eintrag Tailwind und Vanilla JavaScript überhaupt?
Tenlas Footer wurde in Tailwind und Vanilla JavaScript 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.
Warum steht der Prompt von Tenlas Footer hier nicht abgedruckt?
Alles, was auf der Seite zitiert wird, stammt aus dem erfassten Briefing mit 6.053 Zeichen und nicht aus einer nachträglich verfassten Beschreibung. Deshalb passen die Zahlen und der Text zusammen.
Wie lang ist der Prompt hinter Tenlas Footer?
Das Briefing beschreibt den Bau, nicht die Stimmung: Es nennt die Komposition bei 1920x1556, die Abstände und die Bewegungswerte. Das gerenderte Bild dient darin an keiner Stelle als verbindliche Grundlage.
