À propos de ce modèle
Celestial Renewal résout le problème de landing page pour un produit de santé ou de bien-être à partir d’un seul brief capturé. « Expert beauty and holistic wellness, delivered with warmth and intention » est la ligne que la mise en page doit porter. La palette repose sur bleu profond #010A17 en fond et bleu #0A4267 pour les accents, et la page est composée en Instrument Serif. La fiche nomme la stack qui a produit la page (React et Tailwind CSS) au lieu de la passer sous silence. L’animation se cantonne à 75ms de transitions, cubic-bezier(0.22,1,0.36,1) et un fond vidéo en boucle. Gardez-la ouverte pendant la rédaction, car le brief de 7 343 caractères est la partie qui se transfère à votre page.
Conçu pour
- Reprenez le cadre 1464x1080 et une typographie de 36px à 110px et des pas d’espacement de 40px de ce design de landing page avant tout le reste.
- Des responsables marketing produit qui ont besoin qu’une landing page reste lisible avec 5,9s de vidéo en boucle derrière le texte.
- Ce design est pensé pour les responsables de contenu qui réécrivent un design de landing page dont le titre doit rester aussi long que celui de Celestial Renewal.
Ce qui est inclus
- En haut, marque, liens et action unique. La rangée concentre son contraste sur un seul élément, l’action en #0A4267, tandis que le nom de marque et les liens restent sur la couleur d’encre. Une surcouche mobile prend le relais sous le breakpoint tablette. Les liens sont d’un corps inférieur à celui du nom de marque, et l’action en #0A4267 est le seul élément de la barre à porter du gras. Limitez-vous à quatre ou cinq liens, la rangée est dimensionnée pour ce nombre.
- Chaque mesure est écrite. La mise en page travaille sur des valeurs absolues plutôt que sur des ratios (une typographie de 36px à 110px, des pas d’espacement de 40px, des transitions de 75ms et un easing cubic-bezier(0.22,1,0.36,1)). Les valeurs étant fixes, une substitution change l’aspect sans changer le rythme.
- Un clip, pas une illustration. Le média est un seul clip de 5,9s recadré en cover dans le cadre 1464x1080, il ne laisse donc jamais de bandes noires, quelle que soit la largeur. La boucle est assez courte (5,9s) pour que l’œil la lise comme une texture et non comme une timeline.
- Rangée du haut, une action. Dessinez l’état replié avant d’ajouter un sixième lien. La référence a été capturée en 1464x1080.
Animation et interaction
Tout le budget d’animation
Les transitions sont fixées à 75ms avec cubic-bezier(0.22,1,0.36,1), et c’est la durée à laquelle les contrôles sont tenus. Les timings courts font que la page semble conçue, un réglage par défaut trop lent annulerait la composition.
Le canvas fait le visuel
Le rendu à l’exécution est ici la décision de design (un canvas WebGL), et la mise en page est construite pour lui laisser la place. Parce que c’est un rendu et non une image fixe, l’élément focal tient à toutes les tailles. Gardez l’interface plate autour.
Pourquoi cette composition fonctionne pour santé
La retenue coûte de la place pour la preuve dans le premier écran. Ce brief accepte ce coût et dépense le premier écran sur l’offre, en fixant une typographie de 36px à 110px et des pas d’espacement de 40px pour qu’une section de preuve s’ajoute plus bas sans reprise. Elle donne à un lecteur santé le chemin le plus court vers l’offre.
L’ordre de landing page
À lire dans l’ordre, la navigation, le badge d’annonce, la ligne de statistiques, la liste de fonctionnalités et le clip de fond. Chaque élément a un seul rôle, et l’accent bleu #0A4267 est dépensé uniquement sur l’élément que vous devez presser. Un lecteur santé reçoit l’offre avant les options.
Le réagencement de landing page
Testez ce design de landing page en 1464x1080 puis en largeur téléphone, le même ordre tient, avec la typographie est bornée entre 36px et 110px et la navigation se replie en menu mobile. L’échelle change avec le viewport, la séquence non.
Questions fréquentes
Que contient réellement le brief derrière Celestial Renewal?
Comptez 7 343 caractères pour le brief capturé, qui décrit le cadre, l’échelle typographique, la palette et les transitions. Le copier vous donne ce texte tel quel, et l’envoyer à Studio prépare la même demande avec la page déjà décrite.
Pourquoi la fiche mentionne-t-elle React et Tailwind CSS?
La fiche indique React et Tailwind CSS pour la provenance, parce que Celestial Renewal a été réalisé avec cette pile technique. Le brief ne décrit que des positions, des tailles et des durées, donc il se reconstruit dans n’importe quel framework capable de composer du texte et de placer des éléments.
Puis-je garder les transitions de Celestial Renewal en changeant les durées?
Les transitions sont rattachées à des états de l’interface plutôt qu’à une chronologie de scroll, et elles se résolvent dans la plage 75ms avec cubic-bezier(0.22,1,0.36,1). Le brief en consigne les valeurs pour qu’un portage n’ait pas à les deviner.
