Cursor personalizado con lag y botones magnéticos que se atraen al cursor. Dos efectos clave de landings premium.
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)" })
})