<h1>Linear Mapping</h1>
<a href="https://css.land/ranges/" target="_blank">CSS Ranges</a>

const root = document.documentElement;

function updateCursor(event) {
  const x = event.clientX / window.innerWidth;
  const y = event.clientY / window.innerHeight;

  root.style.setProperty('--x', x.toFixed(5));
  root.style.setProperty('--y', y.toFixed(5));
}

root.style.setProperty('--x', '0.5');
root.style.setProperty('--y', '0.5');

window.addEventListener('pointermove', updateCursor);