Disable pointer-events at low opacity in Framer Motion

pointerEvents.tsx

import { motion, useMotionValue, useTransform } from "framer-motion"

export function Overlay({ isVisible }) {
  const opacity = useMotionValue(0)
  const pointerEvents = useTransform(
    opacity,
    latest => latest < 0.5 ? "none" : "auto"
  )
  
  return (
    <motion.div
      animate={{ opacity: isVisible ? 1 : 0 }}
      style={{ opacity, pointerEvents }}
    />
  )
}