{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "changing-text",
  "title": "Changing Text",
  "description": "A component that changes text with fade and slide transitions.",
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/flowui/animated-components/changing-text.tsx",
      "content": "\"use client\";\r\n\r\nimport { cn } from \"@/lib/utils\";\r\nimport { AnimatePresence, motion } from \"motion/react\";\r\nimport { useState } from \"react\";\r\n\r\ntype ChangingTextProps = {\r\n    initialText: string;\r\n    finalText: string;\r\n    className?: string;\r\n    variant?: \"default\" | \"blur\";\r\n    blurValue?: number;\r\n    speed?: number;\r\n};\r\n\r\nconst ChangingText = ({\r\n    initialText,\r\n    finalText,\r\n    className,\r\n    variant = \"default\",\r\n    blurValue = 4,\r\n    speed = 0.3,\r\n} : ChangingTextProps) => {\r\n    const [mode, setMode] = useState<\"initial\" | \"final\">(\"initial\");\r\n    return (\r\n        <AnimatePresence mode=\"wait\">\r\n            <motion.h1\r\n                key={mode}\r\n                className={cn(className)}\r\n                initial={{ opacity: 0, x: -20, filter: variant === \"blur\" ? `blur(${blurValue}px)` : \"none\" }}\r\n                animate={{ opacity: 1, x: 0, filter: \"blur(0px)\" }}\r\n                exit={{ opacity: 0, x: 20, filter: variant === \"blur\" ? `blur(${blurValue}px)` : \"none\" }}\r\n                transition={{ duration: speed }}\r\n                onMouseEnter={() => setMode(\"final\")}\r\n                onMouseLeave={() => setMode(\"initial\")}\r\n            >\r\n                {mode === \"initial\" ? initialText : finalText}\r\n            </motion.h1>\r\n        </AnimatePresence>\r\n    )\r\n}\r\n\r\nexport default ChangingText;",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}