Über diese Vorlage
Agent Wave wurde bei 1478x1080 erfasst und als Spezifikation abgelegt, nicht als Galeriebild. Das Farbschema ist #000000 darunter und #FFFFFF für die Schrift, und die Seite ist in Inter gesetzt. Geliefert wird eine einzelne Komponente, erfasst bei 1478x1080, damit der Rahmen feststeht, bevor die erste Zeile Code entsteht. Die Bewegung kommt über Übergänge von 0.28s, cubic-bezier(0.16, 1, 0.3, 1) und eine Videospur in Schleife nicht hinaus. Lass es beim Schreiben offen: Die 16.675 Zeichen Briefing sind der Teil, der sich auf deine Seite überträgt.
Gemacht für
- Studio-Teams, die ein Projekt briefen und nach eine einzelne Komponente suchen, um darauf zu reagieren.
- Dieses Landingpage-Design richtet sich an Designer, die einen Build in eine einzelne Komponente an die Entwicklung übergeben und die Bewegung schriftlich haben wollen.
- Gemacht für Studios, die einem Kunden das Verhalten bei 901px erklären müssen, ohne vorher einen Prototyp zu bauen.
Was enthalten ist
- Leiste im Raster der Seite. Eine kurze Reihe Links und eine einzelne Aktion liegen in Landingpage, auf eine feste Display-Größe von 19px und 100vh hohe Sektionen gehalten, damit die Leiste nie mit der Komposition dahinter konkurriert. Die Labels passen bei 901px in eine Zeile, und der aktive Eintrag ist über das Schriftgewicht markiert, nicht über eine Pille. Bleib bei vier oder fünf Links; die Zeile ist dafür bemessen.
- Das Video ist Hintergrund, keine Fläche. Der erste Screen ist ein einzelner Clip bei 1478x1080, alles andere ist darauf angeordnet. Die Schleife ist kurz genug (6,9s), dass das Auge sie als Textur liest und nicht als Zeitachse.
- Obere Zeile: Wortmarke, Links, eine Aktion. Unter 901px klappen die Links ein, statt in eine zweite Zeile umzubrechen.
- Feste Stufen statt einer Skala. Die Größen wurden am Render in 1478x1080 abgelesen: eine feste Display-Größe von 19px, 100vh hohe Sektionen, Radius 7px und Abstände in 22px-Schritten. Zwischen den genannten Werten gibt es keinen erfundenen Zwischenwert; die Werteliste ist das ganze System. Übernimm die genannten Werte mit dem Layout.
Bewegung & Interaktion
Die Schleife übernimmt die Grundbewegung
Die Hintergrundbewegung ist ein Clip von 6,9s in 1478x1080, der leise hinter dem Text schleift statt auf den Zeiger zu reagieren. Der Clip ist kurz genug, um ohne sichtbare Naht zu schleifen, und das zählt mehr als seine Auflösung. Dreh oder exportiere in 1478x1080 oder breiter.
Reduzierte Bewegung wird respektiert
Die Bewegungsebene bringt einen Ausschalter mit: Bei prefers-reduced-motion wird die Bewegung, also der Auftritt und die Schleife, ausgelassen. Die Rückmeldung der Interaktion funktioniert auch bei reduzierter Bewegung; weggelassen werden nur die Auftritte.
Die Zahlen hinter dem Eintrag Landingpage
Wenn du das an die Entwicklung übergibst, ist das Briefing das nützliche Artefakt: eine feste Display-Größe von 19px, 100vh hohe Sektionen, Radius 7px, Abstände in 22px-Schritten und 0.28s Übergänge stehen darin, und ihr müsst nichts interpretieren. Nichts in diesem Eintrag Landingpage hängt an einer Voreinstellung.
Was der Eintrag Landingpage richtig macht
Zähl die Entscheidungen im Eintrag Landingpage, und sie führen auf ein einziges Dokument zurück: 16.675 Zeichen, die den Rahmen bei 1478x1080, die Schrift und den Rhythmus benennen. Es gibt einem Leser im Bereich SaaS den kürzesten ehrlichen Weg zum Angebot.
Wie der Eintrag Landingpage umbricht
Eine fluide Skala und eine gestufte sehen auf breitem Screen ähnlich aus. Vereng den Viewport, und der Unterschied zeigt sich: eine Größe zwischen 24px und 22px gegen feste Sprünge. Der Umbruch hält die Handlung in jeder Breite erreichbar.
Häufige Fragen
Brauche ich eine einzelne Komponente, um Agent Wave nachzubauen?
Agent Wave wurde in eine einzelne Komponente 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.
Was steht eigentlich im Briefing hinter Agent Wave?
Das Briefing beschreibt den Bau, nicht die Stimmung: Es nennt die Komposition bei 1478x1080, die Abstände und die Bewegungswerte. Das gerenderte Bild dient darin an keiner Stelle als verbindliche Grundlage.
Kann ich eine aus Agent Wave 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 1478x1080 erfasst.
