コピペでOK！マウスの動きに合わせてデザインを移動させる方法

<div class="mouse"></div><!-- /.mouse -->

.mouse {
   width: 24px;
   height: 24px;
   background: red;
   border-radius: 50%;
   position: fixed;
   top: 0;
   left: 0;
   z-index: 10;
   pointer-events: none;
 }

// ".mouse" クラスを持つ最初の要素を取得して、変数 mouse に格納します。
const mouse = document.querySelector(".mouse");
// デバッグのため、mouse の内容をコンソールに出力します。
console.log(mouse);

// ウィンドウ上でマウスが動いたときに発火するイベントリスナーを設定します。
window.onmousemove = (e) => {
  // マウスの現在のX座標から、要素の幅の半分を引いて、要素の中心がカーソルに来るようにします。
  const x = e.clientX - mouse.offsetWidth / 2;
  // マウスの現在のY座標から、要素の高さの半分を引いて、同じく要素の中心がカーソルに来るようにします。
  const y = e.clientY - mouse.offsetHeight / 2;

  // translate CSSプロパティを用いて要素を移動させるためのオブジェクトです。
  const mouseMoveStyle = {
    transform: `translate(${x}px,${y}px)`, // X軸とY軸に沿って要素を動かすスタイルを設定
  };

  // X座標とY座標をコンソールに出力します（デバッグ用）。
  console.log(x);
  console.log(y);

  // mouse 変数に格納された要素にアニメーションを適用します。
  // 第一引数はアニメーションのキーフレーム（ここでは移動のスタイル）、
  // 第二引数はアニメーションのオプションです。
  mouse.animate(mouseMoveStyle, {
    duration: 1000, // アニメーションの継続時間は1000ミリ秒（1秒）
    fill: "forwards", // アニメーションが完了した後も要素を最終状態に保持します
  });
};