À propos de ce modèle
Stellar AI est une référence de travail pour un produit IA ou SaaS, un exemple de section hero entièrement mesuré et prêt à reproduire. Le titre affiché est « Intelligent automation syncs with the tools you love to streamline tasks, boost output, and save time », et le reste de section hero s’organise autour de lui. La palette est blanc #FFFFFF en fond et bleu profond #101117 pour le texte, composée en Inter. La livraison est en React et Tailwind CSS, capturée en 800x708 pour que le cadre soit fixé avant la première ligne de code. Le budget d’animation est 0.1s de transitions. Gardez-la ouverte pendant la rédaction, car le brief de 3 973 caractères est la partie qui se transfère à votre page.
Conçu pour
- Équipes d’agence qui défendent un design de section hero pour un produit IA ou SaaS et tiennent à citer un corps display fixe de 80px et des pas d’espacement de 30px dans la présentation, pour que le devis tienne encore après la réunion de lancement.
- Ce design est pensé pour les responsables de contenu qui réécrivent un design de section hero dont le titre doit rester aussi long que celui de Stellar AI.
- La composition sert aux équipes de contenu qui vont remplacer le titre et ont besoin des graisses de Inter pour garder le même rythme.
Ce qui est inclus
- Une ligne, aucun tiroir. Une barre fine se pose en tête de section hero, 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. La barre se pose sur la composition 800x708 sans fond propre, la vidéo court donc bord à bord en dessous.
- Mesuré, pas estimé à l’œil. Rien ici n’est estimé à l’œil. La spécification fixe un corps display fixe de 80px, des pas d’espacement de 30px et des transitions de 0.1s, et le reste de la mise en page découle de ces valeurs. Le brief énonce des valeurs et non des proportions, la composition garde donc ses relations quand le texte change de longueur.
- La barre partage la grille. Une courte suite de liens et une seule action se posent au-dessus de section hero, tenues à un corps display fixe de 80px et des pas d’espacement de 30px pour ne jamais concurrencer la composition en dessous.
- Des valeurs vérifiables. Les espacements sont cités de la même façon (un corps display fixe de 80px, des pas d’espacement de 30px et des transitions de 0.1s), et non comme une échelle qui grandit toute seule.
Animation et interaction
Tout le budget d’animation
Ici, l’animation se mesure en millisecondes, 0.1s. C’est tout le budget d’animation, et il est dépensé sur des changements d’état plutôt que sur une timeline de scroll. L’easing est spécifié avec la durée (0.1s), donc une reconstruction ne peut pas substituer discrètement une autre sensation.
L’interaction est sur les contrôles
Chaque élément interactif ne fait qu’une chose (des états de survol sur les boutons et les liens plutôt que sur chaque carte et des onglets ou un accordéon qui échangent le contenu sur place), et c’est ce qui rend les états prévisibles. Les états de pression sont spécifiés comme le survol, donc un appui donne la même confirmation qu’un clic. Vérifiez les états sur un appareil tactile.
L’ordre de section hero
Là où une page marketing empile les preuves sous la ligne de flottaison en espérant, le design de section hero met la navigation, le badge d’annonce, la ligne de statistiques, la ligne de clients et la grille de cartes devant le lecteur et retient le reste. Un lecteur SaaS reçoit l’offre avant les options.
Le gain pour un produit IA ou SaaS
La promesse est faite une fois, à la taille d’affichage. La page le dit sans détour, « Intelligent automation syncs with the tools you love to streamline tasks, boost output, and save time ». Tout le reste de section hero s’ordonne autour d’elle, la navigation, le badge d’annonce, la ligne de statistiques, la ligne de clients et la grille de cartes, et aucune seconde promesse ne vient disputer la première lecture. Stellar AI énonce la promesse une fois et laisse la composition la répéter au lieu d’ajouter une seconde affirmation.
Lire Stellar AI comme une spécification
On ne règle pas une composition à l’œil quand deux personnes la reconstruisent. Le brief tranche en énonçant un corps display fixe de 80px, des pas d’espacement de 30px et des transitions de 0.1s une seule fois. Rien dans le design de section hero ne dépend d’une valeur par défaut.
Questions fréquentes
Que contient réellement le brief derrière Stellar AI?
Ce n’est pas une description d’ambiance mais un brief de construction, avec la composition en 800x708, les espacements et les valeurs d’animation. Aucun passage ne prend l’image rendue pour la source de vérité.
Quelle part de Stellar AI dépend de React et Tailwind CSS?
La fiche indique React et Tailwind CSS pour la provenance, parce que Stellar AI 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.
Puis-je utiliser Stellar AI 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 800x708.
