Clododesign

Constructivist Flux — fluide Navier-Stokes & design El Lissitzky

Art génératif · Navier-Stokes · El Lissitzky

Constructivist Flux

Une identité visuelle en mouvement perpétuel. La rigueur géométrique du constructivisme russe rencontre un vrai fluide qui coule, se tord et réagit sous le curseur.

→ Le fond n’est pas une vidéo : c’est une simulation de fluide calculée en direct sur votre carte graphique. Bougez le curseur — l’encre rouge suit votre geste.

La technique derrière le design

L’encre rouge n’est pas une animation pré-enregistrée : elle est simulée image par image par le navigateur. La pièce résout les équations de Navier-Stokes — les équations fondamentales de la mécanique des fluides — sur le GPU en WebGL2, via un pipeline complet de sept passes : advection semi-lagrangienne du champ de vitesse, injection de force au curseur, calcul de divergence, solveur de pression de Jacobi (20 itérations), correction de gradient pour un champ sans divergence, puis advection de la teinture. Le résultat est un fluide incompressible et physiquement crédible qui perfuse sous une composition « Proun » d’El Lissitzky (1922) — bloc noir asymétrique, rectangle rouge flottant, diagonales de force. Au repos, un pinceau ambiant invisible garde l’encre en mouvement ; il cède la main dès que vous bougez la souris. Fichier unique autonome, zéro librairie, zéro CDN critique.

Idéal pour

Studios créatifsStartups techÉvénements culturelsStudios de jeux indéAgences de designManifestes & landing pages

Palette — rouge bolchevique

Blanc glacial #F5F5F0
Rouge bolchevique #CC2200
Rouge mat #993300
Noir structure #0A0A0A
Gris #8A8A8A

Questions fréquentes

Qu’est-ce que la simulation de Navier-Stokes ?

Les équations de Navier-Stokes décrivent le mouvement des fluides — l’eau, l’air, la fumée, l’encre. Formulées au XIXᵉ siècle, elles sont au cœur de l’aéronautique et de la météorologie. Ici, une version 2D incompressible tourne réellement à chaque image sur le GPU : ce que vous voyez couler est de la vraie physique computationnelle, pas une boucle vidéo.

Le fluide réagit-il vraiment au curseur ?

Oui. Chaque mouvement de souris (ou de doigt sur mobile) injecte une force et de la teinture rouge dans le champ : l’encre suit votre geste avec inertie, tourbillonne, puis se dissipe lentement. Sans interaction, un pinceau ambiant entretient le mouvement pour que la pièce soit vivante dès le chargement.

Est-ce intégrable et personnalisable ?

Oui. C’est un fichier unique autonome (un bloc HTML, intégration en 5 minutes), sans librairie ni CDN critique. La palette, la viscosité du fluide, l’intensité du pinceau et le rythme de dissipation se règlent en quelques constantes en tête de script.

Est-ce léger et fluide sur mobile ?

Oui. La simulation tourne sur des grilles fixes (vitesse 256×256, teinture 512×512), indépendantes de la résolution de l’écran, avec une densité de pixels plafonnée. Le rendu vise 60 fps sur desktop et reste fluide sur mobile.

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, composants constructivistes) et documentation. Usage commercial illimité.

Voir toute la collection → Tout l’art génératif