Vitrine des cas
La matière du client, la capture dans son cadre, des puces : le visuel de chaque cas.
La vitrine
Le visuel d’un cas, sur les cartes de la page Réalisations, dans la page de cas, et depuis le 13 octobre sur les cartes de cas de l’accueil. Trois couches dans une boîte : la matière du client, un voile commun, et la capture dans un cadre qui dit le support. La maquette validée par JB le 12 octobre en fixe les valeurs ; le composant les reprend dans l’écriture de la trame.
- Emploi
- Montrer le produit d’un client dans son support : la carte d’un cas, la tête de sa page, la section propre au cas, le cas suivant.
- Moment
- Quand la fiche a sa matière, son support et sa vitrine : une capture, une adresse ou un site, des puces. Sans capture, la réserve dit ce qui manque.
- Jamais
- Pour une offre, l’équipe ou un lieu : ils ont leurs scènes et leurs photos. Jamais une capture d’emprunt, ni un écran qui affiche un chiffre de résultat (note de store, nombre de téléchargements).
<!-- La tête d'une page de cas : la vitrine large, chargée tout de suite. -->
<Vitrine slug={cas.id} matiere={d.matiere} support={d.support} vitrine={d.vitrine}
site={d.site} format="large" reserve={copie.reserve} eager />
<!-- La cellule allumée : la vitrine du point fort. -->
<Vitrine slug={cas.id} matiere={d.matiere} support={d.support} vitrine={d.vitrine}
site={d.site} angle format="cellule" reserve={copie.reserve} />| Couche | Élément | Valeur |
|---|---|---|
| La matière | img.tr-vit__tex | public/assets/matieres/<matiere>.webp, 900 × 900, object-fit cover, à 104 % ; 108 % au survol ; fond encre le temps du chargement. Elle et la capture proposent leurs tailles réduites (<nom>-360, -720 et -1080.webp, scripts/vitrines-reduites.mjs, à relancer après tout dépôt d’image) : srcset, et sizes="auto" en chargement différé, pour que le navigateur prenne la plus petite qui suffit |
| Le voile | .tr-vit::after | un dégradé de l’encre, de 5 % en haut à 42 % en bas, et une lueur du vert profond à 35 % qui monte du bas |
| Le cadre | .tr-vit__cadre | navigateur, téléphone ou borne, centré, au-dessus du voile ; il se soulève de 6 px (8 px pour le téléphone) au survol |
| Les puces | .tr-vit__pile .tr-puce | en piles autour du cadre : deux sur une carte, trois en tête de page, aucune en petite carte ; cachées sous 720 px |
| La réserve | .tr-vit__reserve | sans capture : le cadre vide sur le vert pâle, et le libellé passé par la page dans une étiquette tiretée |
La texture parle du client, le cadre parle de Grinn : le voile ramène les sept matières dans la même lumière. Les cadres sont des objets posés dans une image ; eux seuls ont des coins arrondis et une ombre, celles de la maquette, et la trame autour n’en a toujours pas. La vitrine est décorative : aria-hidden, images sans texte de remplacement. La carte ou la page porte le texte.
Les trois cadres
Le cadre suit le support de la fiche : le navigateur pour un site ou un logiciel, le téléphone pour une application (support telephone ou app), la borne pour Builders. Le composant lit les captures dans le dossier du cas, sous public/assets/realisations, et leurs dimensions dans le fichier, pour width et height. Les spécimens ont la largeur d’une carte de la maquette à 1440 px.
| Zone | Classe | Valeur |
|---|---|---|
| le navigateur | .tr-vit__nav | 78 % de large, le bas à -2 % ; 84 % en petite carte, 86 % dans la cellule ; en tête, 62 % et -6 % ; coins de 10 px en haut, fond blanc, ombre portée |
| la barre | .tr-vit__barre | 26 px, fond #F5F5F4, filet #D6D3D1, trois points de 8 px ; l’adresse en Inter 9 px dans une pastille de 46 % au plus ; sans adresse, pas de pastille |
| la capture | .tr-vit__nav .tr-vit__ecran | 16/10, object-fit cover, calée en haut |
| le téléphone | .tr-vit__tel | le haut à 12 %, la hauteur de la vitrine, au format 9/19,3 ; bord encre de 7 px, rayon de 34 px, écran arrondi à 27 px ; l’encoche fait 28 % × 16 px, à 13 px du haut |
| la borne | .tr-vit__borne | le haut à 10 %, 62 % de large ; 48 % en tête de page, au-dessus de 720 px |
| l’écran de la borne | .tr-vit__moniteur | 12 px d’encre autour d’une capture 16/9, coins de 14 px en haut et de 4 px en bas |
| le pupitre | .tr-vit__pupitre | 42 px, déborde de 4 % de chaque côté, dégradé #2A043D vers #310947 ; quatre boutons de 16 px à 12 px du haut, 6 % du pupitre au plus : #FC126F, #03C2BB, #FBEF0D, #03C2BB |
La réserve
Quand la capture manque, ou que son fichier n’est pas dans le dossier du cas, le cadre reste vide sur le vert pâle et une étiquette tiretée dit ce qui manque. Le libellé vient de la page, jamais du composant ; aucune puce ne s’affiche. C’est aujourd’hui le cas de Bosco Services.
Les formats
Cinq boîtes, celles de la maquette : la carte, la carte haute du cas en largeur, la petite carte, la tête de page et la cellule. Sous 720 px, toutes passent en 4/3 sauf la cellule ; la boîte change de format, les cadres gardent leur dessin. Chaque spécimen a la taille de sa boîte dans la maquette à 1440 px ; la tête de page, plus large, prend la colonne.
| Format | Boîte | Cadre | Emploi |
|---|---|---|---|
| carte | 16/10 | les cadres de base | les cartes par deux de la page Réalisations, deux puces ; le cas suivant d’une page de cas, sans puces |
| haute | 16/11 | les cadres de base | le cas en largeur de la page Réalisations, à côté du texte et des faits ; deux places, la carte n’en garde qu’une, qui ne répète pas un fait |
| petite | 16/11 | le navigateur à 84 % | les petites cartes par trois, et depuis le 13 octobre les cartes de cas de l’accueil (Cas.astro), par trois dès 1000 px ; aucune puce, comme la maquette |
| large | 21/9 | le navigateur à 62 % et -6 %, la borne à 48 % | la tête de la page de cas ; trois puces |
| cellule | la hauteur du parent, 440 px au moins | le navigateur à 86 % | la vitrine du point fort, dans la cellule allumée ; deux puces, celles du point fort ; aucune quand la fiche n’a pas de captureAngle et que la cellule reprend la capture de tête |
Les puces
Deux sur une carte, trois en tête de page, aucune sur une petite carte : le brief et la maquette de la page de cas. Les pages en retirent : une seule sur un cas en largeur, aucune sur le cas suivant. Dans la voix de .tr-puce : fond blanc, filet de la trame, Inter en capitales, et un carré vert profond devant le libellé. Elles se rangent en piles sur la texture : aux places de la maquette quand elle en donne, ailleurs autour du cadre. Une pile s’arrête au bord du cadre : une puce trop longue passe à la ligne plutôt que d’entrer dans la capture. Sous 720 px, elles disparaissent.
| Cadre | Format | Places (gauche, haut, limite) |
|---|---|---|
| navigateur | carte | la 1re à 4 %, la 2e par son bord droit à 96 %, au milieu de la bande au-dessus du cadre ; chacune s’arrête au milieu de la vitrine, jamais sur la capture |
| navigateur | haute | la 1re à 6 % et 10 %, comme la maquette ; la 2e par son bord droit à 94 % et 10 % |
| navigateur | large | la 1re et la 2e l’une sous l’autre à 6 % et 14 %, jusqu’à 30 % : elles mordent sur le cadre, comme la maquette, plutôt que de passer à la ligne ; la 3e à 80 % et 18 % |
| navigateur | cellule | la 1re à 8 % et 10 %, comme la maquette, plus haut si la bande au-dessus du cadre est plus étroite ; la 2e par son bord droit à 92 % |
| téléphone | carte | la 1re à 6 % et 20 %, jusqu’à 42 %, en mordant sur le téléphone ; la 2e à 66 % et 60 % : de part et d’autre du téléphone, comme la maquette |
| téléphone | haute | la 1re à 5 % et 20 %, jusqu’à 40 % ; la 2e à 67,5 % et 60 % |
| téléphone | large | la 1re et la 3e par leur bord droit à 38,5 % et 24 %, l’une sous l’autre ; la 2e à 61,5 % et 60 % |
| téléphone | cellule | la 1re à 5 % et 14 %, jusqu’à 36 % ; la 2e par son bord droit à 95 % et 64 % |
| borne | carte, haute | la 1re à 5 % et 8 %, sur le coin de l’écran, comme la maquette ; la 2e par son bord droit à 95 % et 76 %, contre le pupitre |
| borne | large | la 1re et la 3e par leur bord droit à 25 % et 16 %, l’une sous l’autre ; la 2e à 75 % et 70 % |
| borne | cellule | la 1re à 5 % et 8 % ; la 2e par son bord droit à 95 % et 8 % |
| tous | petite | aucune puce |
Les fiches
Les fiches de src/content/realisations portent leur vitrine dans le champ vitrine : capture et captureAngle, adresse et adresseAngle, puces et pucesAngle. Les spécimens de cette page les lisent telles quelles ; le tableau les compare au brief.
| Fiche | Matière | Cadre | Captures | Adresse | Puces |
|---|---|---|---|---|---|
| Bosco Services | metal | navigateur, support navigateur | aucune : la réserve | aucune : la barre n’a que ses trois points | Solitech · Validation humaine |
| Cathédrale de Nantes | pierre | téléphone, support telephone | ecran.webp en tête et en carte | sans objet : le cadre téléphone n’a pas de barre | Hors ligne · QR codes (le brief : Hors ligne · 4 langues) |
| PepPsy | ecran | téléphone, support telephone | ecran.webp en tête et en carte | sans objet : le cadre téléphone n’a pas de barre | Hébergement HDS · React Native |
| La Grande Table | bois | téléphone, support telephone | ecran.webp en tête et en carte | sans objet : le cadre téléphone n’a pas de barre | Sur invitation · Gens de Confiance |
| Mes Jardiniers | feuillage | navigateur, support navigateur | accueil.webp en tête et en carte ; reservation.webp au point fort | mesjardiniers.fr, le domaine du site ; mesjardiniers.fr/reserver au point fort | Next.js · Réservation en ligne 5 étapes · Direct dans le planning au point fort |
| IE Architecture | papier | navigateur, support navigateur | realisations.webp en tête et en carte | iearchitecture.fr, le domaine du site | aucune |
| Clotilde Davenne | cave | navigateur, support navigateur | fiche.webp en tête et en carte | clotildedavenne.fr, le domaine du site | Shopify · Contrôle de l’âge |
| Builders | metal | borne, support borne | titre.webp en tête et en carte ; selection.webp au point fort | sans objet : le cadre borne n’a pas de barre | Builders Arcade · Flutter |
Quand une fiche ne donne pas d’adresse, la barre du navigateur prend le domaine de son site ; sans site non plus, elle n’a que ses trois points. Les captures du brief sont en jpg dans la maquette ; le dépôt les a en webp, sous le nom court de chaque écran. Les puces sont celles de la Sémantique.
Les props et le mouvement
Le composant ne contient aucun texte : la vitrine vient de la fiche, le libellé de la réserve de la page.
| Prop | Rôle | Valeur |
|---|---|---|
| slug | le dossier des captures | public/assets/realisations/<slug>/ |
| matiere | la texture | metal, pierre, bois, feuillage, cave, papier ou ecran ; public/assets/matieres/<matiere>.webp |
| support | le cadre | navigateur : le navigateur ; telephone et app : le téléphone ; borne : la borne |
| vitrine | la capture, l’adresse, les puces | le champ vitrine de la fiche (d.vitrine), ou null pour la réserve ; capture et captureAngle sont des noms de fichier, avec ou sans extension (sans, le premier trouvé en avif, webp, jpg, jpeg ou png) |
| site | l’adresse par défaut | le site de la fiche (d.site) : son domaine, sans www, quand la fiche ne donne pas d’adresse |
| angle | la vitrine du point fort | captureAngle, adresseAngle (à défaut l’adresse, puis le domaine) et pucesAngle ; sans captureAngle, la réserve |
| format | la boîte | carte (par défaut), haute, petite, large ou cellule |
| reserve | le libellé de la réserve | une chaîne passée par la page, tirée de son fichier de copie ; le composant n’écrit aucun texte |
| maxPuces | le nombre de puces | par défaut, les places du format : deux, trois en tête, aucune en petite carte ; un nombre plus petit en retire : 1 pour le cas en largeur de la page Réalisations, 0 pour le cas suivant et pour la cellule sans captureAngle |
| eager | la vitrine du premier écran | loading eager, et fetchpriority high sur la capture ; lazy sinon |
| class | une classe de placement | posée par la page sur la vitrine (grille, marge), jamais pour en changer le dessin |
Au survol du lien qui porte la vitrine, à son focus, ou au survol de la vitrine : la matière passe de 104 % à 108 % en 1,2 s, le cadre monte de 6 px (8 px pour le téléphone) en 0,9 s, sur la courbe du site. En mouvement réduit, rien ne bouge.
| Point | Ce que fait la trame | Pourquoi |
|---|---|---|
| La voix des puces | celle de .tr-puce : Inter 10,5 px, espacement .1em, filet de la trame, au lieu de 10 px et .13em ; le carré vert profond et l’ombre de la maquette sont gardés ; 9,5 px dans une vitrine de moins de 440 px | une seule voix technique sur le site ; une carte par deux vers 900 px laisse peu de place autour du téléphone |
| Les places des puces | celles de la maquette quand elle en donne ; ailleurs, des places propres à la trame : le navigateur en carte (la bande au-dessus du cadre), la seconde puce de la borne, le téléphone en tête | la maquette n’a ni navigateur en carte avec des puces, ni seconde puce sur la borne, ni téléphone en tête ; les fiches donnent leurs puces, pas leurs places |
| Les piles | les puces d’un même côté se suivent sans se chevaucher, et passent à la ligne au bord du cadre | à 6 % et 14 %, puis 24 %, deux puces se touchaient dès que la tête rétrécit |
| Le 4/3 | sous 720 px, pour toutes les boîtes sauf la cellule ; la maquette ne le donne qu’à la tête | demandé pour la carte comme pour la tête : en 16/10 sur 343 px, le téléphone tombait à 100 px de large |
| La borne en tête | 48 % de large au-dessus de 720 px, au lieu des 62 % de la borne | la maquette n’a pas de borne en tête ; en 21/9 à 62 %, le pupitre sortait de la boîte |
| Le pupitre étroit | les boutons font 6 % du pupitre au plus, recentrés sur leur place | sous 400 px de vitrine, les boutons de 16 px se chevauchaient |
| L’adresse | celle de la fiche, à défaut le domaine du site ; sans l’une ni l’autre, la barre n’a que ses trois points | la maquette écrit chaque adresse à la main ; une pastille vide ne dit rien |
| La réserve | aucune puce ; le libellé vient de la page ; l’étiquette se pose au milieu de l’écran vide plutôt que de la vitrine, et se resserre dans un téléphone de moins de 300 px | comme la carte Bosco Services de la maquette ; aucun texte dans le composant |
| Le survol | le cadre se soulève aussi au survol de la vitrine seule, et au focus du lien ; la maquette ne le soulève qu’au survol du lien (le zoom de la matière, lui, y joue déjà au survol de la vitrine) | la tête de page n’est pas un lien |
RègleLa texture parle du client, le cadre parle de Grinn : une vraie capture dans son cadre, ou la réserve qui dit qu’elle manque.