Über diese Vorlage
Celestial Renewal hält den Entscheidungsweg fest: Hinter dem Eintrag Landingpage stehen 7.343 Zeichen Briefing. Die Überschrift der Seite lautet „Expert beauty and holistic wellness, delivered with warmth and intention“, und die Komposition ist um genau diese Worte gebaut. Farbe bleibt auf tiefes blau #010A17 darunter und blau #0A4267 für die Akzente begrenzt, gesetzt in Instrument Serif. Der Eintrag nennt den Stack, der die Seite erzeugt hat (React und Tailwind CSS), statt ihn zu verschweigen. Die Bewegung kommt über Übergänge von 75ms, cubic-bezier(0.22,1,0.36,1) und eine Videospur in Schleife nicht hinaus. Lass es beim Schreiben offen: Die 7.343 Zeichen Briefing sind der Teil, der sich auf deine Seite überträgt.
Gemacht für
- Dieses Landingpage-Design ist für Agenturen gebaut, die den 1464x1080-Rahmen durch drei Runden Kundenkorrekturen bringen müssen.
- Teams, die ein Gesundheits- oder Wellness-Produkt Landingpage bauen und die gemessenen Werte (Schrift von 36px bis 110px und Abstände in 40px-Schritten) wollen statt eines Screenshots zum Abschreiben.
- Dieses Landingpage-Layout richtet sich an Gründer, die einen einzigen Screen als Beleg brauchen, dass Copy für Gesundheit 5,9s Video in Schleife tragen kann.
Was enthalten ist
- Eine Zeile, keine Schubladen. Die obere Zeile trägt die Wortmarke, vier bis fünf Links und eine einzelne Aktion in #0A4267, knapp genug, um neben dem Rest der Seite leise zu bleiben. Unterhalb des Tablet-Breakpoints übernimmt ein mobiles Overlay. Die Links sind kleiner gesetzt als die Wortmarke, und die Aktion in #0A4267 ist das einzige Element in der Leiste mit Gewicht. Gestalte den eingeklappten Zustand, bevor du einen sechsten Link ergänzt.
- Gemessen statt geschätzt. Das Layout ist gegen feste Werte gelöst (Schrift von 36px bis 110px, Abstände in 40px-Schritten, 75ms Übergänge und Easing cubic-bezier(0.22,1,0.36,1)), und das hält den ersten Screen bei jeder Breite komponiert. Die Liste ist kurz genug, dass eine Prüfung sie Element für Element durchgehen kann.
- Ein Clip trägt alles. Das Video über 1464x1080 läuft 5,9s in Schleife hinter dem Text, stumm und inline, ohne Tönungsebene dazwischen. Das Poster bei 1464x1080 trägt die Komposition, wenn Autoplay nicht verfügbar ist, damit das Layout nicht zusammenfällt.
- Zurückhaltende Navigation. Die Leiste besteht aus wenigen Elementen und lässt sich ohne Komponentenbibliothek nachbauen. Die Referenz wurde mit 1464x1080 erfasst.
Bewegung & Interaktion
Schnell genug, um bewusst zu wirken
Die Zeiten sind kurz und einheitlich: Übergänge laufen 75ms mit cubic-bezier(0.22,1,0.36,1), deshalb lesen sich Hover- und Druckzustände als ein System und nicht als Sammlung einzelner Effekte. Kurze Zeiten lassen die Seite gesetzt wirken; ein langsamer Standard würde die Komposition zunichtemachen.
Tiefe aus dem Rendering
Ein WebGL-Canvas ist das einzige Spektakel der Seite, die Oberfläche ist so angelegt, dass sie nicht dagegen anarbeitet. Die Szene reagiert auf den Viewport, statt als Bild dahinter zu liegen.
Was hier für Gesundheit funktioniert
Wo ein Template den Fold mit Modulen füllt, ist die Liste im Eintrag Landingpage kurz: die Navigation, das Ankündigungs-Badge, die Kennzahlen-Zeile, die Feature-Liste und der Hintergrund-Clip, und dann ist Schluss. Nichts wird aufgebläht, um Fläche zu füllen; genau das belegen Schrift von 36px bis 110px und Abstände in 40px-Schritten. Es gibt einem Leser im Bereich Gesundheit den kürzesten ehrlichen Weg zum Angebot.
Die Reihenfolge im Eintrag Landingpage
Du könntest diese Blöcke umsortieren, und die Seite würde weiter laden. Sie würde aber nicht mehr als Argument lesen: die Navigation, das Ankündigungs-Badge, die Kennzahlen-Zeile, die Feature-Liste und der Hintergrund-Clip sind eine Abfolge, und Schrift von 36px bis 110px und Abstände in 40px-Schritten funktionieren nur in dieser Reihenfolge. Ein Leser im Bereich Gesundheit bekommt das Angebot vor den Optionen.
Wie der Eintrag Landingpage umbricht
Wenn deine Breakpoints gewählt wurden, damit etwas passt, statt das Layout zu ändern, lies diesen Eintrag. die Schrift ist zwischen 36px und 110px begrenzt und die Navigation klappt zu einem mobilen Menü zusammen statt einer Liste ausgeblendeter Elemente. Die Reihenfolge ist das Letzte, was sich ändert.
Häufige Fragen
Was steht eigentlich im Briefing hinter Celestial Renewal?
Das erfasste Briefing umfasst 7.343 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.
Kann ich Landingpage von Celestial Renewal in einem anderen Stack nachbauen?
Celestial Renewal 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 die Übergänge von Celestial Renewal behalten und nur die Zeitwerte ändern?
Die Übergänge hängen an Zuständen der Oberfläche statt an einer Scroll-Zeitleiste und sind im Bereich von 75ms mit cubic-bezier(0.22,1,0.36,1) angesetzt. Das Briefing hält die Werte fest, damit eine Portierung sie ohne Raten übernehmen kann.
