Feature 10 — Hover distortion
Scène de
Scène de
théâtre
Passez la souris sur l'image pour activer la distorsion. Choisissez le mode de déformation ci-dessous — vague, glitch ou lentille.
Approchez la souris de l'image
Répétition I
Répétition II
Répétition III
L'image
se liquéfie
La distorsion est obtenue via des filtres SVG natifs — feTurbulence + feDisplacementMap. Aucune librairie, aucun canvas WebGL. Ça fonctionne directement dans le DOM.
L'intensité est interpolée en JS selon la position de la souris dans le cadre — au centre l'effet est fort, aux bords il se dissipe.
Note technique
feTurbulence génère un bruit de Perlin. feDisplacementMap déplace chaque pixel selon les canaux R et G de ce bruit. La valeur scale est interpolée de 0 à 30+ via requestAnimationFrame au survol.