Basic Custom Cursor

<script src="https://cdn.jsdelivr.net/npm/gsap@3.15/dist/gsap.min.js"></script>

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

.cursor {
  z-index: 100;
  background-color: #ff4c24;
  border: 1px solid #ff4c24;
  border-radius: 100em;
  width: 1em;
  height: 1em;
  transition: background-color .375s cubic-bezier(.625, .05, 0, 1), height .375s cubic-bezier(.625, .05, 0, 1), width .375s cubic-bezier(.625, .05, 0, 1);
  position: fixed;
  inset: 0% auto auto 0%;
  pointer-events: none;
}

body:has( a:hover) .cursor,
body:has( button:hover) .cursor,
body:has( [data-cursor]:hover) .cursor{
  width: 3em;
  height: 3em;
  background-color: rgba(255, 76, 36, 0.3);
}

@media (hover: none) and (pointer: coarse) {
  .cursor {
    display: none;
  }
}

function initBasicCustomCursor() {  
  
  gsap.set(".cursor", {xPercent:-50, yPercent: -50});

  let xTo = gsap.quickTo(".cursor", "x", {duration: 0.6, ease: "power3"});
  let yTo = gsap.quickTo(".cursor", "y", {duration: 0.6, ease: "power3"});

  window.addEventListener("mousemove", e => {
    xTo(e.clientX);
    yTo(e.clientY);
  });
}

// Initialize Basic Custom Cursor
document.addEventListener('DOMContentLoaded', () => {
  initBasicCustomCursor();
});