Rien
à cliquer.

Juste une matière qui respire.

Elle écoute.

Elle suit la souris, elle change avec le défilement.

Le bruit s'apaise, les couleurs se posent.

Et vous entrez.

Réutiliser cette idée

Un shader plein écran : une matière fluide qui réagit au défilement et à la souris, sans aucun objet 3D.

Idéal pour : Une marque forte, une page d'attente, un studio, de la musique ou de l'art ; tout ce qui veut une ambiance avant un discours.

Fichiers

08-matiere/scene.js (la mise en scène), 08-matiere/index.html (textes), 08-matiere/page.css (ajustements), plus le socle src/commun/.

Réglages

Image derrière la matière : IMAGE
Teinte du liquide : uTeinte ; agitation et ouverture pilotées par p
Tout est dans FRAGMENT : surface par bruit simplex, normale, réfraction, aberration chromatique, spéculaire, grain

Performance

Un quad plein écran ; densité de pixels plafonnée à 1,5 (1 sur mobile).

Sources

Repli

Sans WebGL, sans JavaScript ou avec « réduire les animations » : les mêmes textes et liens, en page statique.

Copier le dossier 08-matiere/ et src/commun/ dans le projet cible (Vite + three + gsap + lenis).
Remplacer les textes des quatre étapes dans index.html ; garder les attributs data-*.
Ajuster les réglages ci-dessus dans scene.js ; la progression p va de 0 (haut) à 1 (bas).