maybeUseHoverEffect

maybeUseHoverEffect.ts

export function useHoverEffect({ ref }: { ref: MutableRefObject<HTMLElement | null >}) {
  const mousePosition = useMousePosition()

  const { x, y } = calculateOffset(ref, mousePosition)
  
  return function Effect() {
    return (
      <div style={{
        ["--x" as any]: `${x}px`,
        ["--y" as any]: `${y}px`,
      }}
      className="absolute inset-0 -z-10 translate-x-[var(--x)] translate-y-[var(--y)]"
      />
    )
  }
}

function calculateOffset(ref: MutableRefObject<HTMLElement | null>, mousePosition: ReturnType<typeof useMousePosition>) {
  if (!ref.current || !mousePosition.x || !mousePosition.y) {
    return { x: 0, y : 0 }
  }

  const { left, top, width, height } = ref.current.getBoundingClientRect()

  return {
    x: mousePosition.x - left - width / 2,
    y: mousePosition.y - top - height / 2,
  }
}