커서 트레일

<div class="stage" id="stage"></div>

.stage{position:absolute;inset:0;cursor:none;background:
  radial-gradient(60% 60% at 30% 30%, color-mix(in srgb,var(--accent) 14%,transparent), transparent 65%)}
.tdot{position:absolute;left:0;top:0;border-radius:50%;pointer-events:none}

let auto=true;
addEventListener('pointerdown',()=>{auto=false;},{capture:true});
addEventListener('pointermove',()=>{auto=false;},{capture:true});
const stage=document.getElementById('stage');
const N=10;
const dots=[];
for(let i=0;i<N;i++){
  const p=i/(N-1);
  const d=document.createElement('div');
  d.className='tdot';
  const size=10-p*6;
  d.style.width=d.style.height=size+'px';
  d.style.margin=(-size/2)+'px 0 0 '+(-size/2)+'px';
  d.style.opacity=String(1-p*0.75);
  d.style.background='color-mix(in srgb, var(--accent) '+Math.round(100-p*70)+'%, var(--accent-2) '+Math.round(p*70)+'%)';
  stage.appendChild(d);
  dots.push({el:d,x:innerWidth/2,y:innerHeight/2});
}
let mx=innerWidth/2, my=innerHeight/2, t=0;
function update(){
  let px=mx, py=my;
  dots.forEach(d=>{
    d.x += (px-d.x)*0.45;
    d.y += (py-d.y)*0.45;
    d.el.style.transform='translate('+d.x+'px,'+d.y+'px)';
    px=d.x; py=d.y;
  });
}
(function loop(){
  if(auto){
    t+=0.02;
    mx=innerWidth/2+Math.sin(t)*innerWidth*0.38;
    my=innerHeight/2+Math.cos(t*1.7)*innerHeight*0.32;
  }
  update();
  requestAnimationFrame(loop);
})();
addEventListener('pointermove',e=>{ mx=e.clientX; my=e.clientY; });