カーソルインタラクション（基本）から派生させた、ビジュアル出現+座標更新のできるインタラクション。

基本形で指定していた <Cursor body={<CursorBody />} /> この <CursorBody />コンポーネントを、下記のようなビジュアル入りのカーソルボディにしている。

'use client'

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

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

Itemsコンポーネント

const artists: Array<Member> = [
  {
    id: '001',
    name: 'Lana Knightley',
    image: artist001,
  },
  {
    id: '002',
    name: 'Miles Donovan',
    image: artist002,
  },
  {
    id: '003',
    name: 'Eleanor Whitmore',
    image: artist003,
  },
]

export default function Items() {
  const status = useStateContext()
  return <>
    <div className={`${styles.root}`}> 
      {artists.map( artist => <div 
        className={`${styles.item} ${status.active === artist.id ? styles.isActive : ''}`}
        key={artist.id}
      >
        <Image 
          src={artist.image}
          alt=''
        />
      </div>)}
    </div>
  </>
}

status.activeはReactコンテキストで別途状態管理して、ホバー時にアクティブな値を更新するようにしている。