Scènes
Les illustrations, des schémas isométriques vectoriels : comment elles sont faites, animées et posées.
Les illustrations
Depuis le 13 octobre, des schémas isométriques vectoriels, à la manière de Baseten (JB, 12 octobre) : le gris « stone » de la charte, quelques verts seulement, sur ce qui est actif, et des animations CSS écrites dans le SVG même, sans vidéo. Une illustration par offre, une par rôle, le suivi, la section IA de l’accueil (le cas Bosco Services, posé le 13 octobre), et la scène hero du premier écran : le G Grinn sur son socle, six objets autour. Plus aucune page ne pose d’ancienne scène peinte ; leurs fichiers restent dans public/assets/scenes.
| Fichier | Où elle se pose | Animation | Format |
|---|---|---|---|
| hero | la scène hero, le G Grinn sur son socle et six objets autour : la démonstration du premier écran de l’accueil (hero.svg#fixe, la page le fait flotter) ; l’en-tête de /offres/, en cover | CSS ; le G, posé par hero-grinn.py, se pose puis son point vert saute | 2560 × 1664 (svg) |
| site-internet | la carte Site internet et l’en-tête de sa page ; sa vignette dans la démonstration de l’accueil | CSS | 1995 × 1667 (svg) |
| marketing-digital | la carte Marketing digital et l’en-tête de sa page ; sa vignette dans la démonstration de l’accueil ; une cellule de /suivi/ | CSS | 1418 × 1435 (svg) |
| e-commerce | la carte E-commerce et l’en-tête de sa page ; sa vignette dans la démonstration de l’accueil | CSS | 1995 × 1433 (svg) |
| application-mobile | la carte Application mobile et l’en-tête de sa page ; sa vignette dans la démonstration de l’accueil | CSS | 1528 × 1466 (svg) |
| ia-et-automatisation | la carte IA et automatisation et l’en-tête de sa page ; sa vignette dans la démonstration de l’accueil ; la cellule de /contact/ | CSS | 1818 × 1314 (svg) |
| logiciel-metier | la carte Logiciel métier et l’en-tête de sa page ; sa vignette dans la démonstration de l’accueil | CSS | 1866 × 1509 (svg) |
| suivi | le dôme du suivi (accueil) et l’en-tête de /suivi/ | CSS | 1806 × 1282 (svg) |
| role-design | la cellule Le design UX/UI | CSS | 1233 × 893 (svg) |
| role-dev | la cellule Le développement | CSS | 974 × 964 (svg) |
| role-chef-de-projet | la cellule Le chef de projet | CSS | 1368 × 1791 (svg) |
| role-strategie | la cellule La stratégie | CSS | 1324 × 1386 (svg) |
| role-ia | aucune : l’IA n’est plus un rôle, elle traverse tout | CSS | 1605 × 1525 (svg) |
| role-pub | aucune : la cellule de la stratégie a pris role-strategie | CSS | 1182 × 1197 (svg) |
| ia-scene | la section IA de l’accueil, appelée en ia-scene.svg#fixe (c’est sa boîte, dessin et annotations, qui flotte) : le mail, l’assistant, le logiciel métier, la fiche et le devis, la validation, reliés par le flux (tour 11, 13 octobre) ; cinq annotations ancrées, les trois étapes et deux repères (le mail, le logiciel métier), aucune sur l’assistant | CSS ; une vague verte parcourt le flux toutes les 4,8 s, en couleur seulement (flux-ia.py) | 2575 × 1693 (svg) |
<div class="tr-carte__scene">
<Scene nom="site-internet" />
</div>Comment elles sont faites
Rien n’est dessiné à la main : la chaîne est écrite, et chaque illustration la suit.
Chaque illustration est produite en vectoriel par Recraft V4 Pro Vector sur Runware, la palette de la charte passée au modèle. Aucun texte dans l’image (aucune balise text dans les 42 SVG du dossier, vignettes comprises) : ce que l’illustration montre, le texte le dit à côté. Les verts Grinn sont ensuite remis dans le SVG, là où le modèle a sorti un olive ou oublié le vert.
Elle est animée par docs/proto-animations/outils/anime-svg.py : les objets sont trouvés par leur silhouette, puis entrent en fondu l’un après l’autre ; le vert respire, les nœuds s’allument, et l’image entière flotte d’un bloc (5 s, 24 unités du dessin). Jamais une pièce seule ne bouge : contours et liaisons sont parfois fondus dans un même tracé, et l’image se déchirerait.
La scène hero part d’un décor Recraft (tour-10-hero-ecosysteme) : hero-eco.py en retire la boutique centrale et les liaisons d’origine, redessine le socle et un rayon par objet. hero-grinn.py y pose le vrai symbole Grinn, extrudé en isométrique, qu’aucune IA ne redessine. C’est la seule pièce qui bouge seule, parce qu’elle n’est pas un tracé Recraft : elle se pose en 0,9 s, puis son point vert saute toutes les 4 s.
Les originaux sont hors dépôt, dans le dossier du projet (docs/proto-animations/master-runware : tour-6-declinaisons pour la série, tour-10-hero-ecosysteme pour la scène hero, tour-11-ia pour la section IA). Le site n’en garde que les SVG animés. La copie de hero.svg porte deux règles du site : elle vide le dessus blanc gardé sous le socle, et, appelée en hero.svg#fixe, elle ne flotte plus d’elle-même. Celle de ia-scene.svg en porte une : appelée en ia-scene.svg#fixe, elle ne flotte plus d’elle-même.
La section IA de l’accueil a gardé jusqu’au 13 octobre la dernière scène de l’ancienne chaîne, écartée le 12 octobre (voir Écarté) : une image FLUX.2 dev sur Runware, animée en boucle par Kling, sur un fond vert en dégradé. JB la fait refaire « avec un fond clair ». Son schéma v2 suit la recette de la série (tour-11-ia, en 2560 × 1664, le format du héros, pour un flux en cinq temps) : quatre compositions, la diagonale retenue, ses verts gardés sur le flux et la validation seulement. Il ajoute une vague verte qui parcourt le flux, de couleur seulement (flux-ia.py). Les quinze scènes peintes restent dans public/assets/scenes : rien n’est supprimé, et Scene y retombe pour tout nom qui n’a pas de SVG, sauf dans la section IA de l’accueil, appelée avec v2Seulement : sans ia-scene.svg, elle pose la réserve « Scène à produire » et le signale au rendu, jamais l’ancienne scène.
Comment elles se posent
Fond transparent, sans multiply ni filtre : la cellule passe autour du dessin, et il n’a pas de cadre. Chaque emplacement fixe sa hauteur et son cadrage ; au premier écran de l’accueil et dans l’en-tête d’une page, la cellule reste pâle et unie derrière le schéma (13 octobre, à valider par JB) ; dans la section IA de l’accueil aussi, à la demande de JB (fond clair, 13 octobre).
| Classe | Zone | Valeur |
|---|---|---|
| .tr-scene--v2 | toute illustration v2 | une image (Scene.astro et illustrations.ts) aux dimensions de son viewBox, alt vide, decoding async, lazy (eager en haut de page : la classe tr-une__scene) ; mix-blend-mode normal, sans filtre : son fond est transparent ; elle s’anime seule, en CSS, et se fige en mouvement réduit ; ses traits foncés portent un contour en px d’écran réglé sur la taille affichée, pour rester nets en densité 1 (data-lisibilite, posé par docs/proto-animations/outils/lisibilite-svg.py, à relancer sur tout SVG recopié depuis docs/) ; en densité 2 et plus, l’image prend <nom>@2x.svg, le dessin d’origine (srcset, écrit par le même script) |
| .tr-carte__scene .tr-scene--v2 | la carte d’offre | cadre de 300 px (220 px sous 480 px), 16 px d’air au-dessus ; contain ; au survol, la boîte entière, dessin et annotations, à 1.04 en 700 ms |
| .tr-role .tr-scene | la cellule de rôle | hauteur clamp(180px, 16vw, 220px), poussée en bas de la cellule, 14 px d’air ; contain |
| .tr-dome__scene .tr-scene--v2 | le dôme | une boîte 3/2 de min(80 %, 340px, 66cqw − 8px) de haut, posée au bas du dôme ; contain, sans zoom : le schéma entier, même sur un téléphone de 320 px |
| .tr-demo__scene .tr-une__scene | la démonstration de l’accueil | hero.svg#fixe sur toute sa cellule, pâle et unie ; contain, pour que le schéma entier reste visible et que les traits tombent sur leurs objets ; la page le fait flotter avec ses traits et son anneau ; ni parallaxe ni recul |
| .tr-cel--scene .tr-scene--v2 | une cellule de /suivi/ et de /contact/ | marketing-digital sur /suivi/, ia-et-automatisation sur /contact/ : cellule pâle, padding clamp(16px, 2vw, 28px), le dessin centré, contain, 420 px de haut au plus |
| .tr-demo__offre .tr-scene--v2 | la vignette d’une offre | l’illustration de l’offre recadrée sur son objet principal, entier, au format de la case (<id>-vignette.svg : voisins retirés, liaisons fondues au bord ; table VIGNETTES de lisibilite-svg.py), en multiply, sous son nom, à droite de la case (voir la page Accueil) |
| .tr-page__dessin .tr-scene--v2 | la page intérieure | cellule 4/3, pâle et unie ; contain, avec clamp(18px, 5 %, 40px) d’air ; la scène hero de /offres/ en cover (elle n’y perd que ses marges vides) ; suit le pointeur (data-parallaxe), recule en sortant de l’écran, et ses annotations ancrées la suivent |
| .tr-ia__scene .tr-scene--v2 | la section IA de l’accueil | ia-scene.svg#fixe dans une boîte 4/3 (.tr-ia__scene) centrée dans la cellule pâle et unie (.tr-ia__dessin, padding clamp(16px, 2vw, 28px)) ; contain, sans agrandissement : le schéma entier ; la boîte est un conteneur de taille pour les annotations ancrées, un cran plus petites quand elle fait moins de 540 px de large, et c’est elle qui flotte, dessin et annotations d’un bloc (tr-ia-flotte : 5 s, 24 unités du dessin) ; sous 700 px, au format du dessin et sur toute la largeur de la cellule (padding latéral 0), sans annotations |
| .tr-scene--attente | la réserve | ni SVG ni scène peinte pour ce nom (ou pas de SVG quand l’appel porte v2Seulement) : « Scène à produire » et le nom, en clair, sur le papier des réserves, bord tireté ; 160 px de haut au moins ; aucune ne s’affiche aujourd’hui |
| Scene | le composant | nom (le fichier), classe, fixe (appelle <nom>.svg#fixe quand le SVG le permet : la page le fait flotter), v2Seulement (la section IA de l’accueil : sans SVG, la réserve et un avertissement au build, jamais l’ancienne scène peinte, écartée), animee (anciennes scènes : forcer la boucle ou l’image) |
Une illustration est une image SVG : ses animations tournent dans la balise img, sans script (vérifié dans Chrome le 13 octobre), et se coupent d’elles-mêmes en mouvement réduit. Sans JavaScript, elles s’animent pareil ; seule la scène hero de l’accueil, appelée en #fixe, ne flotte pas, puisque c’est trame.ts qui la fait flotter : ses objets entrent et ses nœuds s’allument quand même. Le schéma de la section IA, appelé lui aussi en #fixe, flotte sans script : c’est grinn.css qui fait flotter sa boîte.
Dans la section IA, le schéma est posé entier dans une boîte 4/3, au centre d’une cellule pâle et unie, le texte à côté sur le blanc, sans aplat (fond clair, JB, 13 octobre) ; ses annotations sont ancrées comme ailleurs. Jusque-là, toute la grille était pâle, la cellule du dessin portait le dégradé d’angle, et l’ancienne scène, en cover agrandie à 1.08, perdait ses bords. Une ancienne scène en boucle, si un nom sans SVG y retombait, se poserait avec poster, preload="metadata", muted, loop et playsinline : trame.ts la lance quand un quart d’elle est à l’écran, la met en pause quand elle en sort, et ne la lance pas en mouvement réduit.
Sur le premier écran de l’accueil, la scène hero est posée en contain au centre de la démonstration, et chaque offre autour d’elle pointe un objet par un trait d’attache ; un anneau relie les objets entre eux. Les points visés sont écrits dans index.astro (table CIBLES), en fraction du dessin : ce sont les points d’ancrage des six objets dans hero.svg (2560 × 1664). Si la scène hero est refaite, les cibles sont à recaler. Chaque offre y montre son illustration en vignette, chargée en différé.
Les annotations
Une annotation nomme ce qu’elle touche. Sur une illustration v2, elle est ancrée : le bout de son trait est posé sur l’objet, dans le repère du dessin, et l’annotation se range dans le vide à côté (places cherchées sur le masque de chaque dessin, à toutes les tailles de boîte). Sur une ancienne scène peinte, elle était posée en pourcentage de la scène. Accrochée par le haut ou par le bas, elle est masquée sous 700 px : là, le texte suffit.
- Emploi
- Le nom des offres autour de la scène de l’en-tête de /offres/, les technologies sur la scène d’une carte et d’un en-tête de page d’offre, les trois temps de la scène IA, les trois mots du suivi dans le dôme et dans l’en-tête du suivi. Sur l’accueil, depuis le 12 octobre, les offres ne sont plus des annotations : chacune a sa case autour de la scène, reliée à son objet par un trait.
- Moment
- Quand un mot court aide à lire la scène. Jusqu’à trois par carte et par en-tête de page d’offre, cinq sur la scène IA, six sur l’en-tête de /offres/.
- Jamais
- Une phrase, un chiffre qui argumente, une annotation sans trait, une annotation qui dit autre chose que le texte à côté. Elle est décorative, et marquée aria-hidden.
| Prop | Zone | Valeur |
|---|---|---|
| x, y | la position | en pourcentage de la scène, depuis le haut et la gauche (left, top) ; avec ancre, le bout du trait |
| ancre | sur l’objet | illustrations v2 : x et y sont le bout du trait, sur l’objet nommé ; trame/annotations.ts donne les points dans le repère du dessin et ancree() les rend en cqw / cqh de la boîte : le trait touche l’objet à toutes les largeurs |
| droite | le côté | l’annotation s’étend à gauche de son trait (sinon : quand elle est posée à droite de 50 %) |
| trait | la longueur du trait | une longueur CSS ; 16 px sinon ; ancrée, max(8px, la longueur écrite dans annotations.ts × l’échelle du dessin) : le trait grandit avec lui |
| haut | l’accroche | l’annotation est accrochée par le bas : le trait part de son bas |
| vert | la mise en valeur | bord et texte vert profond |
| etape | les trois temps | l’annotation s’allume à son tour, toutes les 2,2 s, sur un cycle de 6,6 s |
| n | le rang | décale le flottement (-1,3 s par rang) et le tour d’allumage |
| .tr-puce | le style | Inter 600 10,5 px, capitales, 0,1 em ; fond blanc, bord --line, 1 px d’ombre portée en --line ; encre seconde |
| sous 700 px | le téléphone | display: none : le texte suffit |
<div class="tr-ia__scene" data-stagger="150">
<Scene nom="ia-scene" fixe v2Seulement />
<Puce {...ancree('ia-scene', ANCRES_IA.demande, 'contenu')} etape n={0}>Demande reçue par mail</Puce>
<Puce {...ancree('ia-scene', ANCRES_IA.mail, 'contenu')} n={3}>Le mail</Puce>
<Puce {...ancree('ia-scene', ANCRES_IA.fiche, 'contenu')} etape n={1}>Fiche et devis préparés</Puce>
<Puce {...ancree('ia-scene', ANCRES_IA.logiciel, 'contenu')} n={4}>Le logiciel métier</Puce>
<Puce {...ancree('ia-scene', ANCRES_IA.validation, 'contenu')} etape n={2}>Une personne valide</Puce>
</div>RègleUne scène est décorative : le texte dit tout ce qu’elle montre.