À propos de ce modèle
Vision Reveal conserve sa trace de décision, puisque le brief de section hero fait 16 723 caractères. « I build compelling visual stories & motion that make ideas shine » est la ligne que la mise en page doit porter. La couleur se réduit à blanc #E4E4E4 en fond, noir #111111 pour le texte et sarcelle #75C5DE pour les accents, composée en Inter. La construction repose sur Framer Motion. Chaque mesure y est écrite, et c’est ce qui la rend réutilisable. Le brief consacre son budget d’animation à 0.3s de transitions, cubic-bezier(0.96,-0.02,0.38,1.01) et un fond vidéo en boucle. Gardez-la ouverte pendant la rédaction, car le brief de 16 723 caractères est la partie qui se transfère à votre page.
Conçu pour
- Les chefs de produit qui doivent chiffrer la reconstruction liront un breakpoint à 447px comme le périmètre du travail.
- Si la référence n’est qu’un point de départ, les designers peuvent garder un cadre 1460x1080 et reconstruire le reste du design de section hero.
- Ce design de section hero sert aux fondateurs qui ont besoin d’un seul écran pour prouver que le texte agence peut porter 5,8s de vidéo en boucle.
Ce qui est inclus
- Une barre de navigation discrète. La rangée du haut réunit le nom de marque, quatre ou cinq liens et une seule action teintée #75C5DE, dimensionnée pour rester discrète face au reste de la page. Sous 447px, les liens se replient dans une surcouche plein écran. Sous 447px, les liens se replient au lieu de passer sur une seconde ligne.
- Un clip plein cadre derrière la typographie. Le premier écran est un seul clip en 1460x1080, et tout le reste s’organise par-dessus. Une image d’attente en 1460x1080 tient la composition quand la lecture automatique est indisponible, la mise en page ne s’effondre donc jamais.
- L’échelle chute nettement. Ici, la typographie est le système de style, avec Inter au corps display, la même fonte sur toute l’interface, et aucune seconde couleur d’accent pour faire le travail. L’interlettrage se resserre à mesure que le corps grandit, c’est pourquoi la ligne display tient sur toute la plage 14–42px.
- Rangée du haut, une action. Une seule action par barre. La référence a été capturée en 1460x1080.
Animation et interaction
Rendu, pas illustré
Un canvas vivant fait tout le travail visuel, un canvas WebGL. Le brief garde l’interface sobre autour du canvas pour que la scène soit le seul spectacle.
Il respecte reduced-motion
La couche d’animation est livrée avec un interrupteur, l’animation d’entrée et de boucle est retirée sous prefers-reduced-motion. La mise en page est identique animation désactivée, donc rien ne dépend de l’animation. Testez la page avec l’animation désactivée.
Le gain pour une agence ou un studio
Un hero standard et le design de section hero utilisent les mêmes pièces. Ici, elles sont ordonnées par la navigation, le titre, la ligne de statistiques et la liste de fonctionnalités et mesurées avec une typographie de 14px à 42px, des sections de 100vh, des angles de 9999px et des pas d’espacement de 32px, si bien que l’écran se lit comme une séquence et non comme un conteneur. Vision Reveal énonce la promesse une fois et laisse la composition la répéter au lieu d’ajouter une seconde affirmation.
Comment Vision Reveal ordonne la première lecture
Le design de section hero a un parcours de lecture énoncé. La navigation installe le produit et donne au visiteur de retour des repères familiers. Ensuite, l’œil parcourt la navigation, le titre, la ligne de statistiques et la liste de fonctionnalités dans l’ordre, ce qui évite qu’un écran unique se lise comme une liste. Un lecteur agence reçoit l’offre avant les options.
Adapter section hero à votre marque
Une ligne, une police, un accent, ces trois substitutions changent le plus le design, et rien d’autre, les valeurs à ne pas bouger étant une typographie de 14px à 42px, des sections de 100vh, des angles de 9999px, des pas d’espacement de 32px et des transitions de 0.3s. Gardez le cadre et l’échelle, le sujet est la partie qui doit changer.
Questions fréquentes
Que contient réellement le brief derrière Vision Reveal?
Comptez 16 723 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 Vision Reveal avec une autre stack?
La référence se trouve avoir été construite en Framer Motion, mais ce choix n’engage rien dans la mise en page. Les espacements, la typographie et les valeurs d’animation se transposent dans la stack que vous utilisez déjà.
Qu’est-ce qui déclenche les animations de Vision Reveal?
L’animation est décrite avec le même niveau de détail que la mise en page, et les changements d’état se stabilisent dans la plage 0.3s en cubic-bezier(0.96,-0.02,0.38,1.01). Portez la composition d’abord et les durées ensuite, car il est plus facile de les caler une fois la mise en page en place.
