【Next.js】カスタムカーソルの作り方を追従アニメーションまで解説

"use client";

import { useEffect, useRef } from "react";

export function CustomCursor() {
  const dotRef = useRef<HTMLDivElement>(null);
  const ringRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const dot = dotRef.current;
    const ring = ringRef.current;
    if (!dot || !ring) return;

    let mouseX = -100;
    let mouseY = -100;
    let ringX = -100;
    let ringY = -100;
    let frame = 0;

    const onMove = (e: PointerEvent) => {
      mouseX = e.clientX;
      mouseY = e.clientY;
      dot.style.transform = "translate3d(" + mouseX + "px, " + mouseY + "px, 0)";
    };

    const tick = () => {
      ringX += (mouseX - ringX) * 0.2;
      ringY += (mouseY - ringY) * 0.2;
      ring.style.transform = "translate3d(" + ringX + "px, " + ringY + "px, 0)";
      frame = requestAnimationFrame(tick);
    };

    window.addEventListener("pointermove", onMove, { passive: true });
    frame = requestAnimationFrame(tick);

    return () => {
      window.removeEventListener("pointermove", onMove);
      cancelAnimationFrame(frame);
    };
  }, []);

  return (
    <div aria-hidden="true" className="pointer-events-none fixed inset-0 z-[100]">
      <div ref={ringRef} className="absolute left-0 top-0">
        <div className="h-9 w-9 -translate-x-1/2 -translate-y-1/2 rounded-full border border-zinc-900/50" />
      </div>
      <div ref={dotRef} className="absolute left-0 top-0">
        <div className="h-2 w-2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-zinc-900" />
      </div>
    </div>
  );
}

// CustomCursor の中に追加する
const rootRef = useRef<HTMLDivElement>(null);

useEffect(() => {
  const root = rootRef.current;
  if (!root) return;

  const growSelector = "a, button, [role='button'], [data-cursor='grow']";
  const textSelector = "input, textarea, select, [contenteditable='true']";

  const onOver = (e: PointerEvent) => {
    const el = e.target instanceof Element ? e.target : null;
    root.dataset.hover = el?.closest(growSelector) ? "true" : "false";
    root.dataset.text = el?.closest(textSelector) ? "true" : "false";
  };

  document.addEventListener("pointerover", onOver);
  return () => document.removeEventListener("pointerover", onOver);
}, []);

// return の JSX（外側の div に ref と group を付ける）
<div
  ref={rootRef}
  aria-hidden="true"
  className="group pointer-events-none fixed inset-0 z-[100] transition-opacity data-[text=true]:opacity-0"
>
  <div ref={ringRef} className="absolute left-0 top-0">
    <div className="h-9 w-9 -translate-x-1/2 -translate-y-1/2 rounded-full border border-zinc-900/50 transition-transform duration-200 group-data-[hover=true]:scale-[1.8]" />
  </div>
  <div ref={dotRef} className="absolute left-0 top-0">
    <div className="h-2 w-2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-zinc-900 transition-opacity group-data-[hover=true]:opacity-0" />
  </div>
</div>

"use client";

import { useEffect, useState } from "react";

const QUERY =
  "(hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference)";

export function useCustomCursorEnabled() {
  const [enabled, setEnabled] = useState(false);

  useEffect(() => {
    const mq = window.matchMedia(QUERY);
    const update = () => setEnabled(mq.matches);
    update();
    mq.addEventListener("change", update);
    return () => mq.removeEventListener("change", update);
  }, []);

  return enabled;
}

/* カスタムカーソルが有効なときだけ、標準のカーソルを隠す */
html.has-custom-cursor,
html.has-custom-cursor * {
  cursor: none;
}

/* 文字を入力する場所では、標準のカーソルに戻す */
html.has-custom-cursor :is(input, textarea, select, [contenteditable="true"]) {
  cursor: auto;
}