Über diese Vorlage
Neon Logic wurde bei 640x474 erfasst und als Spezifikation abgelegt, nicht als Galeriebild. Das Farbschema ist tiefes blau #010103 darunter und weiß #FFFFFF für die Schrift, und die Seite ist in Space Mono gesetzt. Geliefert wird React und Tailwind CSS: eine Seite, kein Plugin, kein Build-Tooling zwischen dir und dem Design. Die Bewegung ist Übergänge von 800ms und bleibt so zurückhaltend, dass die Texte weiter führen. Lass es beim Schreiben offen: Die 13.601 Zeichen Briefing sind der Teil, der sich auf deine Seite überträgt.
Gemacht für
- Inhouse-Teams, die ein Landingpage-Design erweitern und Schrift von 12px bis 42px und 100vh hohe Sektionen unverändert in die neuen Blöcke übernehmen müssen.
- Gemacht für Content-Leads, die ein Landingpage-Design neu betexten, dessen Headline so lang bleiben muss wie die von Neon Logic.
- Gründer, die ein Landingpage-Design für ein KI- oder SaaS-Produkt aufsetzen und Space Mono samt Schriftgrößen-Skala festlegen müssen, bevor Entwicklungsarbeit startet.
Was enthalten ist
- Obere Zeile: Wortmarke, Links, eine Aktion. Die Leiste überlagert Landingpage, statt Raum darunter zu belegen, damit die Komposition die volle Höhe des ersten Bildschirms behält. Die Leiste liegt ohne eigene Hintergrundfläche über der Komposition von 640x474, damit die Medien darunter bis an den Rand durchlaufen. Eine Aktion pro Leiste.
- Größen im Briefing fixiert. Das Briefing nennt die Zahlen: Schrift von 12px bis 42px, 100vh hohe Sektionen, Abstände in 14px-Schritten und 800ms Übergänge. Genau deshalb hält die Komposition zusammen, denn zwischen Schrift und Rahmen liegt keine erfundene Abstandsstufe. Die Rahmenproportionen sind zusammen mit den Größen festgehalten, damit ein Nachbau auch das Seitenverhältnis trifft. Behalte die Werte, die willkürlich wirken.
- Eine Zahlenreihe, keine Tabelle. Die Zahlen stehen in Space Mono in einer Größe, die näher an der Headline liegt als am Fließtext. Die Labels sitzen auf der kleinsten Stufe des Briefings unter den Ziffern, damit die Zeile als Daten und nicht als Dekoration gelesen wird.
- Leiste im Raster der Seite. Bleib bei vier oder fünf Links; die Zeile ist dafür bemessen. Die Referenz wurde mit 640x474 erfasst.
Bewegung & Interaktion
Die Zeiten stehen im Briefing
Das Briefing legt den Übergangswert auf 800ms fest, ein Nachbau kann also keinen langsameren Standard einsetzen. Die Dauern sind kurz genug, dass die Rückmeldung als Reaktion wirkt und nicht als Animation. Liefere nicht den Browser-Standard aus.
Eine Live-Szene auf der ersten Bildschirmfläche
Das Herzstück wird live gerendert (ein 3D-Transform auf dem Hauptelement) und nicht als Bild ausgeliefert, die 640x474-Komposition reagiert also auf den Viewport, statt dahinter zu liegen. Die Oberfläche ringsum bleibt flach, so kann das Rendering die Tiefe tragen.
Wie der Eintrag Landingpage umbricht
Wenn deine Breakpoints gewählt wurden, damit etwas passt, statt das Layout zu ändern, lies diesen Eintrag. die Schrift ist zwischen 12px und 42px begrenzt, der Bereich wird auf 100vh gehalten und die Navigation klappt zu einem mobilen Menü zusammen statt einer Liste ausgeblendeter Elemente. Der Umbruch hält die Handlung in jeder Breite erreichbar.
Die Zahlen hinter dem Eintrag Landingpage
Wenn ein Nachbau driftet, gehen zuerst die Abstände. Neon Logic vermeidet das, indem Schrift von 12px bis 42px, 100vh hohe Sektionen, Abstände in 14px-Schritten und 800ms Übergänge zusammen mit der Komposition veröffentlicht werden. Nichts in diesem Eintrag Landingpage hängt an einer Voreinstellung.
Die Zeitwerte hinter dem Eintrag Landingpage
Wenn eine Seite unruhig wirkt, sind es meist zu viele Auftritte. Diese hält die Liste kurz: Übergänge von 800ms, Hover- und Druckzustände und eine live gerenderte Canvas. Nichts in diesem Eintrag Landingpage animiert um seiner selbst willen.
Häufige Fragen
Was steht eigentlich im Briefing hinter Neon Logic?
Das erfasste Briefing umfasst 13.601 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 Neon Logic nachzubauen?
Neon Logic 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 viel von Neon Logic ist animiert?
Die Übergänge hängen an Zuständen der Oberfläche statt an einer Scroll-Zeitleiste und sind im Bereich von 800ms angesetzt. Das Briefing hält die Werte fest, damit eine Portierung sie ohne Raten übernehmen kann.
