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. Prête à animer votre site.

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.

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

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.

Combien coûte l'intégration de cette pièce ?

L'intégration démarre à CHF 890. On accorde la palette (rouge bolchevique, noir structure) à votre charte, on règle la viscosité du fluide, l'intensité du pinceau et le rythme de dissipation, puis on pose la composition en hero ou en section interactive. C'est un fichier unique autonome en WebGL2 pur. Un site signature construit autour démarre à CHF 2 500.

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.

Comment on l'intègre

On canalise le flux chez vous. On accorde la palette (rouge bolchevique, noir structure) à votre charte, on règle la viscosité du fluide, l'intensité du pinceau et le rythme de dissipation, puis on pose la composition en hero ou en section interactive sur votre site. Intégration dès CHF 890. Un site signature bâti autour de ce fluide 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