追従グラデーションブロブカーソル

<p class="d08-06-11-hint">エリア内でマウスを動かしてください</p>
        <span class="d08-06-11-blob"></span>

.d08-06-11{cursor:none;background:#0f172a;overflow:hidden;}
        .d08-06-11-hint{color:#94a3b8;font-size:13px;pointer-events:none;user-select:none;}
        .d08-06-11-blob{position:absolute;width:64px;height:64px;margin-left:-32px;margin-top:-32px;left:0;top:0;pointer-events:none;opacity:0;
          background:linear-gradient(135deg,#818cf8,#f472b6);
          border-radius:60% 40% 55% 45% / 45% 55% 40% 60%;
          filter:blur(2px);
          animation:d1615morph 4s ease-in-out infinite;
        }
        @keyframes d1615morph{
          0%,100%{border-radius:60% 40% 55% 45% / 45% 55% 40% 60%}
          50%{border-radius:40% 60% 45% 55% / 55% 45% 60% 40%}
        }

(function(){
          var root=document.currentScript.parentElement.querySelector('.d08-06-11');
          var blob=root.querySelector('.d08-06-11-blob');
          var tx=0,ty=0,bx=0,by=0;
          root.addEventListener('mousemove',function(e){
            var r=root.getBoundingClientRect();
            tx=e.clientX-r.left; ty=e.clientY-r.top;
            blob.style.opacity=1;
          });
          root.addEventListener('mouseleave',function(){blob.style.opacity=0;});
          function loop(){
            bx+=(tx-bx)*0.12; by+=(ty-by)*0.12;
            blob.style.transform='translate('+bx+'px,'+by+'px)';
            requestAnimationFrame(loop);
          }
          loop();
        })();