Custom Cursor

<div class="stage" id="stage">
  <p class="word" id="word">Hover this</p>
  <div class="ring" id="ring"></div>
  <div class="dot2" id="dot2"></div>
</div>

.stage{position:absolute;inset:0;cursor:none;display:grid;place-items:center}
.word{font-size:clamp(15px,5.6vmin,24px);font-weight:700;color:var(--fg);letter-spacing:-.02em;user-select:none;margin:0}
.ring{position:absolute;left:0;top:0;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;
  border:2px solid var(--accent);pointer-events:none;z-index:20;
  transition:width .18s,height .18s,margin .18s,background .18s}
.ring.hover{width:58px;height:58px;margin:-29px 0 0 -29px;background:color-mix(in srgb,var(--accent) 16%,transparent)}
.dot2{position:absolute;left:0;top:0;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:var(--accent);
  pointer-events:none;z-index:21}

let auto=true;
addEventListener('pointerdown',()=>{auto=false;},{capture:true});
addEventListener('pointermove',()=>{auto=false;},{capture:true});
const ring=document.getElementById('ring');
const dot=document.getElementById('dot2');
const word=document.getElementById('word');
function place(x,y){
  ring.style.transform='translate('+x+'px,'+y+'px)';
  dot.style.transform='translate('+x+'px,'+y+'px)';
  const r=word.getBoundingClientRect();
  ring.classList.toggle('hover', x>r.left&&x<r.right&&y>r.top&&y<r.bottom);
}
let t=0;
(function loop(){
  if(auto){
    t+=0.02;
    place(innerWidth/2+Math.sin(t)*innerWidth*0.38, innerHeight/2+Math.cos(t*1.6)*innerHeight*0.32);
  }
  requestAnimationFrame(loop);
})();
addEventListener('pointermove',e=>place(e.clientX,e.clientY));