Center Custom Cursor

Question

I created a custom cursor that follows the mouse. I would like to have the custom circle grow larger when hovered over links. The problem that I am having is that when the circle animates to a larger circle, it no longer is centered to the cursor. I'm not too sure how to keep the custom circle centered as it grows in size. The code below is the JS used to have the custom circle follow the cursor. Thank you in advance!

let clientX = -100;
let clientY = -100;
const innerCursor = document.querySelector(".cursor--small");

const initCursor = () => {

  document.addEventListener("mousemove", e => {
    clientX = e.clientX;
    clientY = e.clientY;
  });
  

  const render = () => {
    innerCursor.style.transform = `translate(${clientX}px, ${clientY}px)`;

    requestAnimationFrame(render);
  };

  requestAnimationFrame(render);
};

initCursor();

Answer 1

It's not possible to programmatically move the user's cursor. You can lock it into a position, but that would create a bad UX and is probably problematic in other ways (cross browser issues).

https://stackoverflow.com/a/19870963/1772933

I would suggest creating a larger 'hit' area for the hover using styles.

a.cursor-thing{
display:inline-block;
padding:20px;
margin:-20px;
}

a.cursor-thing:hover{
background:#f00;
}

Here is a sentence where you can <a href='#' class='cursor-thing'>hover over me</a> or even  <a href='#' class='cursor-thing'>hover over me</a>.