À propos de ce modèle
Stories in Light résout le problème de section hero pour une agence ou un studio à partir d’un seul brief capturé. La palette est bleu profond #2B3342 en fond et blanc #FFFFFF pour le texte, composée en Archivo. La livraison est en un seul composant, capturée en 2502x1730 pour que le cadre soit fixé avant la première ligne de code. L’animation se limite à 0.4s de transitions et un fond vidéo en boucle, assez discrète pour que le texte reste au premier plan. Gardez-la ouverte pendant la rédaction, car le brief de 4 462 caractères est la partie qui se transfère à votre page.
Conçu pour
- Toute personne qui utilise un générateur IA et veut un brief contenant déjà un seul composant au lieu de laisser le modèle décider.
- Si la référence n’est qu’un point de départ, les designers peuvent garder un breakpoint à 560px et reconstruire le reste du design de section hero.
- La page sert aux développeurs front-end qui reconstruisent un design de section hero pour une agence ou un studio en un seul composant et cherchent les chiffres derrière le rendu.
Ce qui est inclus
- Les liens avant l’action. Le nom de marque tient le bord gauche et les liens courent à sa droite, le tout composé en Archivo pour que la barre appartienne à la page en dessous plutôt qu’à un système séparé. Les libellés tiennent sur une ligne à 560px, et l’élément actif se signale par la graisse et non par une pastille.
- La vidéo au calque inférieur. Le brief spécifie la vidéo en 2502x1730 avec une boucle de 13,3s, et chaque élément de texte est placé contre ce cadre. Exportez en 2502x1730 ou plus large et le recadrage en cover continue de fonctionner.
- L’échelle est bornée, pas étagée. Les changements de largeur sont gérés dans la typographie même, un clamp entre 55px et 40px porte le titre du téléphone au desktop sans composition mobile séparée. La typographie change de taille, pas de rôle, à mesure que le viewport se rétrécit.
- Une navigation sur une seule ligne. Sous 560px, les liens se replient au lieu de passer sur une seconde ligne.
Animation et interaction
Des changements d’état minutés
Survol, appui et focus se règlent tous en 0.4s, et c’est ce qui rend l’interface immédiate. L’easing est spécifié avec la durée (0.4s), donc une reconstruction ne peut pas substituer discrètement une autre sensation.
La boucle fait l’ambiance
Un clip de 13,3s suffit à toute la couche d’ambiance, il joue derrière le texte, boucle sans coupure visible et ne réagit jamais au pointeur. Le clip est en sourdine et en inline, donc la première image est disponible sans interaction.
Adapter section hero à votre marque
La composition est la partie réutilisable, le sujet vous appartient. Gardez un corps display fixe de 15px et des sections de 100vh et remplacez les mots, les médias et les signes de marque. Gardez le cadrage des médias, il travaille autant que la typographie.
Les timings derrière section hero
L’animation est ici un ensemble de décisions et non une bibliothèque, 0.4s de transitions, une boucle média de 13,3s et des états de survol et de clic, et rien ne s’anime au scroll. Le résultat est une page qui semble écrite, des durées courtes, une seule entrée et des changements d’état qui confirment une action au lieu de la décorer. Rien ne s’anime pour lui-même dans le design de section hero.
Comment Stories in Light ordonne la première lecture
Une page de ce type enterre d’habitude l’action sous une grille de fonctionnalités. Celle-ci place la navigation, le titre, le badge d’annonce et la ligne de statistiques dans une séquence fixe, avec l’action dans le premier écran plutôt qu’après trois écrans de défilement. Un lecteur agence reçoit l’offre avant les options.
Questions fréquentes
Puis-je reconstruire ce type de section hero de Stories in Light avec une autre stack?
La fiche indique un seul composant pour la provenance, parce que Stories in Light 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 Stories in Light?
Ce n’est pas une description d’ambiance mais un brief de construction, avec la composition en 2502x1730, les espacements et les valeurs d’animation. Aucun passage ne prend l’image rendue pour la source de vérité.
Comment gérer les médias de Stories in Light dans un projet client?
Le brief est une description, pas une autorisation de redistribuer les ressources d’un tiers. Gardez la structure et les chiffres, remplacez les médias et les marques, et citez la source si un client demande d’où vient la mise en page. La référence a été capturée en 2502x1730.
