La idea
Hay dos capas del mismo texto: una base suave (siempre visible) y una capa de
“luz” encima. Esa luz no es un color sólido: es un degradado radial centrado en
--mx / --my. Al cliparlo al texto, solo se ve el color
donde están las letras — y se mueve con el cursor.
El CSS
.luz{
position: absolute; inset: 0;
background: radial-gradient(
var(--glow, 110px) circle at var(--mx) var(--my),
var(--acento), transparent 70%
);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
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é se siente “premium”
El ojo lee el color como si el cursor iluminara la marca. Es el mismo principio del spotlight de tarjeta, pero aplicado a tipografía: perfecto para logos, títulos de hero y CTAs de texto.