Constellation Forge
Et si votre page devenait un jeu ? Chaque clic forge un nœud qui s’illumine et se relie aux autres : sous vos yeux, une constellation prend vie, le réseau se densifie, le score grimpe. Un sonar pulse pour vous inviter, un HUD live affiche nœuds, connexions et état du réseau. Ludique, hypnotique, et entièrement en CSS + SVG — sans une seule ligne de canvas.
→ Cliquez n’importe où dans l’aperçu : chaque clic forge un nœud et tisse une nouvelle connexion.
La technique derrière le design
Pas de canvas, pas de WebGL : tout est en DOM, SVG inline et CSS pur. À chaque clic, un nœud apparaît avec une « co-explosion » signature — un clip-path qui s’ouvre en cercle pendant qu’un stroke-dashoffset trace l’arc de connexion, simultanément. Les positions, couleurs et halos sont semés par un générateur pseudo-aléatoire (Mulberry32) pour une composition toujours différente. C’est ultra-léger (aucun GPU sollicité), accessible (respect de prefers-reduced-motion, rôles ARIA) et autonome : un fichier unique, zéro dépendance externe critique.
Idéal pour
Palette — triadique secondaire
Questions fréquentes
Est-ce un vrai jeu interactif ?
Oui. Vous cliquez pour poser des nœuds ; ils se relient automatiquement en constellations, et un HUD affiche en direct le nombre de nœuds, de connexions, l’état du réseau et un score. L’effet « forge » se déclenche en moins d’une seconde à chaque clic.
Est-ce lourd ou risqué pour mon site ?
Au contraire, c’est l’une des pièces les plus légères de la collection : aucun canvas, aucun WebGL, aucun GPU sollicité — uniquement du DOM, du SVG et du CSS. Elle respecte les préférences de réduction de mouvement et fonctionne en fichier unique autonome, sans dépendance externe critique.
Puis-je l’intégrer et l’adapter ?
Oui. Intégration en 5 minutes (un bloc HTML), couleurs de la palette, libellés du HUD et textes ajustables, et une API JS (pause / resume) exposée. La charte design complète 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À découvrir aussi : Vortex Manifold · IDEOGRAPH v2.4 · Lattice Decay · Accueil