À propos de ce modèle
F1 Racing Hub donne à une marque lifestyle un premier écran fini et les valeurs qui l’ont produit. Toute la page repose sur bleu profond #0A0E1C en fond et orange vif #EDB40B pour les accents. La référence est construite avec React et Tailwind CSS, et les décisions de mise en page sont énoncées indépendamment de cette stack. L’animation se limite à 400ms de transitions, cubic-bezier(0.16,1,0.3,1) et un fond vidéo en boucle, assez discrète pour que le texte reste au premier plan. Servez-vous-en comme référence quand vous construisez un design de section hero pour une marque lifestyle et que vous voulez une composition finie plutôt qu’un point de départ.
Conçu pour
- Équipes growth qui rhabillent un design de section hero pour une marque lifestyle et veulent garder le cadre 1470x1080 pendant que le texte de l’offre change.
- Équipes d’agence qui défendent un design de section hero pour une marque lifestyle et tiennent à citer une typographie de 13px à 120px et des sections de 42vh dans la présentation, pour que le devis tienne encore après la réunion de lancement.
- Des responsables marketing produit qui ont besoin qu’une section hero reste lisible avec 7s de vidéo en boucle derrière le texte.
Ce qui est inclus
- Les liens avant l’action. La barre est l’élément le plus discret de la composition, avec le nom de marque, une courte rangée de liens et une action en #EDB40B, le tout au plus petit corps de l’échelle du brief. Sous 768px, les liens se replient au lieu de passer sur une seconde ligne.
- La vidéo est le fond, pas un panneau. Le brief spécifie la vidéo en 1470x1080 avec une boucle de 7s, et chaque élément de texte est placé contre ce cadre. La boucle est assez courte (7s) pour que l’œil la lise comme une texture et non comme une timeline.
- Le contenu découpé en panneaux. Là où viendrait une suite de texte, cette page pose un ensemble de panneaux, ce qui garde la lecture de section hero balayable. Les panneaux partagent la fonte d’interface à un seul corps, ce qui évite que la grille ne devienne une seconde mise en page. Gardez l’ordre de lecture comme ordre des panneaux.
- L’échelle est bornée, pas étagée. Le haut de l’échelle est fluide (un clamp entre 13px et 120px) et le reste est fixe, le cadre reste donc composé à mesure que le viewport se rétrécit. La typographie change de taille, pas de rôle, à mesure que le viewport se rétrécit.
Animation et interaction
L’interaction reste locale
Le retour d’information se limite à des états de survol sur les boutons et les liens plutôt que sur chaque carte et un slider qui fait défiler le contenu par pages à la demande, et c’est ce qui évite à un premier écran dense de paraître surchargé. Rien sur la page n’ouvre de modale ni ne détourne le scroll, les interactions restent locales à l’élément. Vérifiez les états sur un appareil tactile.
Le timing reste dans le brief
Ici, l’animation se mesure en millisecondes, 400ms avec cubic-bezier(0.16,1,0.3,1). 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 états de focus utilisent la même durée que le survol, donc le retour au clavier et à la souris est identique.
Par où commencer dans F1 Racing Hub
Si votre marque porte une palette plus lourde, testez-la sur le cadre avant de valider. bleu profond #0A0E1C porte la page, donc un accent plus sombre demande plus de contraste que dans la référence. La composition est la partie réutilisable, et elle survit à une autre marque.
Les timings derrière section hero
Chaque transition porte ici un chiffre. C’est pourquoi le portage de 400ms de transitions, une boucle média de 7s et des états de survol et de clic se fait valeur par valeur au lieu d’un réglage au ressenti. Rien ne s’anime pour lui-même dans le design de section hero.
Ce qui fonctionne dans section hero
F1 Racing Hub fonctionne parce que sa hiérarchie est décidée plutôt que décorée. Le brief fixe une typographie de 13px à 120px, des sections de 42vh, des pas d’espacement de 20px et des transitions de 400ms, donc un nouveau texte se pose dans le cadre au lieu de le rouvrir. F1 Racing Hub énonce la promesse une fois et laisse la composition la répéter au lieu d’ajouter une seconde affirmation.
Questions fréquentes
Quelle est la longueur du prompt derrière F1 Racing Hub?
Comptez 10 448 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.
Pourquoi le prompt de F1 Racing Hub n’est-il pas reproduit ici?
Tout ce qui est cité sur la page provient du brief capturé de 10 448 caractères, et non d’un texte rédigé après coup. C’est pourquoi les chiffres et la prose concordent.
Quelle part de F1 Racing Hub dépend de React et Tailwind CSS?
La fiche indique React et Tailwind CSS pour la provenance, parce que F1 Racing Hub 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.
