CÓMO OCULTAR EL CURSOR DEL RATÓN TRAS INACTIVIDAD CON JAVASCRIPT

Una manera de mejorar la experiencia en proyectos web, especialmente en juegos, visores de imágenes, vídeos, presentaciones o aplicaciones fullscreen. Una de las mejores formas es ocultar el cursor del ratón cuando el usuario está inactivo. Este pequeño detalle hace que la interfaz se sienta más limpia, inmersiva y profesional.

¿Cómo funciona?

Detectar cuando el usuario mueve el ratón.
Si pasa un tiempo sin moverse, se oculta el cursor.
En cuanto se vuelve a mover, mostralo nuevamente.

Código de ejemplo

    let timeout;
    const TIEMPO = 3000; //Tiempo para detectar la inactividad (3 segundos)

    const estado = document.getElementById('estado');

    function actualizarEstado(activo) {
 estado.textContent = activo ? 'Estado: Activo' : 'Estado: Inactivo (cursor oculto)';
 estado.style.color = activo ? '#0f0' : '#f00';
    }

    document.addEventListener('mousemove', () => {
 actualizarEstado(true);
 document.documentElement.style.cursor = 'default';
 
 clearTimeout(timeout);
 
 timeout = setTimeout(() => {
   document.documentElement.style.cursor = 'none';
   actualizarEstado(false);
 }, TIEMPO);
    });