À propos de ce modèle
VEX Ventures conserve sa trace de décision, puisque le brief de section hero fait 5 051 caractères. Elle ouvre sur « We back visionaries and craft ventures that define what comes next » et donne à cette ligne tout le cadre au lieu de la réduire à une carte. La typographie repose sur Inter, et le brief fixe les corps au lieu de les laisser à une échelle. La livraison est en React et Tailwind CSS, capturée en 800x603 pour que le cadre soit fixé avant la première ligne de code. L’animation se résume à 1000ms de transitions. C’est la référence qu’il faut pour un design de section hero destiné à un produit fintech, quand le premier écran doit sembler intentionnel.
Conçu pour
- 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 VEX Ventures.
- Si votre typographie n’est pas Inter, les développeurs front-end doivent remesurer le titre avant de retoucher le timing de l’entrée.
- Fondateurs qui lancent un design de section hero pour un produit fintech et doivent avoir tranché Inter et l’échelle typographique avant qu’un développeur commence.
Ce qui est inclus
- Repli des liens à une largeur. 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 800x603 sans fond propre, la vidéo court donc bord à bord en dessous.
- Mesuré contre le viewport. La liste reste courte (des pas d’espacement de 18px et des transitions de 1000ms), c’est pourquoi tout le système se vérifie à la main. La plus petite et la plus grande valeur de cette liste bornent la plage dans laquelle travaille la composition.
- Rangée du haut, une action. Les états de survol et de focus sont spécifiés pour chaque lien, ce qui évite qu’une barre fine paraisse inerte. Si votre page compte plus de sections, regroupez-les au lieu d’élargir la barre.
- Les tailles sont dans le brief, pas dans une échelle. Les espacements sont cités de la même façon (des pas d’espacement de 18px et des transitions de 1000ms), et non comme une échelle qui grandit toute seule.
Animation et interaction
Du survol, mais avec parcimonie
Le travail au pointeur est réduit et spécifié (des états de survol sur les boutons et les liens plutôt que sur chaque carte), appliqué aux éléments qui ont déjà l’air interactifs. Parce que les états sont simples, ils se portent dans n’importe quel système de composants. N’animez pas la mise en page au survol.
Des changements d’état minutés
Ici, l’animation se mesure en millisecondes, 1000ms. 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. Une même valeur est réutilisée sur tous les contrôles, donc leurs durées ne peuvent pas diverger.
Le réagencement de section hero
Le design de section hero est composé en 800x603 puis recomposé pour les largeurs étroites, l’échelle est fluide plutôt que par paliers, pour que la version téléphone soit une décision et non un écrasement. La version mobile est une décision, pas un repli.
Lire VEX Ventures comme une spécification
Là où un moodboard laisse l’échelle ouverte, ce brief la ferme, des pas d’espacement de 18px et des transitions de 1000ms, avec les valeurs voisines dérivées de cette décision. Rien dans le design de section hero ne dépend d’une valeur par défaut.
Par où commencer dans VEX Ventures
Commencez par le texte, pas par la couleur. Réécrivez « We back visionaries and craft ventures that define what comes next » en une phrase sur votre produit, puis composez-la en Inter au corps utilisé dans le brief. Si un nouvel élément n’aide pas à expliquer la promesse ou l’action suivante, sa place est sous la ligne de flottaison.
Questions fréquentes
Quelle est la longueur du prompt derrière VEX Ventures?
Ce n’est pas une description d’ambiance mais un brief de construction, avec la composition en 800x603, les espacements et les valeurs d’animation. Aucun passage ne prend l’image rendue pour la source de vérité.
Faut-il React et Tailwind CSS pour reconstruire VEX Ventures?
La fiche indique React et Tailwind CSS pour la provenance, parce que VEX Ventures 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 utiliser VEX Ventures dans un projet client?
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 800x603.
