Über diese Vorlage
Das hier ist der Eintrag Call-to-Action-Block von Rocket CTA, veröffentlicht mit dem Briefing, das ihn hervorgebracht hat, statt als Screenshot. Das Farbschema ist tiefes blau #14191E darunter, und die Seite ist in Inter gesetzt. Die Referenz ist mit React und Tailwind CSS gebaut; die Layout-Entscheidungen stehen unabhängig davon im Briefing. Die Seite begrenzt die Bewegung auf Übergänge von 300ms. Nimm es zur Hand, wenn im Fall Call-to-Action-Block die Reihenfolge feststehen muss, bevor neue Sektionen dazukommen.
Gemacht für
- Externe Teams, die ein Call-to-Action-Block-Design übernehmen und ein 640x468 Rahmen im Repository festhalten müssen, bevor der erste Commit läuft.
- Studio-Leads, die mehrere Projekte parallel fahren, nehmen dieses Call-to-Action-Block-Design als Muster, das jede weitere Seite kopiert.
- Gemacht für einen Solo-Gründer, der ein Call-to-Action-Block-Design für ein KI- oder SaaS-Produkt ausliefert und kein Designsystem im Rücken hat.
Was enthalten ist
- Obere Zeile, eine Aktion. Eine schmale Leiste liegt über der Komposition (Call-to-Action-Block), 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 640x468, damit die Medien darunter bis an den Rand durchlaufen.
- Das Briefing nennt die Stufen. Das Briefing hält seine Größen bei der Aufnahme fest (Abstände in 10px-Schritten und 300ms Übergänge), damit sich ein Nachbau überprüfen und nicht schätzen lässt. Jeder Wert hat genau eine Aufgabe: eine Schriftstufe, ein Abstand, ein Eckenradius oder ein Übergang.
- Navigation in einer Zeile. Die Leiste besteht aus wenigen Elementen und lässt sich ohne Komponentenbibliothek nachbauen. Die Referenz wurde mit 640x468 erfasst.
- Werte zum Nachmessen. Die Abstände sind genauso zitiert (Abstände in 10px-Schritten und 300ms Übergänge) und nicht als Skala, die von selbst weiterwächst.
Bewegung & Interaktion
Sektionen erscheinen beim Scrollen
Parallax ist das einzige Scroll-Verhalten im Briefing, deshalb wirkt die Seite nicht wie eine Abfolge einzelner Effekte. Es kommt nur ein Scroll-Verhalten zum Einsatz, deshalb wirkt die Seite nie wie eine Abfolge einzelner Effekte. Ein Verhalten ist der ganze Effekt.
Kurze, benannte Zeiten
Die Bewegung ist hier in Millisekunden angegeben: 300ms. Das ist das gesamte Animationsbudget, und es fließt in Zustandswechsel statt in eine Scroll-Timeline. Dieselbe Dauer wird für alle Bedienelemente wiederverwendet, deshalb wirken die Interaktionen wie ein System.
Rocket CTA als Spezifikation lesen
Die Seite enthält mehr Zahlen, als es den Anschein hat. Abstände in 10px-Schritten und 300ms Übergänge sind die, die ein Nachbau behalten muss; der Rest darf wandern. Nichts in diesem Eintrag Call-to-Action-Block hängt an einer Voreinstellung.
Was ein KI- oder SaaS-Produkt hier gewinnt
Das Versprechen steht einmal auf der Seite, in Displaygröße. Alles Weitere im Eintrag Call-to-Action-Block ordnet sich um diese Zeile: die Navigation, die Überschrift, das Ankündigungs-Badge, die Kennzahlen-Zeile und der Hintergrund-Clip folgen aufeinander, und kein zweites Versprechen kämpft um den ersten Blick. Es gibt einem Leser im Bereich SaaS den kürzesten ehrlichen Weg zum Angebot.
Was sich in Rocket CTA bewegt
Ein kurzes Bewegungsbudget kostet Drama im ersten Frame. Es kauft Lesbarkeit, und es heißt, dass Übergänge von 300ms, Parallax-Ebenen und Hover- und Druckzustände ohne Bibliothek portierbar sind. Nichts in diesem Eintrag Call-to-Action-Block animiert um seiner selbst willen.
Häufige Fragen
Was steht eigentlich im Briefing hinter Rocket CTA?
Das erfasste Briefing umfasst 11.622 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.
Ist das Briefing zu Rocket CTA dasselbe wie der Prompt, den ich selbst schreiben würde?
Alles, was auf der Seite zitiert wird, stammt aus dem erfassten Briefing mit 11.622 Zeichen und nicht aus einer nachträglich verfassten Beschreibung. Deshalb passen die Zahlen und der Text zusammen.
Kann ich Call-to-Action-Block von Rocket CTA in einem anderen Stack nachbauen?
Rocket CTA 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.
