À propos de ce modèle
La capture de Intelligent Performance a été faite en 1920x1418 et conservée comme spécification, pas comme image de galerie. « Built for Intelligent Performance » est la ligne que la mise en page doit porter. La palette est neutre #ECECEB en fond, #222222 pour le texte et rouge #FF6796 pour les accents, composée en Inter. La livraison est en un seul fichier HTML autonome, capturée en 1920x1418 pour que le cadre soit fixé avant la première ligne de code. L’animation se cantonne à 08s de transitions, cubic-bezier(.16,1.3,1) et un fond vidéo en boucle. Gardez-la ouverte pendant la rédaction, car le brief de 26 839 caractères est la partie qui se transfère à votre page.
Conçu pour
- Ce design de landing page vise les équipes qui connaissent déjà un seul fichier HTML autonome et veulent simplement retrouver un easing cubic-bezier(.16,1.3,1) par écrit.
- Des équipes Studio qui briefent un build et cherchent un seul fichier HTML autonome pour avoir une matière sur laquelle réagir.
- Toute personne qui utilise un générateur IA et veut un brief contenant déjà un breakpoint à 767px au lieu de laisser le modèle décider.
Ce qui est inclus
- Une navigation sur une seule ligne. Nom de marque, liens et action en #FF6796 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 à 767px, et l’élément actif se signale par la graisse et non par une pastille.
- Un média sans surcouche. La vidéo occupe le calque inférieur de la composition 1920x1418, la typographie est disposée au-dessus, sans rien entre les deux. Exportez en 1920x1418 ou plus large et le recadrage en cover continue de fonctionner.
- Le contenu découpé en panneaux. La grille fait l’ordre de lecture à votre place, avec des panneaux de même poids, une idée chacun, composés en Inter à petite taille pour que la structure reste visible. Les panneaux sont séparés par l’espacement et non par des bordures, ce qui garde la grille silencieuse.
- L’échelle est bornée, pas étagée. La typographie est dimensionnée avec un clamp entre 16px et 14px plutôt qu’avec des paliers fixes, la ligne display reste donc proportionnée entre les breakpoints au lieu de sauter. Le menu mobile fait partie du même brief, l’état replié est donc dessiné lui aussi.
Animation et interaction
Les durées du brief
Le budget d’animation est faible et explicite, 08s avec cubic-bezier(.16,1.3,1), appliqué aux changements d’état plutôt qu’aux entrées. L’easing est spécifié avec la durée (08s), donc une reconstruction ne peut pas substituer discrètement une autre sensation.
La surface a du grain
Une couche de grain recouvre neutre #ECECEB, donc les grandes surfaces plates se lisent comme une matière et non comme un aplat. La texture est statique, donc elle ajoute de la surface sans ajouter de mouvement.
Comment Intelligent Performance ordonne la première lecture
Une page de ce type enterre d’habitude l’action sous une grille de fonctionnalités. Celle-ci place la navigation, le titre, la ligne de statistiques, la grille de cartes et la liste de fonctionnalités dans une séquence fixe, avec l’action dans le premier écran plutôt qu’après trois écrans de défilement. Un lecteur SaaS reçoit l’offre avant les options.
Le réagencement de landing page
La mise en page étroite est conçue, pas héritée, et la hiérarchie survit à la réorganisation, l’échelle est fluide plutôt que par paliers, la mise en page bascule à 767px et la section est tenue à 100vh à chaque largeur. La réorganisation garde l’action accessible à chaque largeur.
Ce qui bouge dans Intelligent Performance
Copiez le schéma plutôt que les valeurs, gardez 08s de transitions, une boucle média de 3,5s et une apparition de ligne masquée et laissez votre marque fixer les durées. Rien ne s’anime pour lui-même dans le design de landing page.
Questions fréquentes
Faut-il un seul fichier HTML autonome pour reconstruire Intelligent Performance?
La fiche indique un seul fichier HTML autonome pour la provenance, parce que Intelligent Performance 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 prompt de Intelligent Performance 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 1920x1418, les espacements et les valeurs d’animation. Aucun passage ne prend l’image rendue pour la source de vérité.
Puis-je utiliser Intelligent Performance dans un projet client?
Le brief est une description, pas une autorisation de redistribuer les ressources d’un tiers. Gardez la structure et les chiffres, remplacez les médias et les marques, et citez la source si un client demande d’où vient la mise en page. La référence a été capturée en 1920x1418.
