À propos de ce modèle
Space planet est la référence section hero pour une marque éducative ou communautaire, et le brief qui l’accompagne est une spécification de construction complète, pas un mood board. La palette repose sur variante #071227 en fond, #FFFFFF pour le texte et éclairci #5FD0E1 pour les accents, et la page est composée en Poppins. La livraison est en un seul fichier HTML autonome, capturée en 1920x1420 pour que le cadre soit fixé avant la première ligne de code. L’animation se limite à 6s de transitions, cubic-bezier(.22,1.36,1) et un fond vidéo en boucle, assez discrète pour que le texte reste au premier plan. Si vous préparez un brief pour section hero éducation, partez de cette composition et remplacez le sujet.
Conçu pour
- Ce design de section hero vise les équipes qui connaissent déjà un seul fichier HTML autonome et veulent simplement retrouver un easing cubic-bezier(.22,1.36,1) par écrit.
- Si la reconstruction part de un seul fichier HTML autonome, relevez d’abord des sections de 100vh et des pas d’espacement de 72px et laissez la palette tranquille jusqu’à ce que la grille tienne.
- La page sert aux développeurs front-end qui reconstruisent un design de section hero pour une marque éducative ou communautaire en un seul fichier HTML autonome et cherchent les chiffres derrière le rendu.
Ce qui est inclus
- Une navigation sans fond. Nom de marque, liens et action en #5FD0E1 partagent une même ligne de base, c’est ce qui évite qu’une rangée fine paraisse accidentelle. Les libellés tiennent sur une ligne à 500px, et l’élément actif se signale par la graisse et non par une pastille. Ne donnez pas au nom de marque plus de place que sa typographie n’en demande.
- Le média derrière la typographie. Un clip de 6,9s en 1920x1420 fait le travail atmosphérique, le brief fixe son cadrage et laisse la typographie intacte par-dessus. Une image d’attente en 1920x1420 tient la composition quand la lecture automatique est indisponible, la mise en page ne s’effondre donc jamais. Exportez en 1920x1420 ou plus large pour garder un cadrage honnête.
- L’échelle chute nettement. Les paliers de taille et l’interlettrage du brief donnent le ton ici, avec Poppins à un corps display serré, puis une chute nette vers le texte secondaire. La fonte display n’est employée qu’à une seule taille, elle n’entre donc jamais en concurrence avec elle-même.
- Repli des liens à une largeur. Sous 500px, les liens se replient au lieu de passer sur une seconde ligne.
Animation et interaction
La boucle fait l’ambiance
Le mouvement d’ambiance vient de la boucle de 6,9s en 1920x1420 et non d’effets de scroll, ce qui garde la page calme et le texte lisible. La boucle est rognée en cover, ce qui veut dire que la composition ne dépend pas d’un format d’image précis.
Le timing reste dans le brief
Le brief fixe la transition à 6s, donc une reconstruction ne peut pas lui substituer un défaut plus lent. L’easing est spécifié avec la durée (6s), donc une reconstruction ne peut pas substituer discrètement une autre sensation. Des changements d’état rapides, aucune timeline de scroll.
Ce qui tient la route pour Éducation et communauté
Comparé à un hero de template, la différence tient à ce qui manque. Pas de grille de cartes, pas de carrousel, pas de second appel à l’action, seulement la navigation, le titre, le badge d’annonce, la ligne de statistiques et la liste de fonctionnalités, avec des sections de 100vh et des pas d’espacement de 72px comme référence de taille. Elle donne à un lecteur éducation le chemin le plus court vers l’offre.
Comment Space planet ordonne la première lecture
À lire dans l’ordre, la navigation, le titre, le badge d’annonce, la ligne de statistiques et la liste de fonctionnalités. Chaque élément a un seul rôle, et l’accent éclairci #5FD0E1 est dépensé uniquement sur l’élément que vous devez presser. Un lecteur éducation reçoit l’offre avant les options.
Les chiffres derrière section hero
Ici, le design de section hero est mesuré plutôt qu’estimé à l’œil, car les valeurs de des sections de 100vh et des pas d’espacement de 72px viennent du brief et la mise en page s’aligne sur ces pas au lieu d’être ajustée au jugé. Rien dans le design de section hero ne dépend d’une valeur par défaut.
Questions fréquentes
Puis-je reconstruire ce type de section hero de Space planet avec une autre stack?
La fiche indique un seul fichier HTML autonome pour la provenance, parce que Space planet 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.
Que faire du brief de Space planet une fois qu’on l’a en main?
Tout ce qui est cité sur la page provient du brief capturé de 29 105 caractères, et non d’un texte rédigé après coup. C’est pourquoi les chiffres et la prose concordent.
Le prompt de Space planet est-il une spécification aboutie ou un simple point de départ?
Ce n’est pas une description d’ambiance mais un brief de construction, avec la composition en 1920x1420, les espacements et les valeurs d’animation. Aucun passage ne prend l’image rendue pour la source de vérité.
