À propos de ce modèle
Neurolink Hero Section est une référence de travail pour une agence ou un studio, un exemple de section hero entièrement mesuré et prêt à reproduire. Le titre affiché est « Where Memories Live Forever », et le reste de section hero s’organise autour de lui. La palette repose sur bleu profond #0D1017 en fond, blanc #FFFFFF pour le texte et orange vif #FFB733 pour les accents, et la page est composée en Inter. La référence est construite avec vanilla JS, et les décisions de mise en page sont énoncées indépendamment de cette stack. L’animation se cantonne à un fond vidéo en boucle. Servez-vous-en comme référence quand vous construisez un design de section hero pour une agence ou un studio et que vous voulez une composition finie plutôt qu’un point de départ.
Conçu pour
- Les fondateurs qui briefent une agence utiliseront le cadre 1526x1080 comme critère de recette pour la première série.
- Partez de des sections de 100vh et des pas d’espacement de 16px et laissez la palette suivre, car ce sont les espacements qui font lire ce design de section hero.
- Des responsables marketing produit qui ont besoin qu’une section hero reste lisible avec 3,9s de vidéo en boucle derrière le texte.
Ce qui est inclus
- Un bandeau de nav volontairement fin. La barre porte le nom de marque, les liens de la section et un bouton en #FFB733, mesurée à des sections de 100vh et des pas d’espacement de 16px pour ne jamais devenir un second header. Les liens sont d’un corps inférieur à celui du nom de marque, et l’action en #FFB733 est le seul élément de la barre à porter du gras.
- Un clip plein cadre derrière la typographie. La vidéo en 1526x1080 tourne en boucle 3,9s derrière le texte, muette et en lecture inline, sans aucun voile entre les deux. Une image d’attente en 1526x1080 tient la composition quand la lecture automatique est indisponible, la mise en page ne s’effondre donc jamais.
- La typographie porte le ton. La typographie est Inter, et le brief assigne un rôle à la fonte plutôt que de mélanger pour varier. Graisses, interlettrage et paliers de taille sont spécifiés, la hiérarchie survit donc à un remplacement. Un changement de fonte reste sûr tant que les tailles et les graisses restent là où le brief les a placées.
- Rangée du haut, une action. La barre se pose sur la composition 1526x1080 sans fond propre, la vidéo court donc bord à bord en dessous.
Animation et interaction
Les contrôles forment la couche interactive
Les états sont gérés composant par composant (des états de survol sur les boutons et les liens plutôt que sur chaque carte) plutôt que par une couche d’animation globale. Les états de pression sont spécifiés comme le survol, donc un appui donne la même confirmation qu’un clic. Gardez la couche interactive réduite.
Une boucle, pas une timeline
Le clip de fond tourne 3,9s en 1526x1080 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. Le clip est assez court pour boucler sans couture visible, ce qui compte plus que sa résolution.
Pourquoi cette composition fonctionne pour agence
La retenue coûte de la place pour la preuve dans le premier écran. Ce brief accepte ce coût et dépense le premier écran sur l’offre, en fixant des sections de 100vh et des pas d’espacement de 16px pour qu’une section de preuve s’ajoute plus bas sans reprise. Neurolink Hero Section énonce la promesse une fois et laisse la composition la répéter au lieu d’ajouter une seconde affirmation.
Le réagencement de section hero
Le coût d’une échelle fluide est un contrôle moindre des tailles exactes. En échange, la ligne d’affichage reste proportionnée, et c’est pourquoi un clamp entre 10px et 16px figure dans le brief. L’échelle change avec le viewport, la séquence non.
L’ordre de section hero
L’attention est dirigée plutôt que laissée au hasard. « Where Memories Live Forever » fait ce travail dès la première image. La séquence suit la navigation, le titre, le badge d’annonce, la ligne de statistiques et le clip de fond, et chaque étape est calibrée sur des sections de 100vh et des pas d’espacement de 16px pour que rien n’arrive dans le désordre. Un lecteur agence reçoit l’offre avant les options.
Questions fréquentes
Que faire du brief de Neurolink Hero Section une fois qu’on l’a en main?
Tout ce qui est cité sur la page provient du brief capturé de 10 336 caractères, et non d’un texte rédigé après coup. C’est pourquoi les chiffres et la prose concordent.
Que recevez-vous en copiant le brief de Neurolink Hero Section?
Ce n’est pas une description d’ambiance mais un brief de construction, avec la composition en 1526x1080, les espacements et les valeurs d’animation. Aucun passage ne prend l’image rendue pour la source de vérité.
Pourquoi la fiche mentionne-t-elle vanilla JS?
La référence se trouve avoir été construite en vanilla JS, 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à.
