{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "primitive-hover-effect",
  "type": "registry:ui",
  "title": "Hover effect",
  "description": "Reinforce interactivity on pointer hover while keeping layout stable.",
  "dependencies": [
    "motion"
  ],
  "categories": [
    "primitive",
    "feedback"
  ],
  "docs": "https://motion-lexicon.pages.dev/en/primitives/hover-effect/",
  "files": [
    {
      "path": "src/registry/primitives/hover-effect.tsx",
      "type": "registry:ui",
      "target": "components/motion-lexicon/primitives/hover-effect.tsx",
      "content": "\"use client\";\n\nimport { motion, useReducedMotion, type Transition } from \"motion/react\";\nimport type { ReactNode } from \"react\";\n\nconst EASE_OUT = [0.16, 1, 0.3, 1] as const;\n\nexport type HoverEffectPrimitiveProps = {\n  children: ReactNode;\n  distance?: number;\n  scale?: number;\n  duration?: number;\n  easing?: Transition[\"ease\"];\n  className?: string;\n};\n\nexport function HoverEffectPrimitive({\n  children,\n  distance = 4,\n  scale = 1.01,\n  duration = 0.15,\n  easing = EASE_OUT,\n  className,\n}: HoverEffectPrimitiveProps) {\n  const reduceMotion = useReducedMotion();\n  const resting = \"translate3d(0, 0, 0) scale(1)\";\n  const lifted = `translate3d(0, ${-distance}px, 0) scale(${scale})`;\n\n  return (\n    <motion.div\n      className={className}\n      initial={false}\n      animate={{ transform: resting }}\n      whileHover={reduceMotion ? undefined : { transform: lifted }}\n      whileFocus={reduceMotion ? undefined : { transform: lifted }}\n      transition={reduceMotion ? { duration: 0.12 } : { duration, ease: easing }}\n    >\n      {children}\n    </motion.div>\n  );\n}\n"
    }
  ]
}