Clododesign

Lithograph Engine — brutalisme typographique génératif

Art génératif · Brutalisme typographique · Presse computationnelle

LITHOGRAPH Engine

Une imprimerie computationnelle qui n’a jamais cessé de tourner. Le titre s’encre sous vos yeux — les glyphes passent du filiforme au massif en une seconde, comme l’encre se charge dans les gorges des caractères. Sur le papier industriel brut, un grain lithographique calculé en WebGL2 vibre en continu. Un monument typographique : monumental, solennel, précis.

→ Aucune action requise : la presse démarre, le titre s’encre, puis le grain respire en continu.

La technique derrière le design

L’effet signature est une animation de variable font : le titre passe de l’axe de graisse wght 100 (presque invisible) à wght 900 (massif) avec un easing « presse qui s’abat ». Par-dessus, un shader WebGL2 génère une texture de grain lithographique authentique — un bruit fractal (FBM 3 octaves) en mix-blend-mode multiply qui ne marque que les zones encrées, exactement comme une vraie presse. Le tout est en un seul fichier autonome : zéro dépendance critique, repli CSS propre si WebGL2 est absent, et mise en pause automatique hors écran.

Idéal pour

Maisons d’édition premiumFonderies de caractèresStudios de design graphiqueBranding luxe artisanalLabels musicaux éditoriauxPresses d’art & éditions limitéesPortfolios DA / typographes

Palette — split complémentaire

Ardoise industrielle
Encre bordeaux
Patine métal
Estampage or
Papier brut

Questions fréquentes

La « variable font » est-elle compatible partout ?

Oui. Le titre utilise Big Shoulders Display, une police variable largement supportée par les navigateurs modernes. Sur un navigateur ancien, l’animation d’encrage se dégrade en douceur : le titre s’affiche dans une graisse pleine, le design reste impeccable.

Est-ce lourd ou risqué pour mon site ?

Non. La composition est en CSS pur ; le grain est un seul shader WebGL2 minuscule (un quad plein écran) qui se met en pause hors écran. Aucune dépendance critique : le fichier fonctionne seul, et si le WebGL2 manque, un repli CSS prend le relais sans rien casser.

Puis-je l’intégrer et l’adapter ?

Oui. Intégration en 5 minutes (un bloc HTML), titre, sous-titre, métadonnées et couleurs de la palette ajustables. La charte design complète (couleurs, typographie, tokens) est fournie avec le kit.

Ce que vous recevez

Le kit complet : widget autonome (un seul fichier, intégration en 5 minutes), fragment WordPress copier-coller, art génératif injectable, charte design (couleurs, typographie, tokens) et documentation. Usage commercial illimité.

Voir toute la collection → Tout l’art génératif