<section>
  <h1 class="interactable">Simple Mouse Trailer</h1>
  <div class="trailer" id="trailer"></div>
</section>

html, body {
  margin: 0;
  padding: 0;
}

section {
  width: 100%;
  height: 100vh;
  background: #1D1E22;
  display: flex;
  justify-content: center;
  align-items: center;
  
  h1 {
    margin: 0;
    color: #ffffff;
  }
}

.trailer {
  height: 10px;
  width: 10px;
  border-radius: 50%;

  position: fixed;
  left: 0px;
  top: 0px;
  z-index: 1000000;
  
  background: #ffffff;
  mix-blend-mode: difference;
  pointer-events: none;
}

const trailer = document.getElementById("trailer");

const animateTrailer = (e, interacting) => {
  const x = e.clientX - trailer.offsetWidth - 10;
  const y = e.clientY - trailer.offsetHeight - 10;
  const offSetCorrection = 15;

  const keyframes = {
    transform: `translate(
                  ${interacting ? x + offSetCorrection : x}px, 
                  ${interacting ? y + offSetCorrection : y}px) 
                  scale(${interacting ? 5 : 1})`
  };

  trailer.animate(keyframes, {
    duration: interacting ? 500 : 1000,
    fill: "forwards"
  });
};

window.onmousemove = (e) => {
  const interactable = e.target.closest(".interactable"),
    interacting = interactable !== null;
  animateTrailer(e, interacting);
};