Art génératif · WebGL2 · Scrollytelling GPU

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, spirale, lattice.

Cette pièce sur votre site Intégrer cette pièce dès CHF 890 Vous êtes une agence ?

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

Marques tech & deeptechData-viz & IA (hero)Agences créatives audacieusesFestivals & événements techWeb3 / cryptoScience & R&DPortfolios motion / creative dev

Palette, bichromatique void

Void cosmique
Magenta (lent)
Ambre (rapide)
Ivoire (cœur)
Texte

Questions fréquentes

Est-ce réellement 120 000 particules ?

Oui, sur ordinateur. 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.

Combien pour le déployer sur mon site ?

L'intégration démarre à CHF 890: on accorde les couleurs, les formes des actes et les textes, puis on installe la pièce. Un site signature bâti autour démarre à CHF 2 500. Le devis suit l'ampleur de l'adaptation.

Comment on l'intègre

On déploie le nuage chez vous. On choisit les couleurs, les formes des actes et les textes selon votre marque, et l'API JS (pause, resume, setState) pilote les métamorphoses. On installe ensuite la pièce en hero ou en section au scroll. Intégration dès CHF 890. Un site signature bâti autour démarre à CHF 2 500. Hébergement suisse, code livré, pleine propriété.

Parlons de votre projet Discuter de cette intégration intégration dès CHF 890