JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.0.1/gsap.min.js"></script>
<svg class="svgball">
  <circle id="ball" cx="100" cy="100" r="25" fill="#555555"  class="cball c1"/>
  <circle cx="100" cy="100" r="25" fill="none" stroke-dasharray="7" stroke="#000000" stroke-width="2" class="cball c2"/>
</svg>
<div class="wrap">
<div class="box">HOVER</div>
  </div>

CSS

body{
  overflow-x: hidden;
  overflow-y: scroll;
  margin: 0;padding: 0;
  cursor:none;
}
.svgball {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.5;
    z-index: 5000;
    pointer-events: none;
}

.box {
	background: red;
	width: 30vw;
	height: 30vw;
	margin:auto;
	top:0;bottom:0;right:0;left:0;
	position: fixed;
}

.wrap	{
	width: 100%;height: 100%;
	position: absolute;
}

.c2 {
	opacity: 0;;
}

JavaScript

gsap.defaults({
	overwrite: true
})

var ease = 0.3;
var ball = $(".cball");
var pos = { x: 0, y: 0 };
var mouse = { x: 0, y: 0 };

$(window).mousemove(function(e){  
  mouse.x = e.clientX;
  mouse.y = e.clientY;
}).mousedown(function() {
    gsap.to('.c1', {duration:0.3, attr:{r:18}});
  }).mouseup(function() {
    gsap.to('.c1', {duration:0.3,attr:{r:25}});
  });


$('.box').mousemove(function() {
    gsap.to('.c1', {duration:0.3,attr:{r:18}});
		 gsap.to('.c2', {duration:0.3,opacity:1});
  }).mouseleave(function() {
    gsap.to('.c1',{duration:0.3,attr:{r:25}});
		gsap.to('.c2', {duration:0.3,opacity:0});
  });


gsap.ticker.add(update);

function update() {
  pos.x += (mouse.x - pos.x) * ease;
  pos.y += (mouse.y - pos.y) * ease;
  
  ball.attr("cx", pos.x);
  ball.attr("cy", pos.y);
}