<div class="section">
    <div class="text-container">
      <h1
        ref="textElement"
        class="hover-text"
        @mousemove="handleMouseMove"
        @mouseleave="handleMouseLeave"
      >
        sometext
      </h1>
    </div>
  </div>

.section {
  background: #101011;
}
.text-container {
  padding: 20px;
  margin: 0 auto;
  width: 100%;
}

.hover-text {
  font-size: 90px;
  font-weight: 900;
  text-align: center;
  background: linear-gradient(0deg, #121314 14.48%, #151618 79.34%)
  linear-gradient(0deg, #121314 14.48%, #151618 79.34%)
  linear-gradient(0deg, #121314 14.48%, #151618 79.34%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1;
  text-transform: uppercase;
  position: relative;
  cursor: default;
  user-select: none;
}

let textElement=document.querySelector('.section h1');

var rects=[], last=false,  topx=0,topy=0;

function _2css(x){
  if(!x || !x[0]) return '';
  let f=x[2].toString(16);
  if(f.length==1)f='0'+f;
  return `
    radial-gradient(
      circle at ${x[0]}px ${x[1]}px,
      #88A2F6${f} 0px,
      transparent 60px
    ),`;
}

// ставим bg в нужном элементе
function setbg(){
  let bg='';
  for(let x of rects){
    bg+=_2css(x)
  }

  textElement.style.background = _2css(last)+bg+`
    linear-gradient(0deg, #121314 14.48%, #151618 79.34%)
  `
  textElement.style.webkitBackgroundClip = 'text'
  textElement.style.webkitTextFillColor = 'transparent'
}

setInterval(()=>{
  // добавляем хвост, если заметно сдвинулись
  if(last && Math.max(Math.abs(topx-last[0]),Math.abs(topy-last[1]))>30){
    topx=last[0];topy=last[1];
    rects.unshift(last);
 }
  // убираем слишком длинный хвост
  if(rects.length>30) rects.pop();
  // меняем опасити до 0, после чего чистим элемент массива
  let cnt=0;
  for(let x in rects){ /// уменьшаем опасити до 0
    if(rects[x][2]<10)
      rects.splice(x, 1);
    else {
      rects[x][2]-=10;
    }
  }
  setbg();
 // console.log(rects);
},50);// угасание идет за 25 тиков интервала - 1,25 сек
textElement.addEventListener("mouseleave", (event) => {
  last=false;
});
textElement.addEventListener("mousemove", (e) => {
  const rect = textElement.getBoundingClientRect()
  last=[e.clientX - rect.left,e.clientY - rect.top,255];
  setbg();
});