{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "bouncy-input-nova",
  "title": "Bouncy Input Nova",
  "dependencies": [
    "motion"
  ],
  "files": [
    {
      "path": "src/registry/inputs/nova/BouncyInputNova.jsx",
      "content": "\"use client\";\n\nimport React, { useState, useEffect } from \"react\";\nimport { motion, useAnimation } from \"motion/react\";\n\nconst BouncyInput = () => {\n  const [value, setValue] = useState(\"\");\n  const controls = useAnimation();\n\n  // re-trigger bounce whenever value changes\n  useEffect(() => {\n    controls.start({\n      scaleX: [1, 1.01, 1],\n      scaleY: [1, 1.1, 1],\n      transition: { duration: 0.2, ease: \"easeInOut\" },\n    });\n  }, [value, controls]);\n\n  return (\n    <div className=\"relative justify-center items-center w-full\">\n      <motion.div\n        animate={controls}\n        className=\"h-full w-full max-w-md flex items-center justify-center text-black overflow-hidden border-[0.6px] box-border border-gray-300 rounded-md px-3 py-2 absolute bg-transparent z-10\"\n      ></motion.div>\n      <input\n        placeholder=\"Type something...\"\n        type=\"text\"\n        className=\"w-full text-white focus:outline-none px-3 py-2 z-20 relative bg-transparent\"\n        value={value}\n        onChange={(e) => setValue(e.target.value)}\n      />\n    </div>\n  );\n};\n\nexport default BouncyInput\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}