1<ul style="--total: 5;">
2  <li style="--index: 0"></li>
3  <li style="--index: 1"></li>
4  <li style="--index: 2"></li>
5  <li style="--index: 3"></li>
6  <li style="--index: 4"></li>
7</ul>

1const sync = ({ x, y }) => {
2  document.documentElement.style.setProperty('--x', x.toFixed(2))
3  document.documentElement.style.setProperty('--y', y.toFixed(2))
4}
5document.body.addEventListener('pointermove', UPDATE)