<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Custom cursor</title>
</head>
<body>
    
    <div class="mouse-follower"></div>
    <div class="mouse-follower-sibling"></div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.4/gsap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TimelineMax.min.js"></script>
</body>
</html>
html, 
body {
  cursor: none;
}

.mouse-follower,
.mouse-follower-sibling {
  position: fixed;
  z-index: 99;
  pointer-events: none;
  mix-blend-mode: difference;
}

.mouse-follower {
  width: 10px;
  height: 10px;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, .6);
  border-radius: 50%;
  border: 1px solid #f09e0a;
}

.mouse-follower-sibling {
  width: 70px;
  height: 70px;
  border: 1px solid rgba(0, 0, 0, .6);
  border-radius: 50%;
  top: -30px;
  left: -30px;
}
(() => {
  const mouseFollower          = document.querySelector('.mouse-follower');
  const mouseFollowerSibling   = document.querySelector('.mouse-follower-sibling');

  if( mouseFollower && mouseFollowerSibling ) {
    window.addEventListener('mousemove', (e ) => {
      const mousePosition = {x: e.x, y: e.y };
      const shapeTl = gsap.timeline();
      shapeTl.to(mouseFollower, mousePosition, 0);
      shapeTl.to(mouseFollowerSibling, 1,{x: e.x, y: e.y, ease: Power2.easeIn}, '-=1');
    });
  }

})();
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.