À propos de ce modèle
Lisez GlobalBank comme une spécification de section hero, dont les valeurs ont été écrites avant la construction de la page. Elle ouvre sur « Think Ahead. Move Fast. Exceed Expectations » et donne à cette ligne tout le cadre au lieu de la réduire à une carte. La couleur se réduit à blanc #FFFFFF en fond, vert profond #1A2E24 pour le texte et vert #22C55E pour les accents, composée en Inter. La livraison est en un seul fichier HTML autonome, capturée en 1468x1080 pour que le cadre soit fixé avant la première ligne de code. L’animation se cantonne à 4.1s de transitions et un fond vidéo en boucle. Gardez-la ouverte pendant la rédaction, car le brief de 31 093 caractères est la partie qui se transfère à votre page.
Conçu pour
- Mettez un seul fichier HTML autonome dans la note de passation pour que la prochaine reconstruction n’ait pas à reparcourir la page.
- Si trois personnes doivent modifier ce design de section hero, donnez aux responsables de contenu une typographie de 14px à 46px et des pas d’espacement de 14px plutôt qu’une capture d’écran.
- Équipes qui reprennent un design de section hero SaaS repéré chez un concurrent et veulent un seul fichier HTML autonome dans le brief avant que quiconque choisisse un framework.
Ce qui est inclus
- La barre partage la grille. La navigation est une bande fine et non un bandeau, avec le nom de marque à gauche, les liens vers le centre droit et une action en #22C55E, le tout posé en tête de section hero, sans fond propre. Les liens sont d’un corps inférieur à celui du nom de marque, et l’action en #22C55E est le seul élément de la barre à porter du gras. Limitez-vous à quatre ou cinq liens, la rangée est dimensionnée pour ce nombre.
- Chaque mesure est écrite. Les tailles ont été relevées sur le rendu en 1468x1080, une typographie de 14px à 46px, des pas d’espacement de 14px et des transitions de 4.1s. Chaque valeur se vérifie contre le prompt capturé, ce qui rend une reconstruction vérifiable plutôt qu’approximative.
- Une navigation sur une seule ligne. La barre compte une poignée d’éléments, elle se reconstruit donc sans bibliothèque de composants. La référence a été capturée en 1468x1080.
- Les tailles sont dans le brief, pas dans une échelle. Les espacements sont cités de la même façon (une typographie de 14px à 46px, des pas d’espacement de 14px et des transitions de 4.1s), et non comme une échelle qui grandit toute seule.
Animation et interaction
Des changements d’état minutés
Chaque changement d’état de la spécification porte une durée, les transitions se règlent autour de 4.1s. Rien n’est laissé au réglage par défaut du navigateur, et c’est pourquoi la page semble conçue plutôt qu’animée. L’easing est spécifié avec la durée (4.1s), donc une reconstruction ne peut pas substituer discrètement une autre sensation.
Une ambiance sans bibliothèque de scroll
Le clip de fond tourne 4,9s en 1468x1080 sur une boucle sans fin, en sourdine et en inline, donc la page reste en mouvement pendant que l’attention du lecteur est sur le texte. Aucune bibliothèque de scroll n’est nécessaire, parce que le seul mouvement d’ambiance est le média lui-même. Une image poster prend le relais quand la lecture automatique est bloquée, donc le mouvement est un plus et non une nécessité.
Les timings derrière section hero
Le brief lie chaque transition à une valeur (4.1s de transitions, une boucle média de 4,9s et un titre mot par mot). C’est ce qui évite à la page de ressembler à un template sur lequel on aurait posé un preset d’animation. Rien ne s’anime pour lui-même dans le design de section hero.
L’ordre de section hero
Rien ici ne concurrence la première décision. « Think Ahead. Move Fast. Exceed Expectations » fait ce travail dès la première image. Le contenu d’appui attend sous la ligne de flottaison, et rien d’autre que la navigation, le titre et le clip de fond n’occupe le haut de la page. Un lecteur SaaS reçoit l’offre avant les options.
Lire GlobalBank comme une spécification
Quand une reconstruction dérive, les espacements lâchent en premier. GlobalBank l’évite en publiant une typographie de 14px à 46px, des pas d’espacement de 14px et des transitions de 4.1s avec la composition. Rien dans le design de section hero ne dépend d’une valeur par défaut.
Questions fréquentes
Quelle part de GlobalBank dépend de un seul fichier HTML autonome?
La fiche indique un seul fichier HTML autonome pour la provenance, parce que GlobalBank 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.
Quelle est la longueur du prompt derrière GlobalBank?
Comptez 31 093 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 garder les transitions de GlobalBank en changeant les durées?
Les entrées et les changements d’état se situent dans la plage de 4.1s. 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.
