html

<div class="change-cursor-area">
  <div class="cursor-left">
    <div class="cursor-one"></div>
  </div>
  <div class="cursor-right">
    <div class="cursor-two"></div>
  </div>
</div>

JavaScript

//指定エリアでマウスポインタを変更する関数 target:表示エリア, pointer:表示させたいポインタ
const changeCursor = (target, pointer) => {
  // ポインターを持たないデバイスではアニメーションを実行しない
  if (!window.matchMedia("(pointer: fine)").matches) {
    return;
  }

  // 自作ポインターを表示させる対象が存在しない場合はアニメーションを実行しない
  const pointerArea = document.querySelector(target);
  if (pointerArea.length === 0) {
    return;
  }

  //表示させるポインタ養素
  const targetPointer = document.querySelector(pointer);

  // 自作ポインターを表示させるエリアに入った場合
  pointerArea.addEventListener("mouseenter", function () {
    targetPointer.classList.add("is-active");
  });
  // 自作ポインターを表示させるエリアから外れた場合
  pointerArea.addEventListener("mouseleave", function () {
    targetPointer.classList.remove("is-active");
  });
  // 自作ポインターを表示させるエリアを移動している間はポインター要素のスタイルを更新し続ける
  pointerArea.addEventListener("mousemove", function (event) {
    targetPointer.style.top = event.clientY + "px";
    targetPointer.style.left = event.clientX + "px";
  });
};

//関数呼び出し target:表示エリア, pointer:表示させたいポインタ
changeCursor(".cursor-left", ".cursor-one");
changeCursor(".cursor-right", ".cursor-two");

scss

.change-cursor-area {
  width: 100%; // 希望のカーソル表示エリア横幅
  height: 100vh; // 希望のカーソル表示エリア縦幅
  display: flex; // デバッグ用flex
  .cursor-left {
    width: 50%; // 希望のカーソル表示エリア横幅
    height: 100%; // 希望のカーソル表示エリア縦幅
    border: 1px solid #333; // デバッグ用border
    cursor: none; //自作カーソルを表示させている間はデフォルトのカーソルを非表示
    .cursor-one {
      visibility: hidden; // 自作カーソルを非表示
      opacity: 0; // 自作カーソルを非表示
      position: fixed; // ポインターの座標に合わせてfixさせる
      z-index: 10; // 希望のz-index
      transform: scale(0) translateY(-50%) translateX(-50%); // 自作カーソルはカーソルを中心にして横幅・縦幅をとる(scaleはアニメーション用)
      height: 160px; // 希望の自作カーソル縦幅
      width: 160px; // 希望の自作カーソル横幅
      transition: transform 0.3s, opacity 0.3s, visibility 0.3s; // transitionはアニメーションさせる箇所のみ指定しないとカーソル追従にまでtransitionがかかる
      pointer-events: none;
      background-color: green;
      &.is-active {
        opacity: 1;
        visibility: visible;
        transform: scale(1) translateY(-50%) translateX(-50%); // アニメーション用scale
      }
    }
  }
  .cursor-right {
    width: 50%;
    height: 100%;
    border: 1px solid #333;
    cursor: initial; //自作カーソルを表示させている間もデフォルトのカーソルを表示する場合
    .cursor-two {
      visibility: hidden; // 自作カーソルを非表示
      opacity: 0; // 自作カーソルを非表示
      position: fixed; // ポインターの座標に合わせてfixさせる
      z-index: 10; // 希望のz-index
      transform: scale(0) translateY(-50%) translateX(-50%); // 自作カーソルはカーソルを中心にして横幅・縦幅をとる(scaleはアニメーション用)
      height: 160px; // 希望の自作カーソル縦幅
      width: 160px; // 希望の自作カーソル横幅
      transition: transform 0.3s, opacity 0.3s, visibility 0.3s; // transitionはアニメーションさせる箇所のみ指定しないとカーソル追従にまでtransitionがかかる
      pointer-events: none;
      background-color: yellow;
      &.is-active {
        opacity: 1;
        visibility: visible;
        transform: scale(1) translateY(-50%) translateX(-50%); // アニメーション用scale
      }
    }
  }
}