Cursor + Magnetic Buttons

Cursor personalizado con lag y botones magnéticos que se atraen al cursor. Dos efectos clave de landings premium.

Cursor con hover
Magnetic buttons

Acerca el cursor a los botones morados y verdes

Código
// Cursor con lag
window.addEventListener("mousemove", (e) => {
  gsap.to(cursor, {
    x: e.clientX,
    y: e.clientY,
    duration: 0.5,
    ease: "power3.out"
  })
})

// Magnetic button
btn.addEventListener("mousemove", (e) => {
  const rect = btn.getBoundingClientRect()
  const centerX = rect.left + rect.width / 2
  const centerY = rect.top + rect.height / 2
  const deltaX = (e.clientX - centerX) * 0.4
  const deltaY = (e.clientY - centerY) * 0.4

  gsap.to(btn, {
    x: deltaX,
    y: deltaY,
    duration: 0.3,
    ease: "power2.out"
  })
})

btn.addEventListener("mouseleave", () => {
  gsap.to(btn, { x: 0, y: 0, duration: 0.5, ease: "elastic.out(1, 0.4)" })
})