lab Home
09

Cursor mask reveal — un calque caché révélé sous le curseur

GSAP / clip-path

Chargement de la démo…

Déplacez le curseur sur la zone (au doigt, le cercle se balade seul).

Le visiteur « découvre » un second message en explorant : idéal pour un avant/après ou une signature.

Intensité
Performance
Léger
Mobile
Le cercle se déplace tout seul en boucle.
Accessibilité
Cercle fixe au centre.
Idéal pour
PortfolioArtiste / musiqueAvant / après (rénovation, beauté)Agence

Featured :

  1. 1.Deux calques superposés ; celui du dessus est découpé par clip-path: circle(var(--r) at var(--x) var(--y))
  2. 2.Position lissée par gsap.quickTo(pos, 'x', { duration: 0.6, ease: 'power3.out', onUpdate }) : le cercle « traîne » derrière le curseur
  3. 3.Le rayon grossit à l’entrée et se referme à la sortie : gsap.to(pos, { r: 160, ease: 'expo.out' })
  4. 4.Sans souris : boucle automatique sur une ellipse, gsap.to(pos, { t: Math.PI * 2, repeat: -1, ease: 'none' })
Next