Über diese Vorlage
3D Character Studio liefert für eine Agentur oder ein Studio einen fertigen ersten Screen und die Zahlen, die ihn hervorgebracht haben. Die Zeile lautet „Glad you stopped in. Good taste tends to find us. Now, what are we building?“, und der Rest des Eintrags Landingpage ordnet sich darum. Die Palette umfasst rot #800014 darunter und helles rot #E12444 für die Akzente, die Schrift ist HelveticaNowDisplay-Medium. Geliefert wird React und Tailwind CSS, erfasst bei 1740x1080, damit der Rahmen feststeht, bevor die erste Zeile Code entsteht. Die Seite begrenzt die Bewegung auf Übergänge von 38ms und eine Videospur in Schleife. Lass es beim Schreiben offen: Die 5.726 Zeichen Briefing sind der Teil, der sich auf deine Seite überträgt.
Gemacht für
- Agenturen, die Landingpage-Designs für eine Agentur oder ein Studio anbieten und Schrift von 13px bis 32px und Abstände in 26px-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,6s 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 3D Character Studio.
Was enthalten ist
- Eine Leiste ohne Beiwerk. Wortmarke, Links und die Aktion in #E12444 teilen eine Grundlinie, was eine dünne Zeile nicht zufällig wirken lässt. Die Links sind kleiner gesetzt als die Wortmarke, und die Aktion in #E12444 ist das einzige Element in der Leiste mit Gewicht. Hat deine Seite mehr Sektionen, gruppiere sie, statt die Leiste zu verbreitern.
- Feste Stufen statt einer Skala. Hier ist nichts geschätzt. Die Spezifikation legt Schrift von 13px bis 32px, Abstände in 26px-Schritten und 38ms Übergänge fest, und der Rest des Layouts leitet sich aus diesen Werten ab. Zwischen den genannten Werten gibt es keinen erfundenen Zwischenwert; die Werteliste ist das ganze System. Wo das Briefing schweigt, schweigt es mit Absicht.
- Medien hinter der Schrift. Ein Clip von 6,6s bei 1740x1080 macht die atmosphärische Arbeit; das Briefing legt den Zuschnitt fest und lässt die Schrift darüber unangetastet. Das Poster bei 1740x1080 trägt die Komposition, wenn Autoplay nicht verfügbar ist, damit das Layout nicht zusammenfällt.
- Navigation ohne Hintergrund. Die Leiste liegt ohne eigene Hintergrundfläche über der Komposition von 1740x1080, damit die Medien darunter bis an den Rand durchlaufen.
Bewegung & Interaktion
Bewegung nur für die Texte
Ein Typewriter-Durchlauf ist die einzige Eingangsanimation der Seite, es gibt also nur eine Bewegungsidee zu pflegen. Das Timing leitet sich aus einem Wert ab, eine längere Zeile dauert dadurch länger, ohne von Hand justiert zu werden. Teste es mit abgeschalteter Bewegung.
Eine Dauer für die Bedienelemente
Übergänge sind auf 38ms festgelegt; dieser Wert gilt auch für die Bedienelemente. Nichts wartet auf eine Scroll-Position, deshalb reagiert die Seite, sobald du sie berührst.
Wie 3D Character Studio den ersten Blick ordnet
Der Preis ist Geduld: Die Seite hält das Detail zurück, das ein scanbares Raster sofort liefern würde. Was sie dafür kauft, ist ein erster Screen, auf dem die Navigation, das Ankündigungs-Badge, die Kennzahlen-Zeile und der Hintergrund-Clip nicht falsch gelesen werden können. Ein Leser im Bereich Agentur bekommt das Angebot vor den Optionen.
Die Zahlen hinter dem Eintrag Landingpage
Vergleich das mit einem Template, das seine Abstände eine Vorliebe nennt. Hier sind dieselben Werte benannt (Schrift von 13px bis 32px, Abstände in 26px-Schritten und 38ms Übergänge), und eine Änderung behält sie entweder oder bricht die Komposition sichtbar. Nichts in diesem Eintrag Landingpage hängt an einer Voreinstellung.
Was sich in 3D Character Studio bewegt
Das Briefing bindet jeden Übergang an einen Wert (Übergänge von 38ms, eine Medienschleife von 6,6s und ein Typewriter-Durchlauf). Genau das unterscheidet die Seite von einem Template mit aufgesetztem Animations-Preset. Nichts in diesem Eintrag Landingpage animiert um seiner selbst willen.
Häufige Fragen
Ist der Prompt zu 3D Character Studio eine fertige Spezifikation oder ein Ausgangspunkt?
Das Briefing beschreibt den Bau, nicht die Stimmung: Es nennt die Komposition bei 1740x1080, die Abstände und die Bewegungswerte. Das gerenderte Bild dient darin an keiner Stelle als verbindliche Grundlage.
Kann ich Landingpage von 3D Character Studio in einem anderen Stack nachbauen?
3D Character Studio 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.
Woher stammt das Design von 3D Character Studio?
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 1740x1080 erfasst.
