Mouse Light + Magnetic Button

Kod

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-content: center;
  background: #04080f;
  color: #f2f7ff;
  font-family: "Avenir Next", sans-serif;
  overflow: hidden;
}
.back {
  position: fixed;
  top: 14px;
  left: 14px;
  color: #86e8ff;
  text-decoration: none;
  z-index: 10;
}
main {
  position: relative;
  z-index: 4;
  text-align: center;
}
h1 {
  margin: 0 0 1rem;
  font-size: clamp(1.8rem, 6vw, 3.2rem);
}
button {
  border: 0;
  border-radius: 999px;
  padding: .9rem 1.2rem;
  font-weight: 700;
  background: #86e8ff;
  color: #072131;
  cursor: pointer;
  transition: transform .15s;
}
.spot {
  position: fixed;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, #7ee7ff70 0%, transparent 70%);
  pointer-events: none;
  transform: translate(-50%, -50%);
}

if (!window.MotionPreference) {
  const __mql = window.matchMedia("(prefers-reduced-motion: reduce)");
  const __listeners = new Set();

  const MotionPreference = {
    prefersReducedMotion() {
      return __mql.matches;
    },
    setOverride(value) {
      const reduced = Boolean(value);
      document.documentElement.classList.toggle("reduced-motion", reduced);
      window.dispatchEvent(new CustomEvent("motion-preference", { detail: { reduced } }));
      for (const listener of __listeners) {
        try {
          listener({ reduced, override: reduced, systemReduced: __mql.matches });
        } catch {}
      }
    },
    onChange(listener) {
      __listeners.add(listener);
      try {
        listener({
          reduced: __mql.matches,
          override: null,
          systemReduced: __mql.matches,
        });
      } catch {}
      return () => __listeners.delete(listener);
    },
    getState() {
      return { reduced: __mql.matches, override: null, systemReduced: __mql.matches };
    },
  };

  window.MotionPreference = MotionPreference;
}

const reduced = window.MotionPreference.prefersReducedMotion();
const spot = document.getElementById("spot");
const magnet = document.getElementById("magnet");

if (reduced) {
  spot.style.display = "none";
} else {
  window.addEventListener("pointermove", (e) => {
    spot.style.left = `${e.clientX}px`;
    spot.style.top = `${e.clientY}px`;
  });

  magnet.addEventListener("pointermove", (e) => {
    const r = magnet.getBoundingClientRect();
    const dx = e.clientX - (r.left + r.width / 2);
    const dy = e.clientY - (r.top + r.height / 2);
    magnet.style.transform = `translate(${dx * 0.18}px, ${dy * 0.18}px)`;
  });

  magnet.addEventListener("pointerleave", () => {
    magnet.style.transform = "translate(0px, 0px)";
  });
}

<!doctype html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Demo 06 - Mouse Light + Magnetic</title><link rel="stylesheet" href="style.css" /></head>
<body>
<a class="back" href="../">Back</a>
<div class="spot" id="spot"></div>
<main>
  <h1>Mouse Light + Magnetic Button</h1>
  <button id="magnet">Hover Me</button>
</main>
<script src="script.js"></script>
    </body></html>

Mouse Light + Magnetic Button

Cursor spotlight and magnetic button hover interactions.

Source

Repository: libs-gen
Original demo id: 06-mouse-light-magnetic

Notes

Cursor spotlight and magnetic button hover interactions.