Pellucid Waves
Une partition typographique vivante. Chaque mot respire — sa graisse oscille sans fin entre maigre et gras, comme une onde qui traverse le texte — sur la rigueur tranquille d’une grille suisse.
→ Regardez les lettres enfler et s’amincir en boucle : la graisse passe de 300 à 700 et revient, décalée d’un mot à l’autre, en pur CSS. La beauté naît de l’oscillation entre présence et absence.
La technique derrière le design
Pellucid Waves fait chanter une police variable. Une propriété personnalisée typée @property de type <number> est animée en boucle ; sa valeur pilote l’axe wght (et l’italique) via font-variation-settings. En décalant la phase d’un mot à l’autre, on obtient une onde de graisse qui parcourt le texte — d’où les « waves ». Tout est porté par une grille éditoriale à la Müller-Brockmann, asymétrique et calme, ponctuée de fines ondulations en SVG SMIL. Aucun canvas, aucune librairie JavaScript pour l’animation, aucun CDN — un seul fichier autonome. Le rythme, la palette et la graine se règlent en tête de fichier. Intégration en 5 minutes ; repli serif gracieux si la police variable n’est pas disponible.
Idéal pour
Palette — brume, outremer & céladon
Questions fréquentes
Qu’est-ce qu’une police variable ?
Introduite en 2016 (OpenType 1.8), une police variable contient un espace de design continu dans un seul fichier : au lieu de fichiers séparés par graisse, un axe wght interpole entre toutes les épaisseurs, un axe ital entre romain et italique. Ici, ces axes sont animés en direct, donnant aux mots une respiration.
L’animation est-elle vraiment en CSS pur ?
Oui. Le cœur — l’oscillation de la graisse — est piloté par une propriété @property <number> animée en CSS, sans une ligne de JavaScript pour le mouvement. Un petit script vanilla ne sert qu’à la génération à graine fixe. Pas de canvas, pas de librairie, pas de CDN.
Pourquoi « waves » ?
Parce que la graisse de chaque mot est déphasée par rapport au précédent. L’œil perçoit alors une vague qui traverse le paragraphe — les lettres enflent puis s’amincissent en cascade, comme des harmoniques superposées sur la page. La typographie devient onde.
Est-ce intégrable, léger et personnalisable ?
Oui. C’est un fichier unique autonome (un bloc HTML, intégration en 5 minutes), sans librairie ni CDN. Le texte, la vitesse de l’onde, les bornes de graisse et la palette se règlent en quelques variables. Repli serif gracieux et respect de « mouvement réduit ».
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 (tokens couleur, échelle typographique, composants, colorways) et notes d’artiste. Usage commercial illimité.
Voir toute la collection → Tout l’art génératifÀ découvrir aussi : Lacquer Manifesto · Strata Resonance · Secession Manifesto · Lithograph Engine · Accueil