Über diese Vorlage
Signal ID liefert für ein KI- oder SaaS-Produkt einen fertigen ersten Screen und die Zahlen, die ihn hervorgebracht haben. Sie beginnt mit „YOUR VOICE ID TO THE E NETWORK“ und gibt dieser Zeile den Rahmen, statt sie in eine Karte zu schrumpfen. Die Palette umfasst tiefes blau #000003 darunter und #FFFFFF für die Schrift, die Schrift ist Sora. Geliefert wird React und Tailwind CSS, erfasst bei 1686x1080, damit der Rahmen feststeht, bevor die erste Zeile Code entsteht. Die Bewegung ist Übergänge von 70ms, cubic-bezier(0.16, 1, 0.3, 1) und eine Videospur in Schleife und bleibt so zurückhaltend, dass die Texte weiter führen. Lass es beim Schreiben offen: Die 11.588 Zeichen Briefing sind der Teil, der sich auf deine Seite überträgt.
Gemacht für
- Inhouse-Teams, die ein Landingpage-Design erweitern und 100vh hohe Sektionen und Abstände in 20px-Schritten unverändert in die neuen Blöcke übernehmen müssen.
- Produktmarketer, die brauchen, dass die Komposition (Landingpage) auch mit 7s 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 Signal ID.
Was enthalten ist
- Links vor der 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 1686x1080, damit die Medien darunter bis an den Rand durchlaufen.
- Größen stehen im Briefing. Das Briefing hält seine Größen bei der Aufnahme fest (100vh hohe Sektionen, Abstände in 20px-Schritten, 70ms Übergänge und Easing cubic-bezier(0.16, 1, 0.3, 1)), damit sich ein Nachbau überprüfen und nicht schätzen lässt. Die Werte stammen aus dem aufgezeichneten Prompt und sind nicht abgeleitet, deshalb überstehen sie ein erneutes Rendern.
- Die Skala ist das Styling. Sora erledigt die Arbeit, die Größen fallen von der Headline zum Begleittext deutlich ab, und die Laufweite wird enger, je größer die Schrift wird, damit die Hierarchie über Schrift trägt und nicht über Farbe. Die Laufweite ist pro Größe gesetzt, Display-Zeile und Bildunterschrift nutzen also nicht denselben Wert.
- Obere Zeile, eine Aktion. Die Leiste ist eine Zeile aus Text und einer Aktion, auf 100vh hohe Sektionen und Abstände in 20px-Schritten bemessen, damit sie als Streifen wirkt und nicht als Band.
Bewegung & Interaktion
Schnell genug, um bewusst zu wirken
Das Briefing legt den Übergangswert auf 70ms fest, ein Nachbau kann also keinen langsameren Standard einsetzen. Ein Wert wird für alle Bedienelemente wiederverwendet, ihr Timing kann also nicht auseinanderlaufen.
Eine Schleife, keine Timeline
Der Hintergrundclip läuft 7s in 1686x1080 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. Sonst animiert nichts auf der Seite durchgehend, das Medium ist also das Einzige, das Aufmerksamkeit verlangt. Dreh oder exportiere in 1686x1080 oder breiter.
So wird der Eintrag Landingpage deiner
Vergleich das mit einem leeren Blatt. Hier sind der Rahmen (1686x1080) und 100vh hohe Sektionen und Abstände in 20px-Schritten bereits entschieden, die Arbeit ist also Substitution und nicht Komposition. Substitution ist billiger als Komposition, und darum geht es.
Signal ID als Spezifikation lesen
Die Seite enthält mehr Zahlen, als es den Anschein hat. 100vh hohe Sektionen, Abstände in 20px-Schritten, 70ms Übergänge und Easing cubic-bezier(0.16, 1, 0.3, 1) sind die, die ein Nachbau behalten muss; der Rest darf wandern. Nichts in diesem Eintrag Landingpage hängt an einer Voreinstellung.
Die Zeitwerte hinter dem Eintrag Landingpage
Vergleich die Bewegung mit einer scroll-getriebenen Seite. Beide bewegen sich; diese bewegt sich dort, wo das Briefing es sagt (Übergänge von 70ms, eine Medienschleife von 7s und ein maskierter Zeilen-Reveal), sodass der Text vorn bleibt. Nichts in diesem Eintrag Landingpage animiert um seiner selbst willen.
Häufige Fragen
Was bekomme ich, wenn ich das Briefing zu Signal ID kopiere?
Das Briefing beschreibt den Bau, nicht die Stimmung: Es nennt die Komposition bei 1686x1080, die Abstände und die Bewegungswerte. Das gerenderte Bild dient darin an keiner Stelle als verbindliche Grundlage.
Wie viel von Signal ID hängt von React und Tailwind CSS ab?
Signal ID 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.
Kann ich eine aus Signal ID 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 1686x1080 erfasst.
