Patterns Easy
Mouse Light + Magnetic Button
Cursor spotlight and magnetic button hover interactions.
Open in Lab
MCP
pointer-events ui-interaction
Targets: JS HTML
Code
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.