À propos de ce modèle
Power AI est un design de section hero pour un produit IA ou SaaS, livré avec les instructions qui l’ont produit. Le titre affiché est « The most powerful AI ever deployed in talent acquisition », et le reste de section hero s’organise autour de lui. La palette se limite à noir #000000 en fond, jaune #FCD34D pour le texte et indigo #A855F7 pour les accents, et la typographie est Geist. La livraison est en un seul composant, capturée en 800x604 pour que le cadre soit fixé avant la première ligne de code. L’animation se limite à 100ms de transitions, assez discrète pour que le texte reste au premier plan. Gardez-la ouverte pendant la rédaction, car le brief de 3 838 caractères est la partie qui se transfère à votre page.
Conçu pour
- Si la référence n’est qu’un point de départ, les designers peuvent garder un seul composant et reconstruire le reste du design de section hero.
- Ce design de section hero sert aux designers qui doivent transmettre à un ingénieur un build en un seul composant et veulent l’animation écrite noir sur blanc.
- Écrivez votre propre titre, puis reconstruisez ce design de section hero en un seul composant avec les mesures intactes.
Ce qui est inclus
- Repli des liens à une largeur. La rangée concentre son contraste sur un seul élément, l’action en #A855F7, tandis que le nom de marque et les liens restent sur la couleur d’encre. Les liens sont d’un corps inférieur à celui du nom de marque, et l’action en #A855F7 est le seul élément de la barre à porter du gras.
- Chaque mesure est écrite. Les valeurs sont la spécification, un corps display fixe de 220px, des pas d’espacement de 82px et des transitions de 100ms, relevées sur 800x604 et non déduites d’une capture d’écran. Les proportions du cadre sont notées avec les tailles, une reconstruction obtient donc aussi le bon ratio.
- La preuve sociale sur le bord bas. Les logos reposent sur la ligne de base en une seule rangée en Geist, sans libellé, ce qui laisse l’affirmation implicite et la composition intacte. La rangée est alignée sur la même ligne de base que le reste de la composition. Laissez la rangée sans libellé.
- Une barre sans superflu. La barre se pose sur la composition 800x604 sans fond propre, la vidéo court donc bord à bord en dessous.
Animation et interaction
Un mouvement horizontal continu
La bande horizontale est l’élément le plus fort après le titre, un mouvement continu, #A855F7 sur l’élément actif, et elle ne demande jamais au lecteur d’interagir. L’élément actif est signalé par #A855F7 et non par un changement de taille.
Assez rapide pour être voulu
Les timings sont courts et constants (100ms), donc les états de survol et d’appui se lisent comme un seul système et non comme une série d’effets séparés. Les valeurs sont assez courtes pour se lire comme un retour d’information et non comme une animation.
Pourquoi cette composition fonctionne pour SaaS
La plupart des pages SaaS échouent par accumulation, plus de sections, plus de dégradés, plus de promesses. Power AI fait l’inverse. La page le dit sans détour, « The most powerful AI ever deployed in talent acquisition ». La composition reste sur noir #000000 avec indigo #A855F7 pour les actions, ce qui suffit à paraître délibérée. Elle donne à un lecteur SaaS le chemin le plus court vers l’offre.
Les timings derrière section hero
Quand une page paraît agitée, la cause est souvent un excès d’entrées. Celle-ci garde la liste courte, 100ms de transitions, des états de survol et de clic et un bandeau défilant en boucle. Rien ne s’anime pour lui-même dans le design de section hero.
Adapter section hero à votre marque
La composition est la partie réutilisable, le sujet est le vôtre. Changez le titre, gardez l’échelle typographique (un corps display fixe de 220px) et retestez l’accent #A855F7 sur vos propres médias. Si un nouvel élément n’aide pas à expliquer la promesse ou l’action suivante, sa place est sous la ligne de flottaison. Votre accent doit passer le même test de contraste que celui de la référence.
Questions fréquentes
Puis-je reconstruire ce type de section hero de Power AI avec une autre stack?
La fiche indique un seul composant pour la provenance, parce que Power 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.
Quelle est la longueur du prompt derrière Power AI?
Ce n’est pas une description d’ambiance mais un brief de construction, avec la composition en 800x604, les espacements et les valeurs d’animation. Aucun passage ne prend l’image rendue pour la source de vérité.
D’où vient le design de Power AI?
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 800x604.
