À propos de ce modèle
Avant toute reconstruction de section hero pour une marque de voyage, lisez Gulfselite, qui publie ensemble la composition et la spécification. La couleur se réduit à orange sourd #69574B en fond et blanc #FEFEFE pour le texte, composée en Inter. La livraison tient en Tailwind et JavaScript vanilla, une seule page, sans plugin ni outillage de build entre vous et le design. L’animation se résume à 120ms de transitions et un fond vidéo en boucle. Cette référence s’adresse à une marque de voyage qui veut un premier écran réglé avant le début du build.
Conçu pour
- Ce design de section hero est fait pour les agences qui ont besoin que le cadre 1920x1448 survive à trois séries de retours client.
- Cette base est prévue pour un designer qui arrive sur un projet déjà livré en Tailwind et JavaScript vanilla et qui n’a que les textes à remplacer.
- Les développeurs front-end qui doivent livrer ce type de page en production utiliseront Tailwind et JavaScript vanilla comme implémentation de référence.
Ce qui est inclus
- Une navigation sur une seule ligne. Le nom de marque tient le bord gauche et les liens courent à sa droite, le tout composé en Inter pour que la barre appartienne à la page en dessous plutôt qu’à un système séparé. La barre se pose sur la composition 1920x1448 sans fond propre, la vidéo court donc bord à bord en dessous. Limitez-vous à quatre ou cinq liens, la rangée est dimensionnée pour ce nombre.
- Des tailles fixées par le brief. La mise en page est résolue sur des valeurs fixes (des pas d’espacement de 20px et des transitions de 120ms), ce qui garde le premier écran composé à n’importe quelle largeur. Les proportions du cadre sont notées avec les tailles, une reconstruction obtient donc aussi le bon ratio.
- Une barre sans superflu. Les états de focus et de survol sont spécifiés pour chaque lien au lieu d’être hérités du navigateur. Si votre page compte plus de sections, regroupez-les au lieu d’élargir la barre.
- Rien n’est hérité ici. Les espacements sont cités de la même façon (des pas d’espacement de 20px et des transitions de 120ms), et non comme une échelle qui grandit toute seule.
Animation et interaction
Assez rapide pour être voulu
Ici, l’animation se mesure en millisecondes, 120ms. C’est tout le budget d’animation, et il est dépensé sur des changements d’état plutôt que sur une timeline de scroll. Les durées sont assez courtes pour que le retour se lise comme une réponse et non comme une animation.
Une boucle, pas une timeline
Un clip de 9,9s suffit à toute la couche d’ambiance, il joue derrière le texte, boucle sans coupure visible et ne réagit jamais au pointeur. Le clip est assez court pour boucler sans couture visible, ce qui compte plus que sa résolution.
Les timings derrière section hero
Le timing est explicite, 120ms de transitions, une boucle média de 9,9s et un titre mot par mot, le tout écrit dans le brief plutôt que réglé au ressenti. Rien ne s’anime pour lui-même dans le design de section hero.
Adapter section hero à votre marque
Le brief nomme Inter et l’échelle qui l’accompagne. Substituez une police aux mêmes proportions et la composition survit. La composition est la partie réutilisable, et elle survit à une autre marque.
Le réagencement de section hero
Le coût d’une échelle fluide est un contrôle moindre des tailles exactes. En échange, la ligne d’affichage reste proportionnée, et c’est pourquoi un clamp entre 40px et 20px figure dans le brief. Un simple écrasement aurait coûté moins cher et n’aurait pas tenu.
Questions fréquentes
Quelle part de Gulfselite dépend de Tailwind et JavaScript vanilla?
Non. Le brief est une spécification, pas une liste de dépendances. Il a été écrit pour Tailwind et JavaScript vanilla, mais la même composition se reconstruit avec ce que vous utilisez déjà. La stack est nommée pour que vous sachiez comment la référence a été produite.
Que faire du brief de Gulfselite une fois qu’on l’a en main?
Tout ce qui est cité sur la page provient du brief capturé de 2 498 caractères, et non d’un texte rédigé après coup. C’est pourquoi les chiffres et la prose concordent.
Le prompt de Gulfselite est-il une spécification aboutie ou un simple point de départ?
Ce n’est pas une description d’ambiance mais un brief de construction, avec la composition en 1920x1448, les espacements et les valeurs d’animation. Aucun passage ne prend l’image rendue pour la source de vérité.
