Über diese Vorlage
Innovation Lab: Landingpage für Agentur, gebaut aus einem einzigen geschriebenen Briefing. Diese Seite dokumentiert es. „We push past conventions, reshaping the virtual terrain with next-level technologies“ ist die Zeile, auf die das Layout gebaut ist. Farbe bleibt auf tiefes indigo #080219 darunter und weiß #F8F3EF für die Schrift begrenzt, gesetzt in Inter. Geliefert wird React und Tailwind CSS, erfasst bei 1466x1080, damit der Rahmen feststeht, bevor die erste Zeile Code entsteht. Die Bewegung ist Übergänge von 0.2s, cubic-bezier(0.16, 1, 0.3, 1) und eine Videospur in Schleife und bleibt so zurückhaltend, dass die Texte weiter führen. Lass es beim Schreiben offen: Die 6.911 Zeichen Briefing sind der Teil, der sich auf deine Seite überträgt.
Gemacht für
- Dieses Landingpage-Layout richtet sich an Gründer, die einen einzigen Screen als Beleg brauchen, dass Copy für Agentur 6,9s Video in Schleife tragen kann.
- Gemacht für Content-Leads, die ein Landingpage-Design neu betexten, dessen Headline so lang bleiben muss wie die von Innovation Lab.
- Übernimm den 0.2s-Einstieg und die cubic-bezier(0.16, 1, 0.3, 1)-Kurve exakt, wenn du denselben Aufbau im selben Tempo willst.
Was enthalten ist
- Eine Zeile, keine Schubladen. Eine schmale Leiste liegt über der Komposition (Landingpage), die Wortmarke links, die Links in Inter gesetzt, damit die Komposition zuerst als Inhalt und erst danach als Rahmen wirkt. Die Leiste liegt ohne eigene Hintergrundfläche über der Komposition von 1466x1080, damit die Medien darunter bis an den Rand durchlaufen.
- Feste Stufen statt einer Skala. Schrift und Abstände stammen hier aus einer einzigen Liste: Abstände in 12px-Schritten, 0.2s Übergänge und Easing cubic-bezier(0.16, 1, 0.3, 1). Zwischen den genannten Werten gibt es keinen erfundenen Zwischenwert; die Werteliste ist das ganze System.
- Schmale Navigationsleiste. Halte die Zeile einzeilig. Die Referenz wurde mit 1466x1080 erfasst.
- Das Briefing nennt die Stufen. Die Abstände sind genauso zitiert (Abstände in 12px-Schritten, 0.2s Übergänge und Easing cubic-bezier(0.16, 1, 0.3, 1)) und nicht als Skala, die von selbst weiterwächst.
Bewegung & Interaktion
Die Schleife übernimmt die Grundbewegung
Die Hintergrundbewegung kommt aus der 6,9s-Schleife in 1466x1080 und nicht aus Scroll-Effekten, deshalb bleibt die Seite ruhig und die Schrift lesbar. Die Schleife ist auf Cover zugeschnitten, die Komposition hängt also nicht an einer bestimmten Bildgröße. Dreh oder exportiere in 1466x1080 oder breiter.
Interaktion bleibt lokal
Jedes interaktive Element tut eine Sache (Hover-Zustände auf Buttons und Links statt auf jeder Karte), dadurch bleiben die Zustände vorhersehbar. Die Rückmeldung bleibt auf die Bedienelemente beschränkt, die Komposition um sie herum bleibt also still. Weniger Zustände, vollständig festgelegt.
So wird der Eintrag Landingpage deiner
Eine Zeile, eine Schrift, ein Akzent: Diese drei Substitutionen ändern das Design am stärksten. Abstände in 12px-Schritten, 0.2s Übergänge und Easing cubic-bezier(0.16, 1, 0.3, 1) sind die Werte, die sich nicht bewegen sollten. Schreib Text und Medien um, bevor du irgendetwas neu einfärbst.
Innovation Lab als Spezifikation lesen
Ein Screenshot sagt, wie die Seite aussieht; das Briefing sagt, warum. Abstände in 12px-Schritten, 0.2s Übergänge und Easing cubic-bezier(0.16, 1, 0.3, 1) schließen die Lücke zwischen beiden. Nichts in diesem Eintrag Landingpage hängt an einer Voreinstellung.
Wie der Eintrag Landingpage umbricht
Test den Eintrag Landingpage bei 1466x1080 und dann in Telefonbreite: Dieselbe Reihenfolge hält; die Skala ist fließend statt gestuft. Bei schmalen Breiten fällt nichts Wichtiges weg.
Häufige Fragen
Ist der Prompt zu Innovation Lab eine fertige Spezifikation oder ein Ausgangspunkt?
Das erfasste Briefing umfasst 6.911 Zeichen und beschreibt Rahmen, Schriftgrößen-Skala, Palette und Übergänge. Wenn du es kopierst, hast du genau diesen Text; schickst du es an Studio, wird dieselbe Anfrage mit der bereits beschriebenen Seite vorbereitet.
Brauche ich React und Tailwind CSS, um Innovation Lab nachzubauen?
Innovation Lab 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.
Kann ich die Übergänge von Innovation Lab behalten und nur die Zeitwerte ändern?
Die Übergänge hängen an Zuständen der Oberfläche statt an einer Scroll-Zeitleiste und sind im Bereich von 0.2s auf cubic-bezier(0.16, 1, 0.3, 1) angesetzt. Das Briefing hält die Werte fest, damit eine Portierung sie ohne Raten übernehmen kann.
