À propos de ce modèle
Brightly est un exemple de section hero agence, construit à partir d’un seul brief écrit, et cette page documente ce brief. Le titre affiché est « Manage projects effortlessly with smart tools, stay on track, meet deadlines, and keep your team productive », et le reste de section hero s’organise autour de lui. Toute la page repose sur noir #050505 en fond et orange vif #F97316 pour les accents. La livraison est en React et Tailwind CSS, capturée en 2046x1400 pour que le cadre soit fixé avant la première ligne de code. L’animation se limite à 3.5s de transitions et un fond vidéo en boucle. Cette référence s’adresse à une agence ou un studio qui veut un premier écran réglé avant le début du build.
Conçu pour
- Ce design de section hero sert aux fondateurs qui ont besoin d’un seul écran pour prouver que le texte agence peut porter 13,7s de vidéo en boucle.
- Cette base est calibrée pour un fondateur seul qui livre un design de section hero pour une agence ou un studio, sans design system derrière.
- Quiconque briefe un modèle sur un design de section hero utilisera le prompt de 2 298 caractères comme point de départ.
Ce qui est inclus
- La barre partage la grille. Les liens tiennent sur une ligne à un seul corps, et l’action en #F97316 ferme la rangée à droite, l’œil finit donc là où la navigation s’arrête. Les liens sont d’un corps inférieur à celui du nom de marque, et l’action en #F97316 est le seul élément de la barre à porter du gras.
- Les pas d’espacement sont cités. Les valeurs sont la spécification, des pas d’espacement de 24px et des transitions de 3.5s, relevées sur 2046x1400 et non déduites d’une capture d’écran. Chaque valeur correspond à un seul rôle, un palier de taille, un espacement, un rayon ou une transition.
- Une barre de navigation discrète. La barre se pose sur la composition 2046x1400 sans fond propre, la vidéo court donc bord à bord en dessous.
- Les chiffres portés jusqu’au build. Les espacements sont cités de la même façon (des pas d’espacement de 24px et des transitions de 3.5s), et non comme une échelle qui grandit toute seule.
Animation et interaction
Une boucle, pas une timeline
Le mouvement d’ambiance vient de la boucle de 13,7s en 2046x1400 et non d’effets de scroll, ce qui garde la page calme et le texte lisible. Parce qu’il est en sourdine, la boucle peut tourner sous le texte sans concurrencer le son ni l’attention.
Rythme court, timings cohérents
Les transitions sont fixées à 3.5s, et c’est la durée à laquelle les contrôles sont tenus. L’easing est spécifié avec la durée (3.5s), donc une reconstruction ne peut pas substituer discrètement une autre sensation.
Le réagencement de section hero
Testez ce design de section hero en 2046x1400 puis en largeur téléphone, le même ordre tient, avec la navigation se replie en menu mobile. Un simple écrasement aurait coûté moins cher et n’aurait pas tenu.
Ce qui bouge dans Brightly
Là où un template anime chaque section à l’entrée, ce design anime 3.5s de transitions, une boucle média de 13,7s et un titre mot par mot puis se tient tranquille. Rien ne s’anime pour lui-même dans le design de section hero.
Pourquoi le brief agence tient
La plupart des pages agence ajoutent une section de plus quand le premier écran est faible. Celle-ci fait l’inverse et retire des options, la navigation, la ligne de statistiques et le clip de fond dans cet ordre, sans rien qui répète l’offre. Brightly é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 Brightly?
Ce n’est pas une description d’ambiance mais un brief de construction, avec la composition en 2046x1400, 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 React et Tailwind CSS?
La fiche indique React et Tailwind CSS pour la provenance, parce que Brightly 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.
Comment gérer les médias de Brightly 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 2046x1400.
