À propos de ce modèle
Rare Gallery est la référence portfolio pour une agence ou un studio, et le brief qui l’accompagne est une spécification de construction complète, pas un mood board. Le titre affiché est « A carefully curated collection beyond compare », et le reste de portfolio s’organise autour de lui. La palette se limite à vert anis profond #222518 en fond, et la typographie est Instrument Serif. La livraison est en React et Tailwind CSS, capturée en 1920x1414 pour que le cadre soit fixé avant la première ligne de code. Le brief consacre son budget d’animation à 400ms de transitions, cubic-bezier(0.16, 1, 0.3, 1) et un fond vidéo en boucle. Partez du brief capturé, puis retouchez le contenu de portfolio au lieu de repartir de zéro.
Conçu pour
- Ce design de portfolio sert aux fondateurs qui ont besoin d’un seul écran pour prouver que le texte agence peut porter 6,9s de vidéo en boucle.
- Cette base est calibrée pour un fondateur seul qui livre un design de portfolio pour une agence ou un studio, sans design system derrière.
- Quiconque briefe un modèle sur un design de portfolio utilisera le prompt de 4 964 caractères comme point de départ.
Ce qui est inclus
- Rangée du haut, une action. La barre tient sur une rangée de texte et une action, mesurée à des pas d’espacement de 64px et des transitions de 400ms pour se lire comme un filet et non comme un bandeau. La barre se pose sur la composition 1920x1414 sans fond propre, la vidéo court donc bord à bord en dessous.
- Un badge au-dessus de la ligne de flottaison. Un badge, un message. La pastille se place au-dessus du titre en Instrument Serif 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. Retirez-le quand l’annonce a vieilli.
- L’inscription comme composition. Il n’y a qu’une décision à prendre ici, remplir le formulaire ou partir. Tout le reste de l’écran soutient cette décision. Les libellés se placent au-dessus de leurs champs et le texte secondaire reste au-dessus du premier champ. Une colonne, une action.
- Le pied de page est une composition entière. Les liens sont regroupés en colonnes avec le nom de marque dans son propre bloc, ce qui garde lisible un pied de page long au lieu de le transformer en liste. Les colonnes s’alignent sur la même grille que la page au-dessus, le pied de page paraît donc issu du même design. Gardez l’accent pour une seule action.
Animation et interaction
La boucle fait l’ambiance
Un clip de 6,9s suffit à toute la couche d’ambiance, il joue derrière le texte, boucle sans coupure visible et ne réagit jamais au pointeur. 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.
Du survol, mais avec parcimonie
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. Le retour d’information se limite aux contrôles, donc la composition reste immobile autour d’eux.
Adapter portfolio à votre marque
Changez le contenu d’abord et vérifiez le cadre ensuite. Les valeurs à protéger pendant le remplacement du texte sont des pas d’espacement de 64px, des transitions de 400ms et un easing cubic-bezier(0.16, 1, 0.3, 1). Une autre marque peut réutiliser tout le cadre.
Les timings derrière portfolio
Un pack d’animations prêtes à l’emploi aurait été plus rapide à livrer. Le brief spécifie plutôt 400ms de transitions, une boucle média de 6,9s et des états de survol et de clic, et c’est pourquoi la page semble conçue plutôt que mise en scène. Rien ne s’anime pour lui-même dans le design de portfolio.
Comment Rare Gallery ordonne la première lecture
S’engager sur un seul parcours de lecture ferme les autres. Le brief l’accepte, fige la navigation, le titre, le badge d’annonce, le formulaire et le clip de fond en place et dépense des pas d’espacement de 64px et des transitions de 400ms pour rendre le trajet évident. Un lecteur agence reçoit l’offre avant les options.
Questions fréquentes
Quelle est la longueur du prompt derrière Rare Gallery?
Comptez 4 964 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.
Pourquoi la fiche mentionne-t-elle React et Tailwind CSS?
La fiche indique React et Tailwind CSS pour la provenance, parce que Rare Gallery 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.
Comment gérer les médias de Rare Gallery 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 1920x1414.
