À propos de ce modèle
Agent Wave est la référence landing page pour un produit IA ou SaaS, et le brief qui l’accompagne est une spécification de construction complète, pas un mood board. La couleur se réduit à #000000 en fond et #FFFFFF pour le texte, composée en Inter. La livraison est en un seul composant, capturée en 1478x1080 pour que le cadre soit fixé avant la première ligne de code. Le brief consacre son budget d’animation à 0.28s de transitions, cubic-bezier(0.16, 1, 0.3, 1) et un fond vidéo en boucle. Gardez-la ouverte pendant la rédaction, car le brief de 16 675 caractères est la partie qui se transfère à votre page.
Conçu pour
- Empruntez la structure de landing page telle quelle et remplacez les textes ligne par ligne en vous appuyant sur un seul composant.
- Cette composition convient aux agences qui défendent des projets SaaS et doivent citer un breakpoint à 901px dès la première réponse au client.
- Ce design de landing page sert aux designers qui doivent transmettre à un ingénieur un build en un seul composant et veulent l’animation écrite noir sur blanc.
Ce qui est inclus
- Rangée du haut, une action. La barre tient sur une rangée de texte et une action, mesurée à un corps display fixe de 19px et des sections de 100vh pour se lire comme un filet et non comme un bandeau. Les libellés tiennent sur une ligne à 901px, et l’élément actif se signale par la graisse et non par une pastille. Une seule action par barre.
- Un média sans surcouche. La vidéo en 1478x1080 tourne en boucle 6,9s derrière le texte, muette et en lecture inline, sans aucun voile entre les deux. Exportez en 1478x1080 ou plus large et le recadrage en cover continue de fonctionner.
- Un badge au-dessus de la ligne de flottaison. Un badge, un message. La pastille se place au-dessus du titre en Inter au plus petit palier, et rien d’autre ne vient concurrencer cette position. Il est positionné pour que le titre garde le centre de la composition. Retirez-le quand l’annonce a vieilli.
- En haut, marque, liens et action unique. Sous 901px, les liens se replient au lieu de passer sur une seconde ligne.
Animation et interaction
Une boucle, pas une timeline
Le clip de fond tourne 6,9s en 1478x1080 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é. Tournez ou exportez en 1478x1080 ou plus large.
Il respecte reduced-motion
Le mouvement réduit est spécifié plutôt qu’ajouté après coup, activé, l’animation d’entrée et de boucle s’arrête et la composition garde son état final. Le retour d’information des interactions fonctionne encore en mouvement réduit, seules les entrées sont retirées.
Lire Agent Wave comme une spécification
La page contient plus de chiffres qu’elle n’en a l’air, et une reconstruction doit garder un corps display fixe de 19px, des sections de 100vh, des angles de 7px, des pas d’espacement de 22px et des transitions de 0.28s en priorité, le reste peut bouger. Rien dans le design de landing page ne dépend d’une valeur par défaut.
Ce qui tient la route pour IA et SaaS
Une couche teintée sur le média aurait été la solution facile. Le brief s’en passe. Le média est une boucle de 6,9s en 1478x1080. Le texte tient quand même, parce que le cadre reste calme grâce à un corps display fixe de 19px et des sections de 100vh. Agent Wave énonce la promesse une fois et laisse la composition la répéter au lieu d’ajouter une seconde affirmation.
Le réagencement de landing page
Le coût d’une échelle fluide est un contrôle moindre des tailles exactes. En échange, la ligne d’affichage reste proportionnée, et c’est pourquoi un clamp entre 24px et 22px figure dans le brief. L’ordre est la dernière chose à changer.
Questions fréquentes
Faut-il un seul composant pour reconstruire Agent Wave?
La fiche indique un seul composant pour la provenance, parce que Agent Wave 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 Agent Wave?
Ce n’est pas une description d’ambiance mais un brief de construction, avec la composition en 1478x1080, les espacements et les valeurs d’animation. Aucun passage ne prend l’image rendue pour la source de vérité.
Puis-je publier une page reconstruite d’après Agent Wave sans mentionner la source?
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 1478x1080.
