独自のカーソルを組み込めるインタラクション。カーソル自体のデザインは個別で指定できるので、ホバーで出現する矢印や、ビジュアルとの連動など、様々なカーソルインタラクションに派生できるように...した（もっと改良しないとだけども！）

また、React以外のフルスクラッチ等の環境でも動くように、DOMとカーソル処理（Cursorクラス）は分割した。

長谷工不動産「BRANCHERA」札幌シリーズ告知LPで実装したカーソルインタラクションをTS移行 + リファクタリング。

基本的な扱い方

カーソル用のDOMを読み込む

import Cursor from "@/modules/Cursor";

export default function Page() {
  return <>
    <Cursor body={<CursorBody />} />
  </>
}

/*
Cursorの中身

export default function Cursor({
  body,
}: Props ) {
  return <>
    <div className={styles.root}>
      <div className={styles.inner}>
        {body}
      </div>
    </div>
  </>
}
*/

bodyの設定

<Cursor />はテンプレートを読み込むだけなので、カーソルのDOMはbodyプロパティで別途指定する。

'use client'

import styles from "./_index.module.scss"
import { Cursor } from "@/modules/Cursor/modules/basic"
import { useEffect } from "react"

export default function CursorBody() {
  useEffect(() => {
    new Cursor([
      {
        name: '[data-mod-cursor="body-outter"]',
        duration: 0.08,
      },
      {
        name: '[data-mod-cursor="body-inner"]',
        duration: 0.2,
      },
    ], 'a, [data-mod-cursor-item="hover"]')
  }, [])
  return <>
    <div className={`${styles.outter}`} data-mod-cursor="body-outter">
      <div className={`${styles.outterDesign}`}></div>
    </div>
    <div className={`${styles.inner}`} data-mod-cursor="body-inner">
      <div className={`${styles.innerDesign}`}></div>
    </div>
  </>
}

Cursorクラスの第1引数に、カーソルボディとして認識させたいノードを特定する文字列やduration等を指定。Cursorクラスの第2引数は、ホバーを検知したい要素を文字列で指定。

Cursorクラスは、カーソルボディの座標更新やホバー時のデータセット付与など機能面だけを提供するので、デザインは個別でスタイリングする必要がある。