À propos de ce modèle
Agent Grove est un design de landing page pour un produit IA ou SaaS, livré avec les instructions qui l’ont produit. La palette repose sur noir #2B2B2B en fond, et la page est composée en Geist. La livraison est en React et Tailwind CSS, capturée en 1484x1080 pour que le cadre soit fixé avant la première ligne de code. L’animation se limite à 300ms de transitions, cubic-bezier(0.16,1,0.3,1) et un fond vidéo en boucle, assez discrète pour que le texte reste au premier plan. Elle est surtout utile quand le texte de landing page IA et SaaS change sans qu’une refonte soit nécessaire.
Conçu pour
- Des responsables marketing produit qui ont besoin qu’une landing page reste lisible avec 5,4s de vidéo en boucle derrière le texte.
- Cette base est calibrée pour un fondateur seul qui livre un design de landing page pour un produit IA ou SaaS, sans design system derrière.
- Quiconque briefe un modèle sur un design de landing page utilisera le prompt de 7 959 caractères comme point de départ.
Ce qui est inclus
- Rangée du haut, une action. Une barre fine se pose en tête de landing page, avec le nom de marque à gauche et les liens composés en Geist, si bien que la composition se lit d’abord comme du contenu, la barre ensuite. Une surcouche mobile prend le relais sous le breakpoint tablette. La barre se pose sur la composition 1484x1080 sans fond propre, la vidéo court donc bord à bord en dessous.
- Chaque mesure est écrite. La mise en page est résolue sur des valeurs fixes (des pas d’espacement de 24px, des transitions de 300ms et un easing cubic-bezier(0.16,1,0.3,1)), ce qui garde le premier écran composé à n’importe quelle largeur. Le brief énonce des valeurs et non des proportions, la composition garde donc ses relations quand le texte change de longueur.
- Une navigation sans fond. Les états de focus et de survol sont spécifiés pour chaque lien au lieu d’être hérités du navigateur. La barre compte une poignée d’éléments, elle se reconstruit donc sans bibliothèque de composants.
- Le brief nomme les pas. Les espacements sont cités de la même façon (des pas d’espacement de 24px, des transitions de 300ms et un easing cubic-bezier(0.16,1,0.3,1)), et non comme une échelle qui grandit toute seule.
Animation et interaction
Le timing reste dans le brief
Une seule durée couvre les interactions (300ms avec cubic-bezier(0.16,1,0.3,1)), et c’est ce qui fait que survol et pression se lisent comme un seul système. La durée citée couvre les changements d’état, donc le retour est la part spécifiée de l’animation. Appliquez la durée exacte au retour.
Une ambiance sans bibliothèque de scroll
Le mouvement d’ambiance est un clip de 5,4s en 1484x1080, qui boucle discrètement derrière le texte au lieu de réagir au pointeur. 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 1484x1080 ou plus large.
L’ordre de landing page
L’attention est dirigée plutôt que laissée au hasard. La séquence suit la navigation, le titre, le badge d’annonce, la ligne de statistiques et la grille de cartes, et chaque étape est calibrée sur des pas d’espacement de 24px et des transitions de 300ms pour que rien n’arrive dans le désordre. Un lecteur SaaS reçoit l’offre avant les options.
Lire Agent Grove comme une spécification
Chaque relation de cette page est une valeur vérifiable, des pas d’espacement de 24px, des transitions de 300ms et un easing cubic-bezier(0.16,1,0.3,1). C’est ce qui rend Agent Grove reconstructible et pas seulement reproductible. Rien dans le design de landing page ne dépend d’une valeur par défaut.
Ce qui bouge dans Agent Grove
Chaque transition porte ici un chiffre. C’est pourquoi le portage de 300ms de transitions, une boucle média de 5,4s et des états de survol et de clic se fait valeur par valeur au lieu d’un réglage au ressenti. Rien ne s’anime pour lui-même dans le design de landing page.
Questions fréquentes
Que recevez-vous en copiant le brief de Agent Grove?
Comptez 7 959 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.
Puis-je reconstruire ce type de landing page de Agent Grove avec une autre stack?
La fiche indique React et Tailwind CSS pour la provenance, parce que Agent Grove 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.
Comment gérer les médias de Agent Grove 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 1484x1080.
