Hero shader — nébuleuse mouse-reactive

Un fond plein écran pensé pour un hero de site studio. Une nébuleuse bleue/violette respire doucement grâce à un bruit de Simplex auto-warpé, et le curseur tire la texture vers lui avec une légère aberration chromatique.

Bouge la souris sur le cadre ci-dessus.

Démarche

Un fragment shader rend la totalité de la scène — pas de géométrie 3D, juste un seul triangle plein écran avec OGL (Renderer, Program, Mesh, Triangle). Toute la richesse vient du shader.

Trois couches superposées :

• Nébuleuse flowing — fBM (5 octaves) auto-warpé : on utilise la sortie du bruit comme coordonnée d'entrée du bruit suivant. Résultat : des courants fluides qui s'enroulent sur eux-mêmes plutôt qu'une texture statique qui scrolle.
• Déformation locale souris — smoothstep(0.55, 0.0, d) donne une influence radiale lisse autour du curseur, qui tire les UVs vers le pointeur comme une lentille.
• Chromatic aberration — trois échantillonnages du champ à des offsets opposés en X, un par canal RGB. Subtil au repos, prononcé près de la souris.

Détails techniques

• Palette — 4 arrêts : violet profond → violet → bleu électrique → lavande. Interpolés avec smoothstep sur des plages qui se recouvrent, pour un dégradé qui ne « marche » pas.
• Lissage de la souris — exponential smoothing indépendant du framerate (1 - exp(-dt * 6)). Le retard de ~100 ms donne cette sensation « lourde » et premium.
• Pause économe — IntersectionObserver arrête le RAF quand le canvas sort du viewport. Idem quand l'onglet est caché (document.hidden).
• Respect prefers-reduced-motion — uInfluence passe à 0, la souris ne déforme plus, la nébuleuse continue à flotter doucement.
• Nettoyage GL — WEBGL_lose_context.loseContext() à l'unmount pour libérer le contexte proprement.

Pile

• OGL — ~10 kB gzippé, API minimale, parfait pour un shader plein écran sans Three.js
• WebGL 1 (GLSL ES 1.0) — compatible mobile, pas de dépendance à WebGL 2
• Vue 3 + TypeScript strict