マウスストーカー requestAnimationFrame

#rectangle {
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: rgba(255, 0, 0, 0.5);
}

#circle {
  position: absolute;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: rgba(0, 255, 0, 0.5);
}

<div id="rectangle"></div>
<div id="circle"></div>

const rectangle = document.getElementById("rectangle");
const circle = document.getElementById("circle");

let mouseY = 0;
let mouseX = 0;
let circleY = 0;
let circleX = 0;

document.addEventListener("mousemove", (e) => {
  console.dir(e);
  mouseY = e.clientY;
  mouseX = e.clientX;
  rectangle.style.top = `${e.clientY}px`;
  rectangle.style.left = `${e.clientX}px`;
});

circleMove();

function circleMove() {
  requestAnimationFrame(circleMove);

  circleY += (mouseY - circleY) * 0.01;
  circleX += (mouseX - circleX) * 0.03;

  circle.style.transform = `translate(${circleX}px,${circleY}px)`;
}

requestAnimationFrame()メソッドは再描画の前に関数の呼び出しを要求する命令。
一般的なディスプレイでは１秒間に60回画面が更新される
requestAnimationFrame()メソッドは一度しか呼び出されないので、関数の中で自身を呼び出すことが必要。setTimeout()メソッドと一緒。