À propos de ce modèle
La capture de Planetary Pulse a été faite en 1826x1080 et conservée comme spécification, pas comme image de galerie. La palette repose sur gris #C2CCD3 en fond, et la page est composée en Helvetica, Arial. La fiche nomme la stack qui a produit la page (Tailwind et JavaScript vanilla) au lieu de la passer sous silence. Le budget d’animation est 300ms de transitions, cubic-bezier(0.16, 1, 0.3, 1) et un fond vidéo en boucle. Elle est surtout utile quand le texte de section hero Éducation et communauté change sans qu’une refonte soit nécessaire.
Conçu pour
- Des développeurs front-end qui reconstruisent cette page en Tailwind et JavaScript vanilla et veulent les transitions spécifiées plutôt que devinées.
- Les chefs de produit qui doivent chiffrer la reconstruction liront un breakpoint à 280px comme le périmètre du travail.
- Écrivez votre propre titre, puis reconstruisez ce design de section hero en Tailwind et JavaScript vanilla avec les mesures intactes.
Ce qui est inclus
- Une barre de navigation discrète. La navigation tient sur une seule rangée, sans second niveau en dessous. Sous 280px, les liens se replient dans une surcouche plein écran. Les libellés tiennent sur une ligne à 280px, et l’élément actif se signale par la graisse et non par une pastille.
- Un média sans surcouche. Le premier écran est un seul clip en 1826x1080, et tout le reste s’organise par-dessus. Une image d’attente en 1826x1080 tient la composition quand la lecture automatique est indisponible, la mise en page ne s’effondre donc jamais.
- L’échelle est le style. Les paliers de taille et l’interlettrage du brief donnent le ton ici, avec Helvetica, Arial à un corps display serré, puis une chute nette vers le texte secondaire. Le texte d’interface reste sur une seule fonte, la page ne mélange donc jamais deux voix au même corps.
- Une navigation sur une seule ligne. Sous 280px, les liens se replient au lieu de passer sur une seconde ligne.
Animation et interaction
Une ambiance sans bibliothèque de scroll
Le clip de fond tourne 5,9s en 1826x1080 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. 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.
Une durée pour les contrôles
Survol, appui et focus se règlent tous en 300ms, et c’est ce qui rend l’interface immédiate. Chaque changement d’état nomme une valeur, donc le réglage par défaut du navigateur n’est jamais utilisé. Si vous changez l’easing, changez-le partout.
Comment Planetary Pulse ordonne la première lecture
Ici, l’ordre est le design, car la séquence de la navigation, la ligne de statistiques, la grille de cartes, la liste de fonctionnalités et le clip de fond met l’offre avant la preuve, et l’écart entre eux tient à des sections de 100vh et des angles de 9999px. Un lecteur éducation reçoit l’offre avant les options.
Les timings derrière section hero
Un budget d’animation court coûte du spectaculaire sur la première image. Il achète de la lisibilité et permet de porter 300ms de transitions, une boucle média de 5,9s et une apparition de ligne masquée sans bibliothèque. Rien ne s’anime pour lui-même dans le design de section hero.
Le réagencement de section hero
En large, la composition est dense, en étroit, la mise en page bascule à 280px, la section est tenue à 100vh et la navigation se replie en menu mobile. Les deux états sont décrits dans le brief. L’échelle change avec le viewport, la séquence non.
Questions fréquentes
Pourquoi la fiche mentionne-t-elle Tailwind et JavaScript vanilla?
La référence se trouve avoir été construite en Tailwind et JavaScript vanilla, 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à.
Pourquoi le prompt de Planetary Pulse n’est-il pas reproduit ici?
Tout ce qui est cité sur la page provient du brief capturé de 26 446 caractères, et non d’un texte rédigé après coup. C’est pourquoi les chiffres et la prose concordent.
Que contient réellement le brief derrière Planetary Pulse?
Ce n’est pas une description d’ambiance mais un brief de construction, avec la composition en 1826x1080, les espacements et les valeurs d’animation. Aucun passage ne prend l’image rendue pour la source de vérité.
