Vortex Manifold
120 000 points. Une seule équation. Le chaos qui devient forme. Un nuage de particules lumineuses naît du désordre, se noue en vortex, se fige en sphère dorée, déploie la spirale de Fibonacci, brise son réseau — puis revient. Tout se métamorphose au fil de votre défilement, sur le GPU, à 60 images par seconde.
→ La matière s’auto-organise dès l’arrivée ; faites défiler pour déclencher chaque métamorphose (vortex, sphère, φ, lattice).
La technique derrière le design
Une seule commande de dessin anime tout le nuage : le rendu instancié WebGL2 (drawArraysInstanced) confie les 120 000 particules au GPU en parallèle. Le morphing entre les formes est calculé dans le vertex shader — une interpolation entre position de départ et position cible — tandis que cinq attracteurs procéduraux (chaos, vortex d’Archimède, sphère de Fibonacci, phyllotaxie, lattice brisé) sculptent la matière. Le blending additif donne la lueur, et la couleur encode la vitesse : magenta pour le lent, ambre pour le rapide. Côté robustesse, le compte de particules s’adapte à l’écran (allégé sur mobile), la densité de pixels est plafonnée, l’animation se met en pause hors écran, et un dégradé statique prend le relais si le WebGL2 manque. Fichier unique autonome, zéro dépendance externe.
Idéal pour
Palette — bichromatique void
Questions fréquentes
Est-ce réellement 120 000 particules ?
Oui, sur desktop. Elles sont rendues en une seule commande GPU (instanced rendering WebGL2) et transformées dans le shader. Pour préserver la fluidité partout, le compte s’adapte automatiquement à l’écran (réduit sur mobile) — l’effet reste spectaculaire, sans jamais ramer.
Est-ce lourd ou risqué pour mon site ?
Non. Tout le calcul vit sur le GPU en un seul appel de dessin, la densité de pixels est plafonnée, l’animation se met en pause hors écran et un dégradé statique s’affiche si le WebGL2 n’est pas disponible. C’est un fichier unique autonome, sans aucune dépendance externe critique.
Puis-je l’intégrer et l’adapter ?
Oui. Intégration en 5 minutes (un bloc HTML), couleurs, formes et textes des actes ajustables, et une API JS (pause / resume / setState) pour piloter les métamorphoses. 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 : Metropolis Protocol · Lattice Decay · Chromatic Storm · Accueil