kirsten noraly pereira

.image-container { position: relative; width: 100%; overflow: hidden; } .image-container img { width: 100%; height: auto; display: block; } .magnet-button { position: absolute; top: 50%; left: 50%; width: 194px; /* Slightly smaller button */ height: 194px; background-color: white; border-radius: 50%; padding: 20px; font-size: 16px; text-align: center; cursor: pointer; display: flex; align-items: center; justify-content: center; transform: translate(-50%, -50%); transition: transform 0.2s ease; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); text-transform: uppercase; } document.addEventListener(‘DOMContentLoaded’, function () { const btn = document.querySelector(‘.magnet-button’); const container = document.querySelector(‘.image-container’); let centerX, centerY; function updateCenter() { const rect = container.getBoundingClientRect(); centerX = rect.left + rect.width / 2; centerY = rect.top + rect.height / 2; } updateCenter(); window.addEventListener(‘resize’, updateCenter); container.addEventListener(‘mousemove’, function (e) { const mouseX = e.clientX; const mouseY = e.clientY; const dx = mouseX – centerX; const dy = mouseY – centerY; const distance = Math.sqrt(dx * dx + dy * dy); const maxDistance = 300; // Extended range const maxOffset = 75; // Max offset in px (2–2.5 cm) if (distance 5) { // Avoid weird center snapping const angle = Math.atan2(dy, dx); const factor = (1 – distance / maxDistance); // Stronger closer to center const moveX = Math.cos(angle) * maxOffset * factor; const moveY = Math.sin(angle) * maxOffset * factor; btn.style.transition = ‘transform 0.1s ease-out’; btn.style.transform = `translate(calc(-50% + ${moveX}px), calc(-50% + ${moveY}px))`; } else if (distance <= 5) { // Small buffer zone at the exact center — don’t move btn.style.transition = 'transform 0.1s ease-out'; btn.style.transform = 'translate(-50%, -50%)'; } else { // Out of range, ease back btn.style.transition = 'transform 0.4s ease'; btn.style.transform = 'translate(-50%, -50%)'; } }); container.addEventListener('mouseleave', function () { btn.style.transition = 'transform 0.4s ease'; btn.style.transform = 'translate(-50%, -50%)'; }); container.addEventListener('mouseenter', function () { btn.style.transition = 'transform 0.2s ease'; }); });