JSFiddle - React, Tailwind, and code Playground

by Katarn

HTML

<div id="display">
  Los estilos solo son para que veas el area que debería dar siempre 0, Mueve el ratón!
</div>

CSS

body {
  margin: 0;
  display: grid;
  width: 100vw;
  height: 100vh;
  place-items: center;
}

#display {
  width: 80vw;
  height: 80vh;
  background: crimson;
}

JavaScript

let display = document.querySelector('#display');

onmousemove = (event) => {
	const porcentajeZona0 = 0.8;
  
	const zona0X = (window.innerWidth / 2) * porcentajeZona0;
  const posicionRespectoCentroX = event.clientX - (window.innerWidth / 2);
  const desplazamientoFueraDe0X = Math.max(Math.abs(posicionRespectoCentroX) - zona0X, 0) * Math.sign(posicionRespectoCentroX);
  
  const zona0Y = (window.innerHeight / 2) * porcentajeZona0;
  const posicionRespectoCentroY = event.clientY - (window.innerHeight / 2);
  const desplazamientoFueraDe0Y = Math.max(Math.abs(posicionRespectoCentroY) - zona0Y, 0) * Math.sign(posicionRespectoCentroY);
  
  display.innerHTML = `${desplazamientoFueraDe0X} * ${desplazamientoFueraDe0Y}`;
};