Über diese Vorlage
AI Runtime liefert für ein KI- oder SaaS-Produkt einen fertigen ersten Screen und die Zahlen, die ihn hervorgebracht haben. Farbe bleibt auf neutral #28282A darunter und aufhellung #C8C8C8 für die Schrift begrenzt, gesetzt in Inter. Geliefert wird React: eine Seite, kein Plugin, kein Build-Tooling zwischen dir und dem Design. Die Bewegung beschränkt sich auf Übergänge von 0.85s, cubic-bezier(0.22, 1, 0.36, 1) und eine Videospur in Schleife. Lass es beim Schreiben offen: Die 9.593 Zeichen Briefing sind der Teil, der sich auf deine Seite überträgt.
Gemacht für
- Dieses Landingpage-Design ist für Agenturen gebaut, die den 1472x1080-Rahmen durch drei Runden Kundenkorrekturen bringen müssen.
- Agenturen, die Landingpage-Designs für ein KI- oder SaaS-Produkt anbieten und 100vh hohe Sektionen und Abstände in 28px-Schritten schon im Angebot nennen wollen, damit die Kalkulation nach dem Kickoff noch trägt.
- Dieses Landingpage-Layout richtet sich an Gründer, die einen einzigen Screen als Beleg brauchen, dass Copy für SaaS 6,9s Video in Schleife tragen kann.
Was enthalten ist
- Schmale Navigationsleiste. Die Leiste ist eine Zeile aus Text und einer Aktion, auf 100vh hohe Sektionen und Abstände in 28px-Schritten bemessen, damit sie als Streifen wirkt und nicht als Band. Die Leiste liegt ohne eigene Hintergrundfläche über der Komposition von 1472x1080, damit die Medien darunter bis an den Rand durchlaufen.
- Eine Leiste ohne Beiwerk. Halte die Zeile einzeilig. Die Referenz wurde mit 1472x1080 erfasst.
- Gemessen statt geschätzt. Im Layout bleibt nichts dem Gefühl überlassen: Das Briefing nennt 100vh hohe Sektionen, Abstände in 28px-Schritten, 0.85s Übergänge und Easing cubic-bezier(0.22, 1, 0.36, 1), und der Build muss genau diese Werte treffen. Die Abstände stehen in denselben Einheiten wie die Schrift, dadurch lassen sich beide direkt vergleichen.
- Medien hinter der Schrift. Die Medien leisten Atmosphäre statt Erzählung: eine Schleife von 6,9s in 1472x1080 hinter allem anderen. Das Poster bei 1472x1080 trägt die Komposition, wenn Autoplay nicht verfügbar ist, damit das Layout nicht zusammenfällt.
Bewegung & Interaktion
Ein leiserer Zweig ist enthalten
Die Bewegungsebene hat einen Ausschalter. Unter prefers-reduced-motion entfällt die Bewegung, also der Auftritt und die Schleife, und alles andere bleibt, wo es ist. Die Rückmeldung der Interaktion funktioniert auch bei reduzierter Bewegung; weggelassen werden nur die Auftritte.
Hintergrundbewegung ohne Scroll-Bibliothek
Die Hintergrundbewegung kommt aus der 6,9s-Schleife in 1472x1080 und nicht aus Scroll-Effekten, deshalb bleibt die Seite ruhig und die Schrift lesbar. Ein Posterbild springt ein, wenn Autoplay blockiert wird, die Bewegung ist also ein Zusatz und keine Voraussetzung. Dreh oder exportiere in 1472x1080 oder breiter.
Wie der Eintrag Landingpage umbricht
Breit ist die Komposition dicht; schmal gilt: die Skala ist fließend statt gestuft, der Bereich wird auf 100vh gehalten und die Navigation klappt zu einem mobilen Menü zusammen. Beide Zustände sind im Briefing beschrieben. Die Reihenfolge ist das Letzte, was sich ändert.
Die Reihenfolge im Eintrag Landingpage
Das Briefing umfasst 9.593 Zeichen und benennt die Leserichtung ausdrücklich: die Navigation, die Überschrift, das Ankündigungs-Badge, die Kennzahlen-Zeile und die Kundenzeile, dazwischen 100vh hohe Sektionen und Abstände in 28px-Schritten. Ein Leser im Bereich SaaS bekommt das Angebot vor den Optionen.
Warum das Briefing für SaaS trägt
Die meisten Seiten im Bereich SaaS hängen eine weitere Sektion an, wenn der erste Screen schwach ist. Diese hier streicht Optionen: die Navigation, die Überschrift, das Ankündigungs-Badge, die Kennzahlen-Zeile und die Kundenzeile in genau dieser Reihenfolge, und nichts, was das Angebot wiederholt. Es gibt einem Leser im Bereich SaaS den kürzesten ehrlichen Weg zum Angebot.
Häufige Fragen
Wie lang ist der Prompt hinter AI Runtime?
Das erfasste Briefing umfasst 9.593 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.
Wie viel von AI Runtime hängt von React ab?
Die Referenz ist zufällig in React gebaut. Im Layout hängt nichts von dieser Entscheidung ab: Abstände, Schrift und Bewegungswerte übertragen sich auf das, was du bereits verwendest.
Kann ich die Übergänge von AI Runtime 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.85s mit cubic-bezier(0.22, 1, 0.36, 1) angesetzt. Das Briefing hält die Werte fest, damit eine Portierung sie ohne Raten übernehmen kann.
