周りが暗くなくても使える、スポットライトのような光のぼやっとしたマウスストーカー

<div id="stkr-area">
  <div id="stkr"></div>
  <h1 style="color: #fff;">ここがマウスストーカー表示エリア</h1>
</div>

#stkr-area {
  background-color: #000;
  position: relative;
  /* これは不要コード */
  height: 200vh;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 不要コードここまで */
}
#stkr {
  position: absolute;
  top: 0;
  left: 0;
  background: radial-gradient(circle at center, rgba(255, 252, 246, 0.35) 0%, rgba(255, 252, 246, 0) 70%);
  transition: .2s;
  transition-timing-function: ease-out;
  z-index: 30;
  width: 400px;
  height: 400px;
}

$(document).ready(function(){
  const mouseStalker = $("#stkr");
  const mouseStalkerArea = $("#stkr-area");
  let scale = 1;

  // 初期状態ではマウスストーカーを非表示にする
  mouseStalker.hide();

mouseStalkerArea.on("mouseenter", function() {
    // エリアに入ったらマウスストーカーをフェードインで表示する
    mouseStalker.stop(true, true).fadeIn(300);
  }).on("mouseleave", function() {
    // エリアを出たらマウスストーカーをフェードアウトで非表示にする
    mouseStalker.stop(true, true).fadeOut(300);
  }).on("mousemove", function(e) {
    // マウスストーカーのサイズを取得
    let stalkerWidth = mouseStalker.outerWidth();
    let stalkerHeight = mouseStalker.outerHeight();

 // エリア内でのみマウスストーカーを動かす
    let x = e.clientX - (stalkerWidth / 2);
    let y = e.clientY - (stalkerHeight / 2);

    mouseStalker.css({
      "transform": "translate(" + x + "px," + y + "px) scale(" + scale + ")",
      "position": "fixed",
      "pointer-events": "none"
    });
  });
});