À propos de ce modèle
Visual Hero est un design de section hero pour un produit IA ou SaaS, livré avec les instructions qui l’ont produit. « Forma's AI understands context, composition, and style like a creative director would » est la ligne que la mise en page doit porter. La page est composée en Instrument Serif, les corps étant fixés dans le brief. La livraison est en React et Tailwind CSS, capturée en 996x720 pour que le cadre soit fixé avant la première ligne de code. La page s’en tient à un fond vidéo en boucle. Gardez-la ouverte pendant la rédaction, car le brief de 8 275 caractères est la partie qui se transfère à votre page.
Conçu pour
- Équipes internes qui étendent ce design de section hero et ont besoin de retrouver des pas d’espacement de 50px à l’identique dans les nouveaux blocs.
- Des responsables marketing produit qui ont besoin qu’une section hero reste lisible avec 6,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 section hero dont le titre doit rester aussi long que celui de Visual Hero.
Ce qui est inclus
- La barre partage la grille. 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 996x720 sans fond propre, la vidéo court donc bord à bord en dessous. Tenez la rangée sur une seule ligne.
- Des chiffres traités comme de la typographie. La rangée de chiffres est la preuve, avec trois ou quatre valeurs sur une ligne, un petit libellé sous chacune, dans la même Instrument Serif que l’interface pour que l’ensemble se lise comme une donnée et non comme un ornement. La rangée s’aligne sur la même marge que le titre au-dessus.
- Fluide là où il faut. Le haut de l’échelle est fluide (un clamp entre 220px et 50px) et le reste est fixe, le cadre reste donc composé à mesure que le viewport se rétrécit. Le menu mobile fait partie du même brief, l’état replié est donc dessiné lui aussi.
- Repli des liens à une largeur. Les états de survol et de focus sont spécifiés pour chaque lien, ce qui évite qu’une barre fine paraisse inerte. Testez la barre sur vos propres médias avant de lui donner un fond.
Animation et interaction
Un seul comportement de scroll
Le premier écran est complet avant tout défilement, et l’animation s’y ajoute sans le remplacer (les calques de fond se déplacent à une vitesse différente du premier plan). Un seul comportement de scroll est utilisé, donc la page ne ressemble jamais à une suite d’effets séparés.
Une boucle, pas une timeline
Le mouvement d’ambiance vient de la boucle de 6,9s en 996x720 et non d’effets de scroll, ce qui garde la page calme et le texte lisible. Parce qu’il est en sourdine, la boucle peut tourner sous le texte sans concurrencer le son ni l’attention.
Lire Visual Hero 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 50px 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.
Comment Visual Hero ordonne la première lecture
Comparez le haut de cette page avec un premier écran SaaS classique. Les deux portent un titre et une action, mais ici l’ordre de la navigation, le badge d’annonce, la ligne de statistiques et le clip de fond est fixe au lieu d’un affrontement au même poids. Un lecteur SaaS reçoit l’offre avant les options.
Ce qui tient la route pour IA et SaaS
Comptez les décisions de section hero, elles remontent toutes à un seul document, 8 275 caractères qui nomment le cadre en 996x720, la typographie et le rythme. Visual Hero énonce la promesse une fois et laisse la composition la répéter au lieu d’ajouter une seconde affirmation.
Questions fréquentes
Le prompt de Visual Hero 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 996x720, 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 Visual Hero?
La fiche indique React et Tailwind CSS pour la provenance, parce que Visual Hero 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 Visual Hero 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 996x720.
