Volt Grid
Une console à cent cases. Une grille de glyphes géométriques qu’une vague chromatique traverse sans fin — froide, dense, jouable. Le calme tendu d’un tableau de bord de science-fiction.
→ Une onde de couleur balaie la grille en continu, allumant tour à tour les cellules. Survolez, cliquez : les nœuds s’activent et le compteur réagit. Cent glyphes, une seed, zéro image.
La technique derrière le design
Volt Grid est une démonstration de ce que le CSS moderne sait faire seul. Une propriété personnalisée typée @property de type <angle> est animée en boucle ; en la décalant case par case, elle propage une vague chromatique à travers une grille de 10×10. Les cent glyphes — cercles, triangles, carrés, croix, lecteurs — sont disposés et orientés par un générateur pseudo-aléatoire à graine fixe (Mulberry32, graine 0x564F4C54), uniques mais reproductibles. Les nœuds réagissent au survol et au clic comme une interface jouable, compteur à l’appui. Aucun canvas, aucune librairie JavaScript, aucun CDN — un seul fichier autonome. Léger, net sur tout écran, intégrable en 5 minutes.
Idéal pour
Palette — nuit, corail & cyan
Questions fréquentes
Qu’est-ce que CSS @property ?
C’est une fonctionnalité de l’API CSS Houdini qui permet de déclarer une propriété personnalisée avec un type — ici un angle. Le navigateur sait alors l’interpoler de façon fluide au fil d’une animation. En décalant cet angle d’une case à l’autre, on crée une onde de teinte qui parcourt toute la grille, sans une ligne de JavaScript pour l’animation.
Vraiment sans canvas ni librairie ?
Oui. Toute la grille, les glyphes et l’onde chromatique sont en HTML et CSS purs. Un petit script vanilla gère uniquement la génération à graine fixe et les interactions (survol, clic, compteur). Aucun canvas, aucune dépendance, aucun CDN : un seul fichier qui fonctionne partout.
Est-ce interactif ?
Oui. La grille se veut « jouable » : les cellules réagissent au survol et au clic, s’activent et alimentent un compteur de nœuds. On peut s’en servir comme fond vivant, comme hero animé, ou comme base d’une petite interface ludique à brancher sur vos propres événements.
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. La taille de grille, la vitesse de l’onde, la graine et la palette se règlent en quelques variables en tête de fichier.
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 : Lattice Cipher · Neon Manifesto · Signal Atlas · Constellation Forge · Accueil