<div class="demo"></div>

* {
  margin: 0;
  padding: 0;
}

body {
  overflow: hidden;
}

.demo {
  height: 100vh;
  width: 100vw;
  background-color: cornflowerblue;
  overflow: hidden;
}

.demo:before {
  --ballWidth: 3em;
  content: '';
  display: block;
  position: absolute;
  top: calc((100% * var(--mouse-y)) - (var(--ballWidth) * .5));
  left: calc((100% * var(--mouse-x)) - (var(--ballWidth) * .5));
  height: var(--ballWidth);
  width: var(--ballWidth);
  background-color: white;
  border-radius: var(--ballWidth);
}

var rootEl = document.documentElement;

document.addEventListener('mousemove', e => {
	let x = e.clientX / innerWidth;
	let y = e.clientY / innerHeight;

	rootEl.style.setProperty('--mouse-x', x);
	rootEl.style.setProperty('--mouse-y', y);
});