À propos de ce modèle
Stillmind est la référence section hero pour un produit de santé ou de bien-être, et le brief qui l’accompagne est une spécification de construction complète, pas un mood board. La couleur se réduit à rouge profond #48292F en fond et bleu profond #182C41 pour les accents, composée en Instrument Serif. La livraison est en React et Tailwind CSS, capturée en 1472x1080 pour que le cadre soit fixé avant la première ligne de code. L’animation se cantonne à 1000ms de transitions, cubic-bezier(0.4,0,0.2,1) et un fond vidéo en boucle. Si vous préparez un brief pour section hero santé, partez de cette composition et remplacez le sujet.
Conçu pour
- Ce design de section hero sert aux fondateurs qui ont besoin d’un seul écran pour prouver que le texte santé peut porter 6,2s de vidéo en boucle.
- Quiconque briefe un modèle sur un design de section hero utilisera le prompt de 6 025 caractères comme point de départ.
- Ce design est pensé pour les responsables de contenu qui réécrivent un design de section hero dont le titre doit rester aussi long que celui de Stillmind.
Ce qui est inclus
- Une ligne, aucun tiroir. Nom de marque, liens et action en #182C41 partagent une même ligne de base, c’est ce qui évite qu’une rangée fine paraisse accidentelle. Les liens sont d’un corps inférieur à celui du nom de marque, et l’action en #182C41 est le seul élément de la barre à porter du gras.
- Une seule échelle, texte et cadre. Rien dans la mise en page n’est laissé à l’impression, le brief cite des transitions de 1000ms et un easing cubic-bezier(0.4,0,0.2,1) et le build doit atteindre ces valeurs. Les proportions du cadre sont notées avec les tailles, une reconstruction obtient donc aussi le bon ratio.
- Le média derrière la typographie. Le premier écran est un seul clip en 1472x1080, et tout le reste s’organise par-dessus. La boucle est assez courte (6,2s) pour que l’œil la lise comme une texture et non comme une timeline. Exportez en 1472x1080 ou plus large pour garder un cadrage honnête.
- La typographie porte le ton. La typographie est Instrument Serif, et le brief assigne un rôle à la fonte plutôt que de mélanger pour varier. Graisses, interlettrage et paliers de taille sont spécifiés, la hiérarchie survit donc à un remplacement. La fonte display n’est employée qu’à une seule taille, elle n’entre donc jamais en concurrence avec elle-même.
Animation et interaction
Du survol, mais avec parcimonie
La couche interactive est petite et prévisible, des états de survol sur les boutons et les liens plutôt que sur chaque carte. Tout le reste ne bouge pas, ce qui garde l’accent sur la composition. Un contrôle qui a l’air interactif se comporte comme tel, donc aucune affordance trompeuse. Quelques états fiables valent mieux qu’une longue liste d’effets.
Les durées du brief
Les timings sont courts et constants (1000ms avec cubic-bezier(0.4,0,0.2,1)), donc les états de survol et d’appui se lisent comme un seul système et non comme une série d’effets séparés. Les timings courts font que la page semble conçue, un réglage par défaut trop lent annulerait la composition.
Les chiffres derrière section hero
Démontez la composition et les valeurs continuent de décrire section hero, avec des transitions de 1000ms et un easing cubic-bezier(0.4,0,0.2,1) pour le cadre et le rythme en dessous. Rien dans le design de section hero ne dépend d’une valeur par défaut.
L’ordre de section hero
La page suit un ordre délibéré. La navigation installe le produit et donne au visiteur de retour des repères familiers. Le titre prend le corps display, la ligne de soutien explique la promesse, et l’accent bleu profond #182C41 marque l’action principale, donc l’étape suivante ne fait aucun doute. Rien d’autre ne concurrence cette première décision, aucune grille de cartes en amont, ce qui évite à une section hero de paraître lourde dans un travail santé. Un lecteur santé reçoit l’offre avant les options.
Ce qui bouge dans Stillmind
Comparez l’animation d’ici avec une page pilotée par le scroll. Les deux bougent, mais celle-ci bouge là où le brief l’indique (1000ms de transitions, une boucle média de 6,2s et des états de survol et de clic), donc le texte reste devant. Rien ne s’anime pour lui-même dans le design de section hero.
Questions fréquentes
Que contient réellement le brief derrière Stillmind?
Ce n’est pas une description d’ambiance mais un brief de construction, avec la composition en 1472x1080, les espacements et les valeurs d’animation. Aucun passage ne prend l’image rendue pour la source de vérité.
Quelle part de Stillmind dépend de React et Tailwind CSS?
La fiche indique React et Tailwind CSS pour la provenance, parce que Stillmind 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.
D’où vient le design de Stillmind?
Le brief est une description, pas une autorisation de redistribuer les ressources d’un tiers. Gardez la structure et les chiffres, remplacez les médias et les marques, et citez la source si un client demande d’où vient la mise en page. La référence a été capturée en 1472x1080.
