{
  "name": "character-morph",
  "dependencies": [
    "motion"
  ],
  "files": [
    {
      "path": "ui/character-morph.tsx",
      "content": "import { AnimatePresence, motion } from \"motion/react\";\nimport * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\ninterface CharacterMorphProps {\n  texts: string[];\n  className?: string;\n  interval?: number;\n  staggerDelay?: number;\n  charDuration?: number;\n}\n\nconst CharacterMorph = React.forwardRef<HTMLDivElement, CharacterMorphProps>(\n  (\n    {\n      texts,\n      className,\n      interval = 3000,\n      staggerDelay = 0.03,\n      charDuration = 0.5,\n    },\n    ref,\n  ) => {\n    const [currentIndex, setCurrentIndex] = React.useState(0);\n    const currentText = texts[currentIndex] || \"\";\n\n    React.useEffect(() => {\n      const timer = setInterval(() => {\n        setCurrentIndex((prev) => (prev + 1) % texts.length);\n      }, interval);\n\n      return () => clearInterval(timer);\n    }, [interval, texts.length]);\n\n    const maxLength = Math.max(...texts.map((t) => t.length));\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\"relative inline-flex whitespace-nowrap\", className)}\n      >\n        <AnimatePresence mode=\"popLayout\">\n          {currentText.split(\"\").map((char, i) => (\n            <motion.span\n              key={`${currentIndex}-${i}-${char}`}\n              initial={{ opacity: 0, y: 20, filter: \"blur(8px)\", rotateX: -90 }}\n              animate={{ opacity: 1, y: 0, filter: \"blur(0px)\", rotateX: 0 }}\n              exit={{ opacity: 0, y: -20, filter: \"blur(8px)\", rotateX: 90 }}\n              transition={{\n                duration: charDuration,\n                delay: i * staggerDelay,\n                ease: [0.215, 0.61, 0.355, 1],\n              }}\n              className=\"inline-block\"\n              style={{ transformStyle: \"preserve-3d\" }}\n            >\n              {char === \" \" ? \"\\u00A0\" : char}\n            </motion.span>\n          ))}\n        </AnimatePresence>\n        {/* Maintain minimum width */}\n        <span className=\"invisible absolute\">{\"M\".repeat(maxLength)}</span>\n      </div>\n    );\n  },\n);\n\nCharacterMorph.displayName = \"CharacterMorph\";\nexport { CharacterMorph };\n",
      "type": "registry:ui",
      "target": ""
    }
  ],
  "type": "registry:ui"
}