Micro-interacciones premium: botones magnéticos y más

Los efectos grandes impresionan; los pequeños ENAMORAN. Un botón que "persigue" tu cursor, un cursor personalizado que flota con retraso, una imagen que reacciona al pasar por encima: son detalles minúsculos que hacen que un sitio se sienta de otra liga. GSAP los hace fáciles gracias a su interpolación suave. Hoy sumas las micro-interacciones que distinguen a los sitios premiados.

El botón magnético

Mueve el cursor sobre el botón y siéntelo "seguirte", y sácalo para ver el rebote elástico al volver. Toda la magia está en dos cosas: mover una FRACCIÓN de la distancia (* 0.4) para que sea sutil, y el ease: "elastic.out" en el regreso. Nota el guard de reduced-motion: para quien lo pidió, el botón se queda quieto (es puro adorno de movimiento).

Cursor personalizado con retraso

Un cursor custom es un div que sigue al mouse — y el toque premium es que lo siga con un pequeño RETRASO, creando una estela suave:

const cursor = document.querySelector(".cursor");   // un div redondo, position: fixed

window.addEventListener("pointermove", (e) => {
// el 'duration' crea el retraso: el cursor "persigue" al mouse, no salta
gsap.to(cursor, { x: e.clientX, y: e.clientY, duration: 0.3, ease: "power2.out" });
});

// crece sobre elementos interactivos
document.querySelectorAll("a, button").forEach((el) => {
el.addEventListener("pointerenter", () => gsap.to(cursor, { scale: 2.5, duration: 0.3 }));
el.addEventListener("pointerleave", () => gsap.to(cursor, { scale: 1, duration: 0.3 }));
});

El duration: 0.3 es el truco: sin él, el div saltaría instantáneo a la posición del mouse (aburrido); con él, lo persigue con inercia — la estela suave de los sitios premium. Nota de accesibilidad: un cursor custom debe COMPLEMENTAR, no reemplazar, el cursor real de forma que rompa la usabilidad; y respeta reduced-motion.

Hover distorsionado: la nota honesta

El efecto de imágenes que se "derriten" o distorsionan al pasar el cursor —muy visto en Awwwards— es de otra categoría técnica: usa WebGL y shaders (programación de la GPU), normalmente con librerías como three.js o hover-effect/curtains.js. GSAP anima los PARÁMETROS de esos shaders, pero la distorsión en sí no es GSAP ni CSS. Nota honesta: queda fuera del alcance de este módulo (el 3D con shaders es el curso SC-13, "3D en la Web"). Sabe que existe, sabe que es WebGL, y no lo confundas con algo que resuelvas con un tween — es un mundo aparte que este curso te deja preparado para explorar.

Mini-reto

Añade a "El Observador" un botón magnético de "Suscríbete" (con su guard de reduced-motion) y experimenta con el factor: 0.2 (apenas coquetea), 0.5 (muy magnético), y con el ease del regreso (back.out vs elastic.out(1, 0.2)). Encuentra el punto donde se siente "vivo pero usable". Ese calibrado fino es exactamente el trabajo de un desarrollador de front-end premium.

Qué sigue

Última pieza antes del proyecto: unir GSAP con lo que dibujaste en el módulo 12. La próxima lección coreografía SVG con GSAP —logos que se ensamblan, trazos que se dibujan con control total, iconos que cobran vida—. El vector y el motor de animación, juntos.