Über diese Vorlage
Lies Quantum Core als Spezifikation zum Thema Landingpage: Die Werte standen fest, bevor die Seite gebaut wurde. „Talk with the team“ ist die Zeile, auf die das Layout gebaut ist. Farbe bleibt auf tiefes blau #080A19 darunter und weiß #E9E9E9 für die Schrift begrenzt, gesetzt in Suisse Intl. Geliefert wird React und Tailwind CSS, erfasst bei 1920x1420, damit der Rahmen feststeht, bevor die erste Zeile Code entsteht. Die Bewegung beschränkt sich auf Übergänge von 700ms, cubic-bezier(0.16, 1, 0.3, 1) und eine Videospur in Schleife. Lass es beim Schreiben offen: Die 27.320 Zeichen Briefing sind der Teil, der sich auf deine Seite überträgt.
Gemacht für
- Agenturen, die Landingpage-Designs für ein KI- oder SaaS-Produkt anbieten und Schrift von 12px bis 72px und Abstände in 20px-Schritten schon im Angebot nennen wollen, damit die Kalkulation nach dem Kickoff noch trägt.
- Produktmarketer, die brauchen, dass die Komposition (Landingpage) auch mit 6,8s Video in Schleife hinter dem Text lesbar bleibt.
- Gemacht für Content-Leads, die ein Landingpage-Design neu betexten, dessen Headline so lang bleiben muss wie die von Quantum Core.
Was enthalten ist
- Ein Breakpoint für die Links. Eine kurze Reihe Links und eine einzelne Aktion liegen in Landingpage, auf Schrift von 12px bis 72px und Abstände in 20px-Schritten gehalten, damit die Leiste nie mit der Komposition dahinter konkurriert. Die Leiste liegt ohne eigene Hintergrundfläche über der Komposition von 1920x1420, damit die Medien darunter bis an den Rand durchlaufen.
- Badge über dem Falz. Ein Badge, eine Botschaft: die Pille sitzt in Suisse Intl auf der kleinsten Stufe über der Headline, und um diesen Platz konkurriert nichts anderes. Die Pille steht auf der kleinsten Stufe im Briefing, damit sie als Label und nicht als zweiter Titel gelesen wird.
- Leiste im Raster der Seite. Teste die Leiste über deinen eigenen Medien, bevor sie einen Hintergrund bekommt. Die Referenz wurde mit 1920x1420 erfasst.
- Werte zum Nachmessen. Die Größen sind zitiert und nicht vererbt: Schrift von 12px bis 72px, Abstände in 20px-Schritten, 700ms Übergänge und Easing cubic-bezier(0.16, 1, 0.3, 1). Tauschst du die Schrift oder den Text, halten diese Verhältnisse trotzdem. Jeder Wert lässt sich gegen den erfassten Prompt prüfen, und genau das macht einen Nachbau überprüfbar statt ungefähr.
Bewegung & Interaktion
Hintergrundbewegung ohne Scroll-Bibliothek
Der Hintergrundclip läuft 6,8s in 1920x1420 als Endlosschleife, stumm und inline, deshalb bewegt sich die Seite weiter, während die Aufmerksamkeit auf dem Text liegt. Eine Scroll-Bibliothek ist nicht nötig, denn die einzige Hintergrundbewegung ist das Medium selbst. Die Schleife ist auf Cover zugeschnitten, die Komposition hängt also nicht an einer bestimmten Bildgröße.
Zeiger nur, wo sie helfen
Die interaktive Ebene ist bewusst klein: Hover-Zustände auf Buttons und Links statt auf jeder Karte. Ein Bedienelement, das interaktiv aussieht, verhält sich auch so; es gibt keine falschen Affordanzen. Ein paar verlässliche Zustände schlagen eine lange Liste von Effekten.
Was du in Quantum Core zuerst änderst
Wenn deine Marke eine schwerere Palette fährt, prüf sie vor der Entscheidung gegen den Rahmen. tiefes blau #080A19 trägt die Seite, ein dunklerer Akzent braucht also mehr Kontrast als die Referenz. Rahmen und Skala bleiben; das Thema ist der Teil, der sich ändern soll.
Quantum Core als Spezifikation lesen
Eine Komposition lässt sich nicht nach Augenmaß fixieren, wenn zwei Leute sie nachbauen. Das Briefing nimmt die Diskussion heraus: Schrift von 12px bis 72px, Abstände in 20px-Schritten, 700ms Übergänge und Easing cubic-bezier(0.16, 1, 0.3, 1), einmal genannt. Nichts in diesem Eintrag Landingpage hängt an einer Voreinstellung.
Das Argument des Eintrags Landingpage
Angenommen, deine Medien sind lauter als dein Text. Genau dafür ist diese Komposition gebaut. Das Medium ist eine Schleife von 6,8s in 1920x1420. Der Rahmen bleibt ruhig, und Schrift von 12px bis 72px und Abstände in 20px-Schritten halten den Leser am Text. Es gibt einem Leser im Bereich SaaS den kürzesten ehrlichen Weg zum Angebot.
Häufige Fragen
Wie lang ist der Prompt hinter Quantum Core?
Das erfasste Briefing umfasst 27.320 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 Quantum Core nachzubauen?
Quantum Core 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 verhalten sich die 700ms Übergänge in Quantum Core?
Auftritte und Zustandswechsel liegen im Bereich von 700ms auf cubic-bezier(0.16, 1, 0.3, 1). Sie hängen an Zustandswechseln statt an einer Scroll-Bibliothek und halten die Texte nie auf.
