À propos de ce modèle
Scene 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 « Create awesome 3D scenes with AI », et le reste de section hero s’organise autour de lui. La palette se limite à noir #000000 en fond et blanc #EBEAD0 pour le texte, et la typographie est Inter. La construction repose sur Tailwind CSS. Chaque mesure y est écrite, et c’est ce qui la rend réutilisable. La page s’en tient à un fond vidéo en boucle. Gardez-la ouverte pendant la rédaction, car le brief de 2 425 caractères est la partie qui se transfère à votre page.
Conçu pour
- Cette composition convient aux agences qui défendent des projets SaaS et doivent citer un cadre 2056x1476 dès la première réponse au client.
- Les responsables de studio qui mènent plusieurs projets de front utiliseront ce design de section hero comme le motif que toutes les autres pages recopient.
- Des responsables marketing produit qui ont besoin qu’une section hero reste lisible avec 8s de vidéo en boucle derrière le texte.
Ce qui est inclus
- La barre partage la grille. La barre se superpose à section hero au lieu de repousser le contenu, la composition garde donc toute la hauteur du premier écran. La barre se pose sur la composition 2056x1476 sans fond propre, la vidéo court donc bord à bord en dessous.
- La typographie porte le ton. La ligne display est composée en Inter à une taille fixée par le brief, le titre devient donc un élément de composition et non un paragraphe. Remplacer la fonte est possible, mais les proportions doivent survivre à la substitution.
- Un bandeau de nav volontairement fin. Les états de focus et de survol sont spécifiés pour chaque lien au lieu d’être hérités du navigateur.
- La vidéo au calque inférieur. Le premier écran est un seul clip en 2056x1476, et tout le reste s’organise par-dessus. La boucle est assez courte (8s) pour que l’œil la lise comme une texture et non comme une timeline. Exportez en 2056x1476 ou plus large pour garder un cadrage honnête.
Animation et interaction
Une petite surface interactive
Le travail au pointeur est réduit et spécifié (des états de survol sur les boutons et les liens plutôt que sur chaque carte), appliqué aux éléments qui ont déjà l’air interactifs. Les cibles interactives sont assez grandes pour être touchées et le traitement du pointeur reste cohérent entre elles.
La boucle fait l’ambiance
Le mouvement d’ambiance vient de la boucle de 8s en 2056x1476 et non d’effets de scroll, ce qui garde la page calme et le texte lisible. La boucle est rognée en cover, ce qui veut dire que la composition ne dépend pas d’un format d’image précis.
Adapter section hero à votre marque
Une ligne, une police, un accent, ces trois substitutions changent le plus le design, et rien d’autre, les valeurs à ne pas bouger étant un cadre 2056x1476. Réécrivez le texte et les médias avant de recolorer quoi que ce soit.
Lire Scene AI comme une spécification
S’engager sur un cadre 2056x1476 échange de la souplesse contre de la répétabilité. C’est tout l’intérêt de la référence, la même page dans une autre marque, sans nouvelle série d’estimations. Rien dans le design de section hero ne dépend d’une valeur par défaut.
Le gain pour un produit IA ou SaaS
Vous pourriez reconstruire ceci en pile de cartes séparées et ne perdre que l’argument. Le design de section hero se lit plutôt comme une seule décision, la navigation, le badge d’annonce, la ligne de statistiques, le clip de fond et le pied de page dans une séquence unique. Scene AI énonce la promesse une fois et laisse la composition la répéter au lieu d’ajouter une seconde affirmation.
Questions fréquentes
Le prompt de Scene AI est-il une spécification aboutie ou un simple point de départ?
Ce n’est pas une description d’ambiance mais un brief de construction, avec la composition en 2056x1476, les espacements et les valeurs d’animation. Aucun passage ne prend l’image rendue pour la source de vérité.
Faut-il Tailwind CSS pour reconstruire Scene AI?
La référence se trouve avoir été construite en Tailwind CSS, mais ce choix n’engage rien dans la mise en page. Les espacements, la typographie et les valeurs d’animation se transposent dans la stack que vous utilisez déjà.
Puis-je publier une page reconstruite d’après Scene AI 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 2056x1476.
