Custom cursor

import { useState, type ReactNode } from 'react';
import {
  motion,
  useMotionValue,
  useReducedMotion,
  useSpring
} from 'motion/react';

const RING_SPRING = { stiffness: 300, damping: 28 };

type CursorState = 'hidden' | 'default' | 'hover';

export function CustomCursor({ children }: { children: ReactNode }) {
  const x = useMotionValue(0);
  const y = useMotionValue(0);
  const ringX = useSpring(x, RING_SPRING);
  const ringY = useSpring(y, RING_SPRING);
  const reduceMotion = useReducedMotion();
  const [state, setState] = useState<CursorState>('hidden');

  return (
    <div
      onPointerMove={(event) => {
        if (event.pointerType !== 'mouse') return;
        x.set(event.clientX);
        y.set(event.clientY);
        const target = event.target as Element;
        // Text fields keep the normal I-beam cursor.
        if (target.closest('input, textarea')) setState('hidden');
        else setState(target.closest('a, button') ? 'hover' : 'default');
      }}
      onPointerLeave={() => setState('hidden')}
      className='pointer-fine:cursor-none pointer-fine:[&_*]:cursor-none pointer-fine:[&_input,&_textarea]:cursor-text'
    >
      {children}
      <div
        aria-hidden
        className='pointer-events-none fixed inset-0 z-50 hidden pointer-fine:block'
      >
        {/* The dot tracks the pointer exactly; only the ring trails. */}
        <motion.div
          style={{ x, y }}
          animate={{ opacity: state === 'default' ? 1 : 0 }}
          className='absolute -top-1 -left-1 size-2 rounded-full bg-foreground'
        />
        <motion.div
          style={{ x: reduceMotion ? x : ringX, y: reduceMotion ? y : ringY }}
          animate={{
            opacity: state === 'hidden' ? 0 : 1,
            scale: state === 'hover' ? 1.8 : 1
          }}
          className='absolute -top-4 -left-4 size-8 rounded-full border border-foreground/60'
        />
      </div>
    </div>
  );
}