À propos de ce modèle
Lisez Velorah comme une spécification de section hero, dont les valeurs ont été écrites avant la construction de la page. La page affiche son propre titre, « Where dreams rise through the silence », et la composition est construite autour de ces mots exacts. La couleur se réduit à sarcelle #01405F en fond et jaune #D9BF63 pour le texte, composée en Inter. La livraison tient en React et Tailwind CSS, une seule page, sans plugin ni outillage de build entre vous et le design. Le budget d’animation est 0.8s de transitions. Gardez-la ouverte pendant la rédaction, car le brief de 3 788 caractères est la partie qui se transfère à votre page.
Conçu pour
- Les ingénieurs qui veulent que ce design de section hero tienne sur une connexion lente utiliseront 800x589 et l’échelle typographique comme budget de poids.
- 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 Velorah.
- Si le lancement est proche, reprenez le cadre 800x589 et l’entrée animée en 0.8s et laissez le reste de la composition tranquille.
Ce qui est inclus
- Une navigation sans fond. La barre se superpose à section hero au lieu de repousser le contenu, la composition garde donc toute la hauteur du premier écran. La barre se pose sur la composition 800x589 sans fond propre, la vidéo court donc bord à bord en dessous.
- Mesuré, pas estimé à l’œil. Rien dans la mise en page n’est laissé à l’impression, le brief cite des pas d’espacement de 90px et des transitions de 0.8s et le build doit atteindre ces valeurs. Les espacements sont cités dans les mêmes unités que la typographie, les deux se comparent donc directement.
- La typographie fait la hiérarchie. Les paliers de taille et l’interlettrage du brief donnent le ton ici, avec Inter à un corps display serré, puis une chute nette vers le texte secondaire. Remplacer la fonte est possible, mais les proportions doivent survivre à la substitution. Gardez les paliers de taille même si vous changez de fonte.
- Une barre de navigation discrète. Testez la barre sur vos propres médias avant de lui donner un fond. La référence a été capturée en 800x589.
Animation et interaction
Du survol, mais avec parcimonie
Chaque élément interactif ne fait qu’une chose (des états de survol sur les boutons et les liens plutôt que sur chaque carte), et c’est ce qui rend les états prévisibles. Le survol et le focus sont spécifiés ensemble, donc la souris et le clavier reçoivent la même information.
Des changements d’état minutés
Les changements d’état sont fixés à 0.8s, donc le retour des contrôles est une valeur de design et non un défaut du navigateur. L’easing est spécifié avec la durée (0.8s), donc une reconstruction ne peut pas substituer discrètement une autre sensation.
Lire Velorah comme une spécification
Ici, le design de section hero est mesuré plutôt qu’estimé à l’œil, car les valeurs de des pas d’espacement de 90px et des transitions de 0.8s viennent du brief et la mise en page s’aligne sur ces pas au lieu d’être ajustée au jugé. Rien dans le design de section hero ne dépend d’une valeur par défaut.
L’ordre de section hero
Vous pourriez mélanger ces blocs, la page se chargerait encore. Elle cesserait en revanche de se lire comme un argument, car ce qui porte la page est l’ordre de la navigation, la ligne de statistiques et le clip de fond, réglé par des pas d’espacement de 90px et des transitions de 0.8s. Un lecteur agence reçoit l’offre avant les options.
Ce qui bouge dans Velorah
L’animation se limite à 0.8s de transitions et des états de survol et de clic. Rien dans le design de section hero ne s’anime plus longtemps que le brief ne l’autorise. Rien ne s’anime pour lui-même dans le design de section hero.
Questions fréquentes
Que recevez-vous en copiant le brief de Velorah?
Comptez 3 788 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.
Puis-je reconstruire ce type de section hero de Velorah avec une autre stack?
La fiche indique React et Tailwind CSS pour la provenance, parce que Velorah 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 Velorah en changeant les durées?
Les entrées et les changements d’état se situent dans la plage de 0.8s. Ils sont déclenchés par des changements d’état plutôt que par une bibliothèque de scroll, et ils ne retardent jamais la lecture du texte.
