Comment rendre la grille mathématiquement consciente de son environnement (CQI & Clamp)
Réduis la fenêtre ou le panneau. Les lettres adaptent leur graisse
automatiquement via clamp() + cqi.
Même dans un conteneur étroit, la géométrie ne s'effondre pas :
Survol → bold. Classes .black, .pulse, .breathe.
:hover
.black
.pulse
.breathe
Rappel de la V1 : L'épaisseur du trait de la lettre, ainsi que les espaces vides
de la grille, sont calculés à partir d'une seule variable : --offset.
En mode "Ultra Black", nous poussons cette valeur à 21px. Sur une lettre
affichée à 240px de large, cela représente environ 8.7%
de l'espace total. La géométrie est stable, les trous s'évident correctement.
L'implosion : Sur un écran mobile, si l'on contraint la lettre à
faire 160px de large, le --offset reste fixé à
21px. L'épaisseur représente soudainement plus de 13%
de la boîte. L'espace mathématique vient à manquer. La somme de l'épaisseur des
traits et des espaces vides (gap) devient supérieure à la largeur
totale de la cellule.
Les coordonnées se percutent, l'axe X croise l'axe Y, et les points d'ancrage s'inversent. Résultat : les trous intérieurs s'effondrent sur eux-mêmes. La lettre est détruite.
Nous devons remplacer nos pixels morts par une unité proportionnelle.
%) sont instables dans les fonctions
mathématiques complexes d'un clip-path.vw (Viewport Width) se base sur la fenêtre entière.
Si notre lettre est dans une petite barre latérale, elle sera disproportionnée.La solution absolue est le CQI (Container Query Inline).
Cette unité représente 1% de la largeur du conteneur le plus proche.
Couplée à la fonction mathématique native clamp(),
elle permet de définir une graisse fluide, avec des limites de sécurité strictes.
container-type pour définir un
contexte de mesure, associée à l'unité cqi et à la fonction
de limitation clamp(min, ideal, max).clamp().@media) de
la logique du composant. Le composant devient un organisme autonome qui
"sait" quelle taille il fait et comment il doit s'auto-dessiner pour
survivre.Sans JavaScript, et sans détecter la largeur de l'écran, le processus est autonome :
[data-matrice-char].200px, 1cqi = 2px.
Donc 5cqi = 10px.clamp() valide : 10px est entre 4px
et 12px. ✓10px dans --offset.clip-path: var(--glyph) s'adapte sans jamais se briser.Il est strictement interdit d'utiliser des @media (max-width: ...)
pour modifier des proportions internes d'un composant complexe. Le
redimensionnement géométrique doit être géré en interne via
container-type / cqi.
Ne déclare JAMAIS une valeur fluide (cqi, vw) de
manière brute. Sécurise toujours avec
clamp(min, fluide, max).
Un composant doit pouvoir être placé dans une page entière ou dans une colonne de 150px de large et se comporter parfaitement dans les deux cas. C'est le design intrinsèque.
Puisque la forme de la lettre est stockée dans une variable abstraite
(--glyph), pourquoi la restreindre à un seul calque 2D ?
Dans la prochaine expérience : extrusions isométriques, superpositions de
trames, effets bien crades :D