I have created a cursor using html, css and javascript which is built on this website now the problem is the cursor is moving but not scaling

I have created a cursor using html, css and javascript which is built on this website now the problem is the cursor is moving but not scaling like on this website scale down with cursor movement I want the cursor to move on this website along with scaling down. How can I make it?

document.addEventListener("DOMContentLoaded", function() {
    const cursor = document.querySelector(".custom-cursor");

    document.addEventListener("mousemove", function(e) {
        const x = e.clientX;
        const y = e.clientY;

        cursor.style.transform = `translate(${x}px, ${y}px)`;
    });
});

body {
    cursor: none; /* Hide the default cursor */
    margin: 0;
    overflow: hidden;
}

.custom-cursor {
    position: fixed;
    width: 20px;
    height: 20px;
    background-color: #ff0000; /* Choose your desired color */
    border-radius: 50%;
    pointer-events: none;
    transition: transform 0.2s ease-out;
    transform-origin: center;
}

<body>
    <div class="custom-cursor"></div>
</body>

Solution

Something like this perhaps? Can be a bit glitchy though

document.addEventListener("DOMContentLoaded", function() {
  const cursor = document.querySelector(".custom-cursor");
  let timeout = null;
  document.addEventListener("mousemove", function(e) {
    const x = e.clientX;
    const y = e.clientY;

    cursor.style.transform = `translate(${x}px, ${y}px) scale(0.8)`;
    clearTimeout(timeout);
    timeout = setTimeout(() => {
      cursor.style.transform = `translate(${x}px, ${y}px) scale(1.0)`;
    }, 100);
  });
});

body {
  cursor: none;
  /* Hide the default cursor */
  margin: 0;
  overflow: hidden;
}

.custom-cursor {
  position: fixed;
  width: 20px;
  height: 20px;
  background-color: #ff0000;
  /* Choose your desired color */
  border-radius: 50%;
  pointer-events: none;
  transition: transform 0.2s ease-out;
  transform-origin: center;
}

<div class="custom-cursor"></div>