【Next.js】マグネティックボタンの作り方をカーソルに吸い付く動きまで解説

type Box = { left: number; top: number; width: number; height: number };

// strength: 寄る強さ（0〜1） / max: ずれの上限（px）
export function getMagneticOffset(
  pointer: { x: number; y: number },
  box: Box,
  strength = 0.3,
  max = 12,
) {
  const centerX = box.left + box.width / 2;
  const centerY = box.top + box.height / 2;
  const clamp = (value: number) => Math.max(-max, Math.min(max, value));

  return {
    x: clamp((pointer.x - centerX) * strength),
    y: clamp((pointer.y - centerY) * strength),
  };
}

"use client";

import Link from "next/link";
import { useRef, type PointerEvent, type ReactNode } from "react";
import { motion, useMotionValue, useReducedMotion, useSpring } from "motion/react";
import { getMagneticOffset } from "@/lib/magnetic";

const spring = { stiffness: 250, damping: 18, mass: 0.5 };

type Props = { href: string; children: ReactNode };

export function MagneticButton({ href, children }: Props) {
  const areaRef = useRef<HTMLDivElement>(null);
  const x = useMotionValue(0);
  const y = useMotionValue(0);
  const springX = useSpring(x, spring);
  const springY = useSpring(y, spring);

  const reduceMotion = useReducedMotion();
  const enabled = !reduceMotion; // Step3 でタッチ端末の判定を足す

  function handlePointerMove(event: PointerEvent<HTMLDivElement>) {
    if (!enabled || event.pointerType !== "mouse" || !areaRef.current) return;
    // 測るのは動かない外枠。ボタン自身を測ると動きが震える
    const box = areaRef.current.getBoundingClientRect();
    const offset = getMagneticOffset({ x: event.clientX, y: event.clientY }, box);
    x.set(offset.x);
    y.set(offset.y);
  }

  function handlePointerLeave() {
    x.set(0);
    y.set(0);
  }

  return (
    <div
      ref={areaRef}
      onPointerMove={handlePointerMove}
      onPointerLeave={handlePointerLeave}
      className="-m-4 inline-block p-4"
    >
      <motion.div style={{ x: springX, y: springY }} className="inline-block">
        <Link
          href={href}
          className="inline-flex min-h-11 items-center rounded-full bg-zinc-900 px-7 text-sm font-medium text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-zinc-900"
        >
          {children}
        </Link>
      </motion.div>
    </div>
  );
}

"use client";

import { useSyncExternalStore } from "react";

const QUERY = "(hover: hover) and (pointer: fine)";

function subscribe(onChange: () => void) {
  const media = window.matchMedia(QUERY);
  media.addEventListener("change", onChange);
  return () => media.removeEventListener("change", onChange);
}

export function useFinePointer() {
  return useSyncExternalStore(
    subscribe,
    () => window.matchMedia(QUERY).matches,
    () => false, // サーバーでは「マウスなし」として扱う
  );
}