Über diese Vorlage
Stillmind hält den Entscheidungsweg fest: Hinter dem Eintrag Hero-Bereich stehen 6.025 Zeichen Briefing. Das Farbschema ist tiefes rot #48292F darunter und tiefes blau #182C41 für die Akzente, und die Seite ist in Instrument Serif gesetzt. Geliefert wird React und Tailwind CSS, erfasst bei 1472x1080, damit der Rahmen feststeht, bevor die erste Zeile Code entsteht. Das Bewegungsbudget umfasst Übergänge von 1000ms, cubic-bezier(0.4,0,0.2,1) und eine Videospur in Schleife. Wenn du ein Briefing zum Thema Hero-Bereich im Bereich Gesundheit schreibst, starte bei dieser Komposition und tausche nur das Thema aus.
Gemacht für
- Dieses Hero-Bereich-Layout richtet sich an Gründer, die einen einzigen Screen als Beleg brauchen, dass Copy für Gesundheit 6,2s Video in Schleife tragen kann.
- Gemacht für Content-Leads, die ein Hero-Bereich-Design neu betexten, dessen Headline so lang bleiben muss wie die von Stillmind.
- Gemacht für Frontend-Entwickler, die den 1000ms-Takt und die cubic-bezier(0.4,0,0.2,1)-Kurve festgelegt haben wollen, bevor sie ein Keyframe schreiben.
Was enthalten ist
- Schmale Navigationsleiste. Wortmarke, Links und die Aktion in #182C41 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 #182C41 ist das einzige Element in der Leiste mit Gewicht.
- Größen stehen im Briefing. Das Layout ist gegen feste Werte gelöst (1000ms Übergänge und Easing cubic-bezier(0.4,0,0.2,1)), und das hält den ersten Screen bei jeder Breite komponiert. Ein Nachbau, der diese Zahlen trifft, sieht ohne weitere Anpassung aus wie die Referenz.
- Das Video ist Hintergrund, keine Fläche. Ein Asset von 6,2s trägt den ganzen ersten Bildschirm, und die Seite hat kein zweites Medienelement, das synchron gehalten werden müsste. Exportiere in 1472x1080 oder breiter, dann funktioniert der Zuschnitt auf volle Abdeckung weiter. Exportiere bei 1472x1080 oder breiter, damit der Zuschnitt ehrlich bleibt.
- Laufweite nimmt mit der Größe ab. Die Schrift ist hier das Styling-System: Instrument Serif in der Display-Größe, dieselbe Schrift durch die ganze Oberfläche, und keine zweite Akzentfarbe, die die Arbeit übernimmt. Die Schrift ist mit festen Größen gepaart, und das hält die Display-Zeile und den Oberflächentext aufeinander bezogen.
Bewegung & Interaktion
Zeiger nur, wo sie helfen
Die interaktive Ebene ist klein und vorhersehbar: Hover-Zustände auf Buttons und Links statt auf jeder Karte. Alles andere bleibt still, der Schwerpunkt liegt also auf der Komposition. Die Zustände stammen aus der Palette der Seite und nicht aus einem Komponenten-Standard. Ein paar verlässliche Zustände schlagen eine lange Liste von Effekten.
Zustandswechsel mit Zeitwert
Zustandswechsel sind mit 1000ms angegeben, die Rückmeldung der Bedienelemente ist damit ein gestalteter Wert und kein Browser-Standard. Fokus-Zustände laufen mit demselben Wert wie Hover, Tastatur- und Zeiger-Rückmeldung passen dadurch zusammen.
Stillmind als Spezifikation lesen
Wo ein Moodboard die Skala offenlässt, schließt dieses Briefing sie: 1000ms Übergänge und Easing cubic-bezier(0.4,0,0.2,1), und die umliegenden Werte leiten sich aus dieser Entscheidung ab. Nichts in diesem Eintrag Hero-Bereich hängt an einer Voreinstellung.
Die Reihenfolge im Eintrag Hero-Bereich
Eine solche Seite vergräbt die Handlung meist unter einem Feature-Raster. Diese hält die Abfolge fest: die Navigation, das Ankündigungs-Badge, die Kennzahlen-Zeile, die Feature-Liste und der Hintergrund-Clip, mit der Handlung im ersten Screen statt nach drei Scrolllängen. Ein Leser im Bereich Gesundheit bekommt das Angebot vor den Optionen.
Was sich in Stillmind bewegt
Die Bewegung ist begrenzt: Übergänge von 1000ms, eine Medienschleife von 6,2s und Hover- und Druckzustände. Nichts im Eintrag Hero-Bereich animiert länger, als das Briefing erlaubt. Nichts in diesem Eintrag Hero-Bereich animiert um seiner selbst willen.
Häufige Fragen
Ist der Prompt zu Stillmind eine fertige Spezifikation oder ein Ausgangspunkt?
Das Briefing beschreibt den Bau, nicht die Stimmung: Es nennt die Komposition bei 1472x1080, die Abstände und die Bewegungswerte. Das gerenderte Bild dient darin an keiner Stelle als verbindliche Grundlage.
Brauche ich React und Tailwind CSS, um Stillmind nachzubauen?
Stillmind 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 gehe ich mit den Medien von Stillmind in einem Kundenprojekt um?
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 1472x1080 erfasst.
