Über diese Vorlage
Bevor du beim Thema Landingpage für eine 3D-, Game- oder Entertainment-Marke nachbaust, lies Cyber Ronin: Komposition und Spezifikation stehen beide hier. „Cyber Ronin // Neural Edges“ ist die Zeile, auf die das Layout gebaut ist. Die Palette ist orange #C45A18 darunter und creme #FBDBAF für die Schrift, gesetzt in Inter. Geliefert wird eine eigenständige HTML-Datei: eine Seite, kein Plugin, kein Build-Tooling zwischen dir und dem Design. Die Bewegung ist Übergänge von 0.25s, cubic-bezier(0.25,0.46,0.45,0.94) und eine Videospur in Schleife und bleibt so zurückhaltend, dass die Texte weiter führen. Nutze es als Referenz, wenn du eine Landingpage für dieses Publikum baust, also für eine 3D-, Game- oder Entertainment-Marke, und eine fertige Komposition willst statt eines Ausgangspunkts.
Gemacht für
- Nimm zuerst 100vh hohe Sektionen und Abstände in 28px-Schritten und lass die Palette folgen, weil die Abstände dieses Landingpage-Design lesbar machen.
- Gründer, die eine Agentur briefen, nehmen den 1920x1420-Rahmen als Abnahmekriterium für die erste Runde.
- Teams, die den Auftritt eines Wettbewerbers als Landingpage im Bereich 3D nachbauen und eine eigenständige HTML-Datei festlegen wollen, bevor sich jemand auf ein Framework festlegt.
Was enthalten ist
- Werte zum Nachmessen. Das Briefing hält seine Größen bei der Aufnahme fest (100vh hohe Sektionen, Abstände in 28px-Schritten, 0.25s Übergänge und Easing cubic-bezier(0.25,0.46,0.45,0.94)), damit sich ein Nachbau überprüfen und nicht schätzen lässt. Zwischen den genannten Werten gibt es keinen erfundenen Zwischenwert; die Werteliste ist das ganze System.
- Ein Medien-Element trägt die Stimmung. Das Video liegt in der untersten Ebene der Komposition 1920x1420, die Schrift ist darüber angeordnet, dazwischen liegt nichts. Exportiere in 1920x1420 oder breiter, dann funktioniert der Zuschnitt auf volle Abdeckung weiter.
- Schriftgewichte je Rolle benannt. Die Schrift ist hier das Styling-System: Inter in der Display-Größe, dieselbe Schrift durch die ganze Oberfläche, und keine zweite Akzentfarbe, die die Arbeit übernimmt. Die Gewichte sind pro Rolle festgelegt, damit die Hierarchie beim Bauen nicht vom Schätzen abhängt.
- Am Viewport gemessen. Die Abstände sind genauso zitiert (100vh hohe Sektionen, Abstände in 28px-Schritten, 0.25s Übergänge und Easing cubic-bezier(0.25,0.46,0.45,0.94)) und nicht als Skala, die von selbst weiterwächst.
Bewegung & Interaktion
Eine Schleife, keine Timeline
Der Hintergrundclip läuft 6s 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. Weil er stumm ist, kann die Schleife unter dem Text laufen, ohne um Ton oder Aufmerksamkeit zu konkurrieren. Dreh oder exportiere in 1920x1420 oder breiter.
Der Auftritt ist das Erkennungszeichen
Das erste Bild ist bewusst unvollständig: die Überschrift trifft Wort für Wort ein, während der Rest der Komposition darunter schon steht. Ohne die Technik bleibt der Inhalt vorhanden und das Layout verschiebt sich nicht. Übernimm die Absicht, nicht die exakte Kurve; entscheidend ist die Reihenfolge des Eintreffens. Die Referenz wurde mit 1920x1420 erfasst.
Die Zahlen hinter dem Eintrag Landingpage
Der Eintrag Landingpage ist vermessen und nicht geschätzt. 100vh hohe Sektionen und Abstände in 28px-Schritten stammen aus dem Briefing, und das Layout folgt diesen Schritten, statt zurechtgeschoben zu werden. Nichts in diesem Eintrag Landingpage hängt an einer Voreinstellung.
Wie der Eintrag Landingpage umbricht
Die Desktop-Komposition ist gegen 1920x1420 gelöst, und das schmale Layout ist entworfen statt geerbt: die Skala ist fließend statt gestuft, das Layout wechselt bei 360px und der Bereich wird auf 100vh gehalten. Bewegung hat eine Variante für reduzierte Bewegung, und die Medien tragen ein Posterbild, damit die Seite auch ohne Autoplay kommuniziert. Bei schmalen Breiten fällt nichts Wichtiges weg.
Die Reihenfolge im Eintrag Landingpage
Die Reihenfolge ist hier das Design. die Kennzahlen-Zeile, das Kartenraster und die Feature-Liste stehen so, dass das Angebot vor dem Beleg landet, und 100vh hohe Sektionen und Abstände in 28px-Schritten setzen den Abstand dazwischen. Ein Leser im Bereich 3D bekommt das Angebot vor den Optionen.
Häufige Fragen
Wie lang ist der Prompt hinter Cyber Ronin?
Das erfasste Briefing umfasst 10.993 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.
Wie viel von Cyber Ronin hängt von eine eigenständige HTML-Datei ab?
Cyber Ronin wurde in eine eigenständige HTML-Datei 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.
Warum steht der Prompt von Cyber Ronin hier nicht abgedruckt?
Alles, was auf der Seite zitiert wird, stammt aus dem erfassten Briefing mit 10.993 Zeichen und nicht aus einer nachträglich verfassten Beschreibung. Deshalb passen die Zahlen und der Text zusammen.
