À propos de ce modèle
Pixel Grid Hover résout le problème de portfolio pour une agence ou un studio à partir d’un seul brief capturé. Le titre affiché est « Brand Strategy & Product Design », et le reste de portfolio s’organise autour de lui. La couleur se réduit à blanc #EBEBEB en fond et noir #1A1819 pour le texte, composée en DM Sans. La livraison tient en React et Tailwind CSS, une seule page, sans plugin ni outillage de build entre vous et le design. Le budget d’animation est 0.7s de transitions et cubic-bezier(0.22,1,0.36,1). C’est la référence qu’il faut pour un design de portfolio destiné à une agence ou un studio, quand le premier écran doit sembler intentionnel.
Conçu pour
- Toute personne qui utilise un générateur IA et veut un brief contenant déjà un cadre 640x472 au lieu de laisser le modèle décider.
- Équipes internes qui étendent ce design de portfolio et ont besoin de retrouver une typographie de 12px à 14px et des pas d’espacement de 12px à l’identique dans les nouveaux blocs.
- Quiconque briefe un modèle sur un design de portfolio utilisera le prompt de 8 672 caractères comme point de départ.
Ce qui est inclus
- Les tailles sont dans le brief, pas dans une échelle. Les valeurs sont la spécification, une typographie de 12px à 14px, des pas d’espacement de 12px, des transitions de 0.7s et un easing cubic-bezier(0.22,1,0.36,1), relevées sur 640x472 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.
- Une pastille pour la seule nouveauté. Un badge, un message. La pastille se place au-dessus du titre en DM Sans au plus petit palier, et rien d’autre ne vient concurrencer cette position. La pastille occupe le plus petit palier du brief, elle se lit donc comme un libellé et non comme un second titre.
- Mesuré, pas estimé à l’œil. Les espacements sont cités de la même façon (une typographie de 12px à 14px, des pas d’espacement de 12px, des transitions de 0.7s et un easing cubic-bezier(0.22,1,0.36,1)), et non comme une échelle qui grandit toute seule.
- La pastille d’annonce. Gardez-le au-dessus du titre, jamais à côté. La référence a été capturée en 640x472.
Animation et interaction
Le scroll mène la séquence
Parallaxe se joue pendant que la page défile, donc la composition a un état de repos défini. En mouvement réduit, l’effet disparaît sans changer l’état final de la composition.
Des durées en millisecondes
Survol, appui et focus se règlent tous en 0.7s, et c’est ce qui rend l’interface immédiate. L’easing est spécifié avec la durée (0.7s), donc une reconstruction ne peut pas substituer discrètement une autre sensation.
Le réagencement de portfolio
Une mise en page étroite conçue demande plus de décisions qu’un simple écrasement. Le brief les assume en énonçant la typographie est bornée entre 12px et 14px plutôt qu’en les découvrant au build. La réorganisation garde l’action accessible à chaque largeur.
Pourquoi le brief agence tient
Le compromis porte sur la densité, car le design de portfolio dit moins sur le premier écran qu’une mise en page pilotée par les fonctionnalités. Ce qu’il garde, c’est l’ordre de lecture, et le travail qu’une page plus longue étalerait revient à le badge d’annonce, la ligne de statistiques, la grille de cartes et le pied de page. Pixel Grid Hover énonce la promesse une fois et laisse la composition la répéter au lieu d’ajouter une seconde affirmation.
Les chiffres derrière portfolio
Presque chaque décision ici est une valeur vérifiable, une typographie de 12px à 14px, des pas d’espacement de 12px, des transitions de 0.7s et un easing cubic-bezier(0.22,1,0.36,1). Le média est une image fixe en 640x472. La typographie reste en DM Sans, une substitution doit donc garder les mêmes proportions. Rien dans le design de portfolio ne dépend d’une valeur par défaut.
Questions fréquentes
Que recevez-vous en copiant le brief de Pixel Grid Hover?
Comptez 8 672 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.
Faut-il React et Tailwind CSS pour reconstruire Pixel Grid Hover?
La fiche indique React et Tailwind CSS pour la provenance, parce que Pixel Grid Hover 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 garder les transitions de Pixel Grid Hover en changeant les durées?
L’animation est décrite avec le même niveau de détail que la mise en page, et les changements d’état se stabilisent dans la plage 0.7s en cubic-bezier(0.22,1,0.36,1). Portez la composition d’abord et les durées ensuite, car il est plus facile de les caler une fois la mise en page en place.
