Über diese Vorlage
Fastshot ist eine brauchbare Referenz für dieses Publikum: die Komposition (Landingpage), ausgelegt für ein KI- oder SaaS-Produkt, vermessen und bereit zum Nachbauen. Die Überschrift der Seite lautet „Describe an app. We'll build it“, und die Komposition ist um genau diese Worte gebaut. Farbe bleibt auf tiefes blau #0A0D12 darunter und gedämpftes indigo #9C86CE für die Akzente begrenzt, gesetzt in Inter. Geliefert wird eine eigenständige HTML-Datei, erfasst bei 1920x1406, damit der Rahmen feststeht, bevor die erste Zeile Code entsteht. Die Bewegung kommt über Übergänge von 1.00s, cubic-bezier(.4,0.2,1) und eine Videospur in Schleife nicht hinaus. Lass es beim Schreiben offen: Die 15.844 Zeichen Briefing sind der Teil, der sich auf deine Seite überträgt.
Gemacht für
- Halte Easing cubic-bezier(.4,0.2,1) in der Übergabe-Notiz fest, damit der nächste Build die Angabe nicht aus der Seite herauslesen muss.
- Wenn der Build auf eine eigenständige HTML-Datei aufsetzt, übernimm zuerst 100vh hohe Sektionen und Radius 4px und lass die Palette in Ruhe, bis das Raster steht.
- Dieses Landingpage-Layout richtet sich an Gründer, die einen einzigen Screen als Beleg brauchen, dass Copy für SaaS 7,5s Video in Schleife tragen kann.
Was enthalten ist
- Navigation ohne Hintergrund. Die Zeile setzt ihren Kontrast an genau einer Stelle: die Aktion in #9C86CE, während Wortmarke und Links auf der Textfarbe zurücktreten. Unter 599px klappen die Links zu einem bildschirmfüllenden Overlay zusammen. Die Labels passen bei 599px in eine Zeile, und der aktive Eintrag ist über das Schriftgewicht markiert, nicht über eine Pille.
- Ein Clip, keine Illustration. Der erste Screen ist ein einzelner Clip bei 1920x1406, alles andere ist darauf angeordnet. Die Schleife ist kurz genug (7,5s), dass das Auge sie als Textur liest und nicht als Zeitachse.
- Die Schrift trägt den Ton. Die Schrift ist Inter an der Spitze der Skala, der begleitende Text liegt deutlich darunter, damit die Hierarchie ohne Farbe lesbar ist. Die Stufe für Bildunterschriften ist klein genug, um unter einer Abbildung zu sitzen, ohne den Rhythmus der Seite zu ändern.
- Obere Zeile, eine Aktion. Unter 599px klappen die Links ein, statt in eine zweite Zeile umzubrechen.
Bewegung & Interaktion
Kurze, aufeinander abgestimmte Zeiten
Die Bewegung der Bedienelemente ist kurz und wiederholbar: 1.00s bei jedem Zustandswechsel. Das Easing steht zusammen mit der Dauer im Briefing (1.00s), ein Nachbau kann also nicht unbemerkt ein anderes Gefühl einsetzen. Eine Dauer pro Verhalten.
Eine Schleife, keine Timeline
Die Hintergrundbewegung kommt aus der 7,5s-Schleife in 1920x1406 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.
Wie der Eintrag Landingpage umbricht
Verglichen mit einem Mobil-Layout, das Sektionen ausblendet, behält dieses sie und ändert ihre Form: die Skala ist fließend statt gestuft, das Layout wechselt bei 599px und der Bereich wird auf 100vh gehalten. Die Hierarchie ist das, was den Umbruch übersteht.
Das Argument des Eintrags Landingpage
Ein Screen bedeutet eine Entscheidung für den Leser, und das ist der Preis dieses Layouts: Alles andere rutscht unter den Fold. Im Briefing stehen 100vh hohe Sektionen, Radius 4px, Abstände in 18px-Schritten, 1.00s Übergänge und Easing cubic-bezier(.4,0.2,1), damit die unteren Sektionen denselben Rhythmus behalten. Fastshot nennt das Angebot einmal und lässt die Komposition es wiederholen, statt eine zweite Behauptung zu ergänzen.
Fastshot als Spezifikation lesen
Ein Nachbau beginnt meist mit einem Screenshot und einer Vermutung. Hier beginnt er mit 15.844 Zeichen Spezifikation: Rahmen, Abstände und Bewegung stehen fest, bevor die erste Codezeile entsteht. Nichts in diesem Eintrag Landingpage hängt an einer Voreinstellung.
Häufige Fragen
Warum nennt der Eintrag eine eigenständige HTML-Datei überhaupt?
Fastshot wurde in eine eigenständige HTML-Datei 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.
Was steht eigentlich im Briefing hinter Fastshot?
Das Briefing beschreibt den Bau, nicht die Stimmung: Es nennt die Komposition bei 1920x1406, die Abstände und die Bewegungswerte. Das gerenderte Bild dient darin an keiner Stelle als verbindliche Grundlage.
Kann ich eine aus Fastshot nachgebaute Seite veröffentlichen, ohne die Quelle zu nennen?
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 1920x1406 erfasst.
