La idea
El navegador no sabe dónde está tu cursor dentro de un elemento… hasta que se lo
decimos. Guardamos su posición en dos variables CSS (--mx,
--my) y las usamos como centro de un degradado radial. Al moverte,
el degradado se recoloca solo.
zona.style.setProperty('--mx', x + 'px'); zona.style.setProperty('--my', y + 'px');
El CSS
El foco es un radial-gradient centrado en esas variables. Su tamaño también es una variable, la del slider (160px).
.foco{
position:absolute; inset:0;
background:radial-gradient(
var(--foco, 160px) circle at var(--mx) var(--my),
#17a2b8, transparent 62%);
}
El JavaScript
zona.addEventListener('mousemove', e => {
const r = zona.getBoundingClientRect();
zona.style.setProperty('--mx', (e.clientX - r.left) + 'px');
zona.style.setProperty('--my', (e.clientY - r.top) + 'px');
});
Por qué mola este método
Toda la animación la hace el CSS; el JS solo actualiza dos números. Es rapidísimo y la misma técnica sirve para bordes que brillan, sombras que siguen al mouse o efectos “glow” en botones.