À propos de ce modèle
Avant toute reconstruction de landing page pour un produit IA ou SaaS, lisez AI Runtime, qui publie ensemble la composition et la spécification. La palette se limite à neutre #28282A en fond et éclairci #C8C8C8 pour le texte, et la typographie est Inter. La référence est construite avec React, et les décisions de mise en page sont énoncées indépendamment de cette stack. Le budget d’animation est 0.85s de transitions, cubic-bezier(0.22, 1, 0.36, 1) et un fond vidéo en boucle. Gardez-la ouverte pendant la rédaction, car le brief de 9 593 caractères est la partie qui se transfère à votre page.
Conçu pour
- Équipes growth qui rhabillent un design de landing page pour un produit IA ou SaaS et veulent garder le cadre 1472x1080 pendant que le texte de l’offre change.
- Équipes d’agence qui défendent un design de landing page pour un produit IA ou SaaS et tiennent à citer des sections de 100vh et des pas d’espacement de 28px dans la présentation, pour que le devis tienne encore après la réunion de lancement.
- Ce design de landing page sert aux fondateurs qui ont besoin d’un seul écran pour prouver que le texte SaaS peut porter 6,9s de vidéo en boucle.
Ce qui est inclus
- Les liens avant l’action. Une barre fine se pose en tête de landing page, avec le nom de marque à gauche et les liens composés en Inter, 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 1472x1080 sans fond propre, la vidéo court donc bord à bord en dessous.
- Chaque mesure est écrite. La mise en page travaille sur des valeurs absolues plutôt que sur des ratios (des sections de 100vh, des pas d’espacement de 28px, des transitions de 0.85s et un easing cubic-bezier(0.22, 1, 0.36, 1)). Une reconstruction qui atteint ces chiffres ressemble à la référence sans réglage supplémentaire.
- Des colonnes, pas un dépotoir de liens. Les liens sont regroupés en colonnes avec le nom de marque dans son propre bloc, ce qui garde lisible un pied de page long au lieu de le transformer en liste. Le nom de marque occupe son propre bloc, ce qui garde lisible une longue liste de liens. Gardez l’accent pour une seule action.
- Une barre de navigation discrète. Testez la barre sur vos propres médias avant de lui donner un fond. La référence a été capturée en 1472x1080.
Animation et interaction
L’animation peut être coupée
La couche d’animation a un interrupteur. Sous prefers-reduced-motion, l’animation d’entrée et de boucle est retirée et tout le reste ne bouge pas. Avec le mouvement réduit activé, la composition garde son état final au lieu de se figer au milieu d’une transition.
La boucle fait l’ambiance
Un clip de 6,9s suffit à toute la couche d’ambiance, il joue derrière le texte, boucle sans coupure visible et ne réagit jamais au pointeur. Parce qu’il est en sourdine, la boucle peut tourner sous le texte sans concurrencer le son ni l’attention. Tournez ou exportez en 1472x1080 ou plus large.
Le réagencement de landing page
Le design de landing page est composé en 1472x1080 puis recomposé pour les largeurs étroites, l’échelle est fluide plutôt que par paliers, la section est tenue à 100vh et la navigation se replie en menu mobile, pour que la version téléphone soit une décision et non un écrasement. La mise en page étroite est une décision et non un écrasement, et la hiérarchie y survit.
Comment AI Runtime ordonne la première lecture
Un écran, une action, et la navigation, le titre, le badge d’annonce, la ligne de statistiques et la ligne de clients 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.
L’argument de landing page
La retenue coûte de la place pour la preuve dans le premier écran. Ce brief accepte ce coût et dépense le premier écran sur l’offre, en fixant des sections de 100vh et des pas d’espacement de 28px pour qu’une section de preuve s’ajoute plus bas sans reprise. Elle donne à un lecteur SaaS le chemin le plus court vers l’offre.
Questions fréquentes
Que contient réellement le brief derrière AI Runtime?
Comptez 9 593 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.
Pourquoi la fiche mentionne-t-elle React?
Non. Le brief est une spécification, pas une liste de dépendances. Il a été écrit pour React, mais la même composition se reconstruit avec ce que vous utilisez déjà. La stack est nommée pour que vous sachiez comment la référence a été produite.
Qu’est-ce qui déclenche les animations de AI Runtime?
Les entrées et les changements d’état se situent dans la plage de 0.85s en cubic-bezier(0.22, 1, 0.36, 1) complétée d’une variante de mouvement réduit dans le brief. Ils sont déclenchés par des changements d’état plutôt que par une bibliothèque de scroll, et ils ne retardent jamais la lecture du texte.
