À propos de ce modèle
Cette fiche présente Lumina en section hero, avec le brief qui a produit la page au lieu d’une simple capture d’écran. La palette est rouge #EC4899 en fond et bleu vif #3B82F6 pour les accents. La référence est construite avec un seul composant, et les décisions de mise en page sont énoncées indépendamment de cette stack. L’animation se limite à un fond vidéo en boucle, assez discrète pour que le texte reste au premier plan. Empruntez la structure et pas le sujet, car les valeurs de section hero passent à votre marque sans modification.
Conçu pour
- Ce design de section hero sert aux équipes qui doivent justifier un cadre 2056x1478 auprès de quelqu’un qui n’était pas à la réunion de lancement.
- Si l’animation doit sauter, le design de section hero reste lisible, des pas d’espacement de 70px assurant la hiérarchie.
- Reprenez le cadre 2056x1478 et des pas d’espacement de 70px de ce design de section hero avant tout le reste.
Ce qui est inclus
- Une navigation sur une seule ligne. La rangée du haut réunit le nom de marque, quatre ou cinq liens et une seule action teintée #3B82F6, dimensionnée pour rester discrète face au reste de la page. Les liens sont d’un corps inférieur à celui du nom de marque, et l’action en #3B82F6 est le seul élément de la barre à porter du gras.
- Rien n’est hérité ici. Le brief énonce ses tailles à la capture (des pas d’espacement de 70px), une reconstruction peut donc être vérifiée au lieu d’être approximée. Les espacements sont cités dans les mêmes unités que la typographie, les deux se comparent donc directement.
- Le média derrière la typographie. Un unique clip muet en boucle remplit le cadre en 2056x1478 sur 6s, cadré en cover avec le texte empilé par-dessus. Le brief écarte toute surcouche du fond vidéo pour ne pas en ternir les couleurs. Exportez en 2056x1478 ou plus large et le recadrage en cover continue de fonctionner.
- Un bandeau de nav volontairement fin. La barre se pose sur la composition 2056x1478 sans fond propre, la vidéo court donc bord à bord en dessous.
Animation et interaction
Une ambiance sans bibliothèque de scroll
Le mouvement d’ambiance est un clip de 6s en 2056x1478, qui boucle discrètement derrière le texte au lieu de réagir au pointeur. Le clip est assez court pour boucler sans couture visible, ce qui compte plus que sa résolution.
La bande qui ne s’arrête jamais
La bande horizontale est l’élément le plus fort après le titre, un mouvement continu, #3B82F6 sur l’élément actif, et elle ne demande jamais au lecteur d’interagir. L’élément actif est signalé par #3B82F6 et non par un changement de taille.
Les chiffres derrière section hero
La typographie est le premier chiffre, des pas d’espacement de 70px. Les espacements en découlent, et tout le reste de la page se positionne par rapport à ces deux valeurs. Rien dans le design de section hero ne dépend d’une valeur par défaut.
Ce qui bouge dans Lumina
Vous pourriez poser une bibliothèque de presets sur cette composition, elle paraîtrait plus chargée, pas meilleure. Le brief garde des états de survol et de clic, une boucle média de 6s et un bandeau défilant en boucle et dépense le budget là. Rien ne s’anime pour lui-même dans le design de section hero.
Par où commencer dans Lumina
Vous n’avez pas besoin de reconstruire pour vous approprier section hero. Remplacez le titre et les médias, gardez l’échelle (des pas d’espacement de 70px), et la mise en page se lit toujours comme prévu. La substitution coûte moins cher que la composition, et c’est tout l’intérêt.
Questions fréquentes
Quelle est la longueur du prompt derrière Lumina?
Comptez 2 677 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 Lumina avec une autre stack?
La fiche indique un seul composant pour la provenance, parce que Lumina 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.
Pourquoi le prompt de Lumina n’est-il pas reproduit ici?
Tout ce qui est cité sur la page provient du brief capturé de 2 677 caractères, et non d’un texte rédigé après coup. C’est pourquoi les chiffres et la prose concordent.
