<div class="container">
  <div class="eye">
    <div class="circle">
    
    </div>
  </div>
</div>
.conatiner {
  width: 800px;
}
.eye {
  width: 500px;
  height: 500px;
  background: #ff5b40;
  margin: 0 auto;
  position: relative;
}

.circle {
  width: 100px;
  height: 100px;
  border-radius: 100%;
  background: grey;
  position: absolute;
  left: 0; 
  top: 50%;
}
const eye = document.querySelector('.circle');
const container = document.querySelector('.eye');

const cursor = {x: 0, y: 0}; // координаты курсора
const position = {x: 0, y: 0}; // координаты круга



const width=500, height=500; // размер красного квадрата
const radius = 50; // радиус круга
const speedMultiplier = 0.03; // число в диаразоне [0:1], чем большетем быстрее круг догоняет курсор
let lastTime; // временная переменная для вычисления времени прошедшего между отрисовками кадров

document.addEventListener("mousemove", onMouseMove, false);

function onMouseMove(event){
  // вычисляем координаты курсора относительно красного квадрата
  const bounds = container.getBoundingClientRect();
  cursor.x = event.clientX - bounds.left;
  cursor.y = event.clientY - bounds.top;
}

function loop(timestamp, dt) {
  // вычисляем поправку в зависимости от времени, прошедшего 
  // с момента отрисовки предыдущего кадра
  const deltaTime = (timestamp - (lastTime??timestamp))/(1000/60);
  lastTime = timestamp;
  const multiplier = (speedMultiplier*deltaTime);

  // вектор (направление) от текущих координат круга до курсора
  const vector = {
    x: cursor.x-position.x, 
    y: cursor.y-position.y
  }; 

  // вычисляем новую позицию с учетом вектора на курсор, скорости и временной поправки
  position.x = position.x + vector.x*multiplier;
  position.y = position.y + vector.y*multiplier;
  
  // проверяем не вышла ли позиция за пределы красного квадрата
  if(position.x<0) position.x = 0;
  if(position.x>width-radius*2) position.x = width-radius*2;

  if(position.y<0) position.y = 0;
  if(position.y>height-radius*2) position.y = height-radius*2;

  // выставляем круг в новую позицию
  eye.style.left = Math.floor(position.x).toString()+'px';
  eye.style.top = Math.floor(position.y).toString()+'px';

  window.requestAnimationFrame(loop);
}

window.requestAnimationFrame(loop);


External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js