À propos de ce modèle
AI Designer Portfolio est la référence section hero pour une agence ou un studio, et le brief qui l’accompagne est une spécification de construction complète, pas un mood board. La palette est blanc #F6FCFF en fond et sarcelle profond #051A24 pour le texte, composée en Neue Montreal. La livraison est en React et Tailwind CSS, capturée en 604x476 pour que le cadre soit fixé avant la première ligne de code. L’animation se limite à 0.1s de transitions, cubic-bezier(0.4, 0, 0.2, 1) et un fond vidéo en boucle, assez discrète pour que le texte reste au premier plan. Gardez-la ouverte pendant la rédaction, car le brief de 11 458 caractères est la partie qui se transfère à votre page.
Conçu pour
- Équipes internes qui étendent ce design de section hero et ont besoin de retrouver une typographie de 22px à 80px et des pas d’espacement de 40px à l’identique dans les nouveaux blocs.
- Des responsables marketing produit qui ont besoin qu’une section hero reste lisible avec 17,2s de vidéo en boucle derrière le texte.
- 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 AI Designer Portfolio.
Ce qui est inclus
- Une navigation sans fond. Une courte suite de liens et une seule action se posent au-dessus de section hero, tenues à une typographie de 22px à 80px et des pas d’espacement de 40px pour ne jamais concurrencer la composition en dessous. La barre se pose sur la composition 604x476 sans fond propre, la vidéo court donc bord à bord en dessous.
- Une grille de cartes porte le milieu. La grille fait la structure, des panneaux de même taille, composés en Neue Montreal, disposés pour que l’œil aille vers la droite plutôt que vers le bas. La hauteur des panneaux suit le texte, une ligne plus longue ne casse donc pas l’alignement de la rangée. Espacez les panneaux, ne les cernez pas.
- Une ligne, aucun tiroir. La barre tient sur une rangée de texte et une action, mesurée à une typographie de 22px à 80px et des pas d’espacement de 40px pour se lire comme un filet et non comme un bandeau.
- Les tailles sont dans le brief, pas dans une échelle. Les tailles sont citées plutôt qu’héritées, une typographie de 22px à 80px, des pas d’espacement de 40px, des transitions de 0.1s et un easing cubic-bezier(0.4, 0, 0.2, 1). Changez la fonte ou le texte, ces relations tiennent toujours. Les valeurs sont citées depuis le prompt capturé plutôt que déduites, elles survivent donc à un nouveau rendu.
Animation et interaction
États de pointeur, rien de plus
Le retour d’information se limite à des états de survol sur les boutons et les liens plutôt que sur chaque carte et un slider qui fait défiler le contenu par pages à la demande, et c’est ce qui évite à un premier écran dense de paraître surchargé. Le retour d’information se limite aux contrôles, donc la composition reste immobile autour d’eux. Moins d’états, tous spécifiés.
De l’animation sur le texte seul
L’animation d’entrée est dépensée sur un seul élément (les sections se révèlent à leur entrée dans le viewport), et c’est ce qui évite à un premier écran chargé de paraître surchargé. L’état final est la même composition qu’une image fixe, donc rien ne dépend de l’animation jusqu’au bout.
Ce qui bouge dans AI Designer Portfolio
Un budget d’animation court coûte du spectaculaire sur la première image. Il achète de la lisibilité et permet de porter 0.1s de transitions, une boucle média de 17,2s et une apparition au scroll sans bibliothèque. Rien ne s’anime pour lui-même dans le design de section hero.
Ce qui tient la route pour Agences et studios
Une couche teintée sur le média aurait été la solution facile. Le brief s’en passe. Le média est une boucle de 17,2s en 604x476. Le texte tient quand même, parce que le cadre reste calme grâce à une typographie de 22px à 80px et des pas d’espacement de 40px. AI Designer Portfolio énonce la promesse une fois et laisse la composition la répéter au lieu d’ajouter une seconde affirmation.
Lire AI Designer Portfolio comme une spécification
Chaque relation de cette page est une valeur vérifiable, une typographie de 22px à 80px, des pas d’espacement de 40px, des transitions de 0.1s et un easing cubic-bezier(0.4, 0, 0.2, 1). C’est ce qui rend AI Designer Portfolio reconstructible et pas seulement reproductible. Rien dans le design de section hero ne dépend d’une valeur par défaut.
Questions fréquentes
Quelle est la longueur du prompt derrière AI Designer Portfolio?
Ce n’est pas une description d’ambiance mais un brief de construction, avec la composition en 604x476, les espacements et les valeurs d’animation. Aucun passage ne prend l’image rendue pour la source de vérité.
Pourquoi la fiche mentionne-t-elle React et Tailwind CSS?
La fiche indique React et Tailwind CSS pour la provenance, parce que AI Designer Portfolio 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 AI Designer Portfolio 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 604x476.
