À propos de ce modèle
Lisez Intelligence Layer comme une spécification de landing page, dont les valeurs ont été écrites avant la construction de la page. La palette se limite à quasi-noir #050505 en fond et #FAFAFA pour le texte, et la typographie est Manrope. La livraison est en un seul fichier HTML autonome, capturée en 1462x1080 pour que le cadre soit fixé avant la première ligne de code. Le budget d’animation est 0.9s de transitions, cubic-bezier(.22, 1.36, 1) et un fond vidéo en boucle. Gardez-la ouverte pendant la rédaction, car le brief de 11 825 caractères est la partie qui se transfère à votre page.
Conçu pour
- Prestataires qui récupèrent un design de landing page et veulent voir un easing cubic-bezier(.22, 1.36, 1) dans le dépôt avant le premier commit.
- Si la référence n’est qu’un point de départ, les designers peuvent garder un seul fichier HTML autonome et reconstruire le reste du design de landing page.
- Équipes qui reprennent un design de landing page SaaS repéré chez un concurrent et veulent un seul fichier HTML autonome dans le brief avant que quiconque choisisse un framework.
Ce qui est inclus
- Une ligne, aucun tiroir. Le nom de marque tient le bord gauche et les liens courent à sa droite, le tout composé en Manrope pour que la barre appartienne à la page en dessous plutôt qu’à un système séparé. La barre se pose sur la composition 1462x1080 sans fond propre, la vidéo court donc bord à bord en dessous.
- Les tailles sont dans le brief, pas dans une échelle. Rien dans la mise en page n’est laissé à l’impression, le brief cite des sections de 100vh, des pas d’espacement de 25px, des transitions de 0.9s et un easing cubic-bezier(.22, 1.36, 1) et le build doit atteindre ces valeurs. Les valeurs sont citées depuis le prompt capturé plutôt que déduites, elles survivent donc à un nouveau rendu.
- En haut, marque, liens et action unique. Limitez-vous à quatre ou cinq liens, la rangée est dimensionnée pour ce nombre. La référence a été capturée en 1462x1080.
- Une seule échelle, texte et cadre. Les espacements sont cités de la même façon (des sections de 100vh, des pas d’espacement de 25px, des transitions de 0.9s et un easing cubic-bezier(.22, 1.36, 1)), et non comme une échelle qui grandit toute seule.
Animation et interaction
Le canvas porte le premier écran
Le rendu à l’exécution est ici la décision de design (un canvas WebGL), et la mise en page est construite pour lui laisser la place. Le brief ne prévoit aucun échange d’image, donc la scène fait partie du premier rendu. Gardez l’interface plate autour.
Tout le budget d’animation
Chaque changement d’état de la spécification porte une durée, les transitions se règlent autour de 0.9s en cubic-bezier(.22, 1.36, 1). Rien n’est laissé au réglage par défaut du navigateur, et c’est pourquoi la page semble conçue plutôt qu’animée. L’easing est spécifié avec la durée (0.9s), donc une reconstruction ne peut pas substituer discrètement une autre sensation.
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 34px et 25px absorbe le changement, et l’échelle est fluide plutôt que par paliers, la section est tenue à 100vh et l’animation prévoit une variante de mouvement réduit. La version mobile est une décision, pas un repli.
Les chiffres derrière landing page
Quand une reconstruction dérive, les espacements lâchent en premier. Intelligence Layer l’évite en publiant des sections de 100vh, des pas d’espacement de 25px, des transitions de 0.9s et un easing cubic-bezier(.22, 1.36, 1) avec la composition. Rien dans le design de landing page ne dépend d’une valeur par défaut.
Par où commencer dans Intelligence Layer
Composez le nouveau texte au corps d’affichage nommé dans le brief (des sections de 100vh et des pas d’espacement de 25px), et le reste de l’échelle suit sans refonte. Le sujet est la partie qui doit changer.
Questions fréquentes
Quelle part de Intelligence Layer dépend de un seul fichier HTML autonome?
La fiche indique un seul fichier HTML autonome pour la provenance, parce que Intelligence Layer 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 recevez-vous en copiant le brief de Intelligence Layer?
Comptez 11 825 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.
Comment se comportent les transitions de 0.9s dans Intelligence Layer?
L’animation est décrite avec le même niveau de détail que la mise en page, et les changements d’état se stabilisent dans la plage 0.9s en cubic-bezier(.22, 1.36, 1). Portez la composition d’abord et les durées ensuite, car il est plus facile de les caler une fois la mise en page en place.
