Cours de
yoga
Approchez la souris des boutons — ils s'attirent vers elle dans un rayon d'attraction de 120px, puis reprennent leur place en douceur quand vous vous éloignez.
L'attraction
comme invitation
Les boutons magnétiques créent une réactivité physique de l'interface. L'utilisateur ressent que l'élément "veut" être cliqué — c'est un micro-signal d'engagement qui augmente le taux de clics sur les CTA importants.
Fonctionne uniquement sur desktop (détection souris). Sur mobile, les boutons se comportent normalement.
Note technique
À chaque mousemove, on calcule la distance entre la souris et le centre du bouton via getBoundingClientRect(). En deçà de 120px, un transform: translate() proportionnel à l'écart (facteur 0.35) est appliqué. mouseleave remet à zéro avec une transition cubic-bezier(0.16, 1, 0.3, 1) pour un retour élastique.