&lt;div class=&quot;cursor-dot&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;cursor-tail&quot;&gt;&lt;/div&gt;

&lt;style&gt;
  body { cursor: none !important; }

  .cursor-dot {
    width: 8px;
    height: 8px;
    background: #000;
    border-radius: 50%;
    position: fixed;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 999999;
  }

  .cursor-tail {
    width: 22px;
    height: 22px;
    background: rgba(0,0,0,0.22);
    border-radius: 50%;
    position: fixed;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 999998;
  }
&lt;/style&gt;

&lt;script&gt;
document.addEventListener(&quot;DOMContentLoaded&quot;, function () {
  const dot = document.querySelector(&quot;.cursor-dot&quot;);
  const tail = document.querySelector(&quot;.cursor-tail&quot;);

  let mouseX = 0, mouseY = 0;
  let tailX = 0, tailY = 0;

  document.addEventListener(&quot;mousemove&quot;, e =&gt; {
    mouseX = e.clientX;
    mouseY = e.clientY;
    dot.style.left = mouseX + &quot;px&quot;;
    dot.style.top  = mouseY + &quot;px&quot;;
  });

  function animate() {
    // smoothing curve (lebih natural, tidak telat)
    tailX += (mouseX - tailX) * 0.25;
    tailY += (mouseY - tailY) * 0.25;

    tail.style.left = tailX + &quot;px&quot;;
    tail.style.top  = tailY + &quot;px&quot;;

    requestAnimationFrame(animate);
  }

  animate();
});
&lt;/script&gt;
