Über diese Vorlage
No-Code Waitlist wurde bei 988x720 erfasst und als Spezifikation abgelegt, nicht als Galeriebild. „A new way to think and create with computers“ ist die Zeile, auf die das Layout gebaut ist. Die Palette ist tiefes indigo #020004 darunter, aufhellung #FFFFFF für die Schrift und gedämpftes blau #7C78C7 für die Akzente, gesetzt in Inter. Geliefert wird React und Tailwind CSS, erfasst bei 988x720, damit der Rahmen feststeht, bevor die erste Zeile Code entsteht. Die Seite begrenzt die Bewegung auf Übergänge von 60ms und eine Videospur in Schleife. Starte beim erfassten Briefing und bearbeite dann den Eintrag Call-to-Action-Block, statt von Grund auf neu zu bauen.
Gemacht für
- Teams, die ein KI- oder SaaS-Produkt Call-to-Action-Block bauen und die gemessenen Werte (Schrift von 13px bis 64px und 100vh hohe Sektionen) wollen statt eines Screenshots zum Abschreiben.
- Dieses Call-to-Action-Block-Layout richtet sich an Gründer, die einen einzigen Screen als Beleg brauchen, dass Copy für SaaS 9,4s Video in Schleife tragen kann.
- Wer ein Modell mit einem Call-to-Action-Block-Briefing versorgt, startet mit dem Prompt über 6.532 Zeichen.
Was enthalten ist
- Eine Leiste ohne Beiwerk. Wortmarke, Links und die Aktion in #7C78C7 teilen eine Grundlinie, was eine dünne Zeile nicht zufällig wirken lässt. Die Links sind kleiner gesetzt als die Wortmarke, und die Aktion in #7C78C7 ist das einzige Element in der Leiste mit Gewicht.
- Nichts davon ist geerbt. Das Layout ist gegen feste Werte gelöst (Schrift von 13px bis 64px, 100vh hohe Sektionen, Abstände in 14px-Schritten und 60ms Übergänge), und das hält den ersten Screen bei jeder Breite komponiert. Die Werte stammen aus dem aufgezeichneten Prompt und sind nicht abgeleitet, deshalb überstehen sie ein erneutes Rendern. Prüfe einen Nachbau gegen dieselben Zahlen.
- Ein randloses Video hinter der Schrift. Die Komposition ist auf den Clip in 988x720 gebaut und nicht daneben, deshalb bekommen die Medien nie eine Kachel oder einen Rahmen. Das Poster bei 988x720 trägt die Komposition, wenn Autoplay nicht verfügbar ist, damit das Layout nicht zusammenfällt.
- Ein Breakpoint für die Links. Die Leiste liegt ohne eigene Hintergrundfläche über der Komposition von 988x720, damit die Medien darunter bis an den Rand durchlaufen.
Bewegung & Interaktion
Hintergrundbewegung ohne Scroll-Bibliothek
Ein einziger Clip von 9,4s ist die ganze Hintergrundebene: Er läuft hinter dem Text, schleift ohne sichtbaren Schnitt und reagiert nie auf den Zeiger. Ein Posterbild springt ein, wenn Autoplay blockiert wird, die Bewegung ist also ein Zusatz und keine Voraussetzung.
Der Auftritt bleibt im Kopf
Die Überschrift wird nicht als Block eingeblendet: ein Typewriter-Durchlauf tippt die Einleitungszeile. Genau das trennt die Seite vom Standbild, denn die Reihenfolge der Wörter trägt hier die Erzählung. Das fertige Bild ist dieselbe Komposition, die das Briefing als Standbild beschreibt; die Bewegung kommt also hinzu. Füge keine zweite Eingangsanimation hinzu.
Die Reihenfolge im Eintrag Call-to-Action-Block
Der Eintrag Call-to-Action-Block hat einen festgelegten Lesepfad. die Navigation etabliert das Produkt und gibt Rückkehrenden einen vertrauten Weg. Danach folgen die Navigation, die Überschrift, das Ankündigungs-Badge, die Kennzahlen-Zeile und das Formular der Reihe nach, und genau das verhindert, dass ein einzelner Screen als Liste liest. Ein Leser im Bereich SaaS bekommt das Angebot vor den Optionen.
Was der Eintrag Call-to-Action-Block richtig macht
Die meisten SaaS-Seiten scheitern am Hinzufügen: mehr Sektionen, mehr Verläufe, mehr Behauptungen. No-Code Waitlist macht es umgekehrt. „A new way to think and create with computers“ leistet diese Arbeit ab dem ersten Frame. Die Komposition bleibt auf tiefes indigo #020004 und nutzt gedämpftes blau #7C78C7 nur für Aktionen, und das reicht, um bewusst zu wirken. Es gibt einem Leser im Bereich SaaS den kürzesten ehrlichen Weg zum Angebot.
So wird der Eintrag Call-to-Action-Block deiner
Ändere zuerst Text und Medien, dann die Farbe, zuletzt das Layout. Der Rahmen mit 988x720 und die Skala in Inter halten die Seite zusammen; ersetze also um sie herum und nicht durch sie hindurch. Rahmen und Skala bleiben; das Thema ist der Teil, der sich ändern soll.
Häufige Fragen
Ist der Prompt zu No-Code Waitlist eine fertige Spezifikation oder ein Ausgangspunkt?
Das Briefing beschreibt den Bau, nicht die Stimmung: Es nennt die Komposition bei 988x720, die Abstände und die Bewegungswerte. Das gerenderte Bild dient darin an keiner Stelle als verbindliche Grundlage.
Wie viel von No-Code Waitlist hängt von React und Tailwind CSS ab?
No-Code Waitlist 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.
Wie gehe ich mit den Medien von No-Code Waitlist in einem Kundenprojekt um?
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 988x720 erfasst.
