À propos de ce modèle
Cette fiche présente TrueEarth en landing page, avec le brief qui a produit la page au lieu d’une simple capture d’écran. La palette se limite à #FFFFFF en fond, #111417 pour le texte et bleu profond #0B2A3A pour les accents, et la typographie est Plus Jakarta Sans. La livraison est en un seul fichier HTML autonome, capturée en 1920x1422 pour que le cadre soit fixé avant la première ligne de code. L’animation se cantonne à 72ms de transitions, cubic-bezier(.16,1.3,1) et un fond vidéo en boucle. Elle est surtout utile quand le texte de landing page Éducation et communauté change sans qu’une refonte soit nécessaire.
Conçu pour
- Empruntez la structure de landing page telle quelle et remplacez les textes ligne par ligne en vous appuyant sur un easing cubic-bezier(.16,1.3,1).
- Équipes qui montent un design de landing page pour une marque éducative ou communautaire et doivent consigner un seul fichier HTML autonome par écrit avant de chiffrer.
- Toute personne qui utilise un générateur IA et veut un brief contenant déjà un breakpoint à 360px au lieu de laisser le modèle décider.
Ce qui est inclus
- En haut, marque, liens et action unique. La barre porte le nom de marque, les liens de la section et un bouton en #0B2A3A, mesurée à une typographie de 12px à 16px et des sections de 100vh pour ne jamais devenir un second header. Sous 360px, les liens se replient au lieu de passer sur une seconde ligne.
- Un seul clip fait le travail. Un clip de 6,9s en 1920x1422 fait le travail atmosphérique, le brief fixe son cadrage et laisse la typographie intacte par-dessus. La boucle est assez courte (6,9s) pour que l’œil la lise comme une texture et non comme une timeline.
- La liste de fonctionnalités composée en texte. Les fonctionnalités sont composées en liste en Plus Jakarta Sans plutôt qu’en mur de cartes. La liste est alignée à gauche sur la même marge que le titre.
- La barre partage la grille. Tenez la rangée sur une seule ligne. La référence a été capturée en 1920x1422.
Animation et interaction
L’interaction reste locale
La couche interactive est volontairement réduite, des états de survol sur les boutons et les liens plutôt que sur chaque carte. Un contrôle qui a l’air interactif se comporte comme tel, donc aucune affordance trompeuse. Quelques états fiables valent mieux qu’une longue liste d’effets.
Une boucle, pas une timeline
Le clip de fond tourne 6,9s en 1920x1422 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. Une image poster prend le relais quand la lecture automatique est bloquée, donc le mouvement est un plus et non une nécessité.
Les chiffres derrière landing page
La typographie est le premier chiffre, une typographie de 12px à 16px et des sections de 100vh. Les espacements en découlent, et tout le reste de la page se positionne par rapport à ces deux valeurs. Rien dans le design de landing page ne dépend d’une valeur par défaut.
Les timings derrière landing page
Une animation ambitieuse coûte d’habitude la lisibilité du premier écran. Ce brief maintient 72ms de transitions, une boucle média de 6,9s et une apparition de ligne masquée en deçà du seuil où la typographie devrait attendre. Rien ne s’anime pour lui-même dans le design de landing page.
L’ordre de landing page
Si votre page ouvre aujourd’hui sur les fonctionnalités, voici l’ordre à copier, la navigation, le titre, le badge d’annonce, la ligne de statistiques et la grille de cartes devant, le détail d’appui ensuite, et une typographie de 12px à 16px et des sections de 100vh pour régler la distance. Un lecteur éducation reçoit l’offre avant les options.
Questions fréquentes
Que contient réellement le brief derrière TrueEarth?
Comptez 23 498 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.
Faut-il un seul fichier HTML autonome pour reconstruire TrueEarth?
La fiche indique un seul fichier HTML autonome pour la provenance, parce que TrueEarth 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.
Le brief de TrueEarth est-il identique au prompt que j’écrirais moi-même?
Tout ce qui est cité sur la page provient du brief capturé de 23 498 caractères, et non d’un texte rédigé après coup. C’est pourquoi les chiffres et la prose concordent.
