im making a circle follow the cursor which is working fine but how do i add a smoother effect and avoid the circle going out of the page

I have made a circle that follows the cursor using jquery which works fine but i want to give it a smoother effect, i have tried using timeout but that wont work which is kinda obvious so is there any other way to achieve this ?

Also whenever the cursor is close to the border of the webpage or crosses it the circle also goes outside the webpage creating a scrollbar can this be avoided by any way ?

My code –

var mouseX = 0, mouseY = 0;
  var xp = 0, yp = 0;
  let mouseMovementStoppedTimer;
  const mouseMovementStopped = function() {
  $("#circlecc").css({ opacity: 0});
 }  

  $(document).mousemove(function(e){
    
    $("#circlecc").css({opacity: 1}) 
    mouseX = e.clientX - 12;
    mouseY = e.clientY - 12;
    setTimeout(() => {
    $("#circlecc").css({left: mouseX +'px', top: mouseY +'px'});
    }, 50)
    clearTimeout(mouseMovementStoppedTimer);
    mouseMovementStoppedTimer = setTimeout(mouseMovementStopped, 120);
  });

My Website