{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "liquid-fill-button",
  "type": "registry:component",
  "description": "A Button component with liquid fill animation on hover.",
  "dependencies": [
    "framer-motion"
  ],
  "registryDependencies": [
    "button"
  ],
  "files": [
    {
      "path": "src/app/components/animatedComponents/buttons/liquid-fill/LiquidFillButton.tsx",
      "content": "\"use client\";\r\nimport { Button } from \"@/components/ui/button\";\r\nimport { motion } from \"framer-motion\";\r\nimport { useState } from \"react\";\r\n\r\nexport default function LiquidFillButton() {\r\n  const [hovered, setHovered] = useState(false);\r\n\r\n  return (\r\n    <Button asChild variant={\"outline\"} className=\"hover:!bg-transparent\" >\r\n    <motion.button\r\n      onHoverStart={() => setHovered(true)}\r\n      onHoverEnd={() => setHovered(false)}\r\n      className=\"relative overflow-hidden cursor-pointer\"\r\n    >\r\n      {/* liquid fill layer */}\r\n      <motion.span\r\n        initial={{ height: \"0%\" }}\r\n        animate={{ height: hovered ? \"100%\" : \"0%\" }}\r\n        transition={{ duration: 0.3, ease: \"easeInOut\" }}\r\n        className=\"absolute bottom-0 left-0 w-full bg-primary z-0\"\r\n      />\r\n\r\n      {/* text */}\r\n      <span className=\"relative z-10\">Liquid Fill</span>\r\n    </motion.button>\r\n    </Button>\r\n  );\r\n}\r\n",
      "type": "registry:component",
      "target": "components/animated/buttons/liquid-fill/LiquidFillButton.tsx"
    }
  ]
}