//- h1 💩 
h1 ♥

*
  margin: 0
  border: 0
  box-sizing: border-box
html,
body
  height: 100%
  width: 100%
  text-align: center
  font-family: 'Aclonica', sans-serif
  letter-spacing: 3px
  display: flex
  justify-content: center
  align-items: center
  h1
    font-size: 200px
    color: transparent
    user-select: none   
    text-shadow: 0 0 0 rgba(255, 0, 0, 0.2)

const $ = document.querySelector.bind(document);
const MAX = 50;

function shadow(e) {
  const { offsetWidth: width, offsetHeight: height } = $('body');
  let { offsetX: x, offsetY: y} = e;
  
  if (this !== e.target) {
    x = x + e.target.offsetLeft;
    y = y + e.target.offsetTop;
  }
  
  const xNow = Math.round((x / width * MAX) - (MAX / 2));
  const yNow = Math.round((y / height * MAX) - (MAX / 2));
  
  if ((xNow === 0) && (yNow === 0)) {
    $('h1').style.textShadow = `
    ${xNow}px ${yNow}px 0 rgba(255, 0, 0, 0.2)`;
    return;
  } 
  
  $('h1').style.textShadow = `
    ${xNow}px ${yNow}px 0 rgba(0, 255, 0, 0.2),
    ${xNow * -1}px ${yNow * -1}px 0 rgba(255, 255, 0, 0.2)
  `;
}

$('body').addEventListener('mousemove', shadow);