À propos de ce modèle
Forecast Center est un exemple de landing page SaaS, construit à partir d’un seul brief écrit, et cette page documente ce brief. La palette se limite à bleu profond #04121B en fond et #FFFFFF pour le texte, et la typographie est Inter. La livraison est en un seul fichier HTML autonome, capturée en 1466x1080 pour que le cadre soit fixé avant la première ligne de code. La page s’en tient à 2.55s de transitions, cubic-bezier(.16,1.3,1) et un fond vidéo en boucle. Traitez-la comme le brief de landing page pour un produit IA ou SaaS, à faire tenir sous une reconstruction et pas seulement au premier regard.
Conçu pour
- Des équipes Studio qui briefent un build et cherchent un easing cubic-bezier(.16,1.3,1) pour avoir une matière sur laquelle réagir.
- Si vous briefez un modèle plutôt qu’un designer, partez de la structure de landing page et laissez le prompt porter un seul fichier HTML autonome.
- Si la reconstruction part de un seul fichier HTML autonome, relevez d’abord des sections de 100vh et des pas d’espacement de 14px et laissez la palette tranquille jusqu’à ce que la grille tienne.
Ce qui est inclus
- Une ligne, aucun tiroir. Une courte suite de liens et une seule action se posent au-dessus de landing page, tenues à des sections de 100vh et des pas d’espacement de 14px pour ne jamais concurrencer la composition en dessous. La barre se pose sur la composition 1466x1080 sans fond propre, la vidéo court donc bord à bord en dessous.
- Les cartes font la structure. La grille fait la structure, des panneaux de même taille, composés en Inter, disposés pour que l’œil aille vers la droite plutôt que vers le bas. L’ordre des panneaux est l’ordre de lecture, rien ne dépend donc d’indices de position.
- Des chiffres traités comme de la typographie. Une bande de chiffres compacte porte les affirmations qui exigeraient sinon un paragraphe, ce qui évite de transformer landing page en liste de fonctionnalités. Les chiffres sont composés à une seule graisse, la rangée ne classe donc pas ses propres statistiques.
- La barre partage la grille. Tenez la rangée sur une seule ligne. La référence a été capturée en 1466x1080.
Animation et interaction
Une ambiance sans bibliothèque de scroll
Le clip de fond tourne 5,3s en 1466x1080 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. Rien d’autre sur la page n’anime en continu, donc le média est le seul élément qui demande l’attention. Tournez ou exportez en 1466x1080 ou plus large.
L’animation peut être coupée
La couche d’animation est livrée avec un interrupteur, l’animation d’entrée et de boucle est retirée sous prefers-reduced-motion. La mise en page est identique animation désactivée, donc rien ne dépend de l’animation. La mise en page doit survivre sans l’animation.
L’ordre de landing page
Un écran, une action, et la navigation, le titre, le badge d’annonce, la ligne de statistiques et la grille de cartes entre les deux. Le brief fixe cet ordre au lieu de confier le premier écran à une pile de sections. Un lecteur SaaS reçoit l’offre avant les options.
Le réagencement de landing page
Quand le texte est long, c’est la mise en page étroite qui casse en premier. Ici, un clamp entre 22px et 14px absorbe le changement, et la section est tenue à 100vh et l’animation prévoit une variante de mouvement réduit. La largeur change les mesures, pas le parcours de lecture.
Les chiffres derrière landing page
Une capture d’écran dit à quoi ressemble la page, le brief dit pourquoi, et l’écart entre les deux se comble avec des sections de 100vh, des pas d’espacement de 14px, des transitions de 2.55s et un easing cubic-bezier(.16,1.3,1). Rien dans le design de landing page ne dépend d’une valeur par défaut.
Questions fréquentes
Puis-je reconstruire ce type de landing page de Forecast Center avec une autre stack?
La fiche indique un seul fichier HTML autonome pour la provenance, parce que Forecast Center 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.
Pourquoi le prompt de Forecast Center n’est-il pas reproduit ici?
Tout ce qui est cité sur la page provient du brief capturé de 11 253 caractères, et non d’un texte rédigé après coup. C’est pourquoi les chiffres et la prose concordent.
Que recevez-vous en copiant le brief de Forecast Center?
Ce n’est pas une description d’ambiance mais un brief de construction, avec la composition en 1466x1080, les espacements et les valeurs d’animation. Aucun passage ne prend l’image rendue pour la source de vérité.
