{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "text-loop",
  "title": "Text Loop",
  "description": "An animated text loop with typewriter and gradient effect.",
  "dependencies": [
    "motion",
    "clsx",
    "tailwind-merge"
  ],
  "files": [
    {
      "path": "registry/chamaac/text-loop/text-loop.tsx",
      "content": "\"use client\";\n\nimport React, { useEffect, useState } from \"react\";\nimport {\n  LazyMotion,\n  domAnimation,\n  m,\n  AnimatePresence,\n  Transition,\n} from \"motion/react\";\nimport { cn } from \"@/lib/utils\";\n\ninterface TextLoopProps {\n  staticText?: string;\n  rotatingTexts?: string[];\n  className?: string;\n  interval?: number;\n  transition?: Transition;\n  staticTextClassName?: string;\n  rotatingTextClassName?: string;\n  backgroundClassName?: string;\n  cursorClassName?: string;\n}\n\nexport default function TextLoop({\n  staticText = \"Design\",\n  rotatingTexts = [\"Limitless\", \"Timeless\", \"Flawless\"],\n  className,\n  interval = 3000,\n  transition = { duration: 0.8, ease: \"easeInOut\" },\n  staticTextClassName,\n  rotatingTextClassName,\n  backgroundClassName,\n  cursorClassName,\n}: TextLoopProps) {\n  const [index, setIndex] = useState(0);\n\n  useEffect(() => {\n    const timer = setInterval(() => {\n      setIndex((prev) => (prev + 1) % rotatingTexts.length);\n    }, interval);\n    return () => clearInterval(timer);\n  }, [rotatingTexts.length, interval]);\n\n  return (\n    <LazyMotion features={domAnimation}>\n      <div\n        className={cn(\n          \"flex flex-row items-center justify-start w-fit text-4xl md:text-7xl font-medium tracking-tight\",\n          className\n        )}\n      >\n        <span className={cn(\"mr-3 whitespace-nowrap\", staticTextClassName)}>\n          {staticText}\n        </span>\n        <div className=\"relative flex items-center\">\n          <AnimatePresence mode=\"wait\">\n            <m.div\n              key={rotatingTexts[index]}\n              initial={{ width: 0, opacity: 0 }}\n              animate={{ width: \"auto\", opacity: 1 }}\n              exit={{ width: 0, opacity: 0 }}\n              transition={transition}\n              className=\"overflow-hidden whitespace-nowrap relative\"\n            >\n              {/* Background gradient box */}\n              <div\n                className={cn(\n                  \"absolute inset-0\",\n                  \"bg-gradient-to-r from-transparent via-purple-200/30 to-purple-200\",\n                  \"dark:from-transparent dark:via-violet-950/30 dark:to-violet-950/60\",\n                  backgroundClassName\n                )}\n              />\n\n              <span\n                className={cn(\n                  \"relative bg-clip-text text-transparent\",\n                  \"bg-gradient-to-r from-violet-400 to-violet-800\",\n                  \"dark:bg-gradient-to-r from-violet-400 to-violet-600 pr-1\",\n                  rotatingTextClassName\n                )}\n              >\n                {rotatingTexts[index]}\n              </span>\n            </m.div>\n          </AnimatePresence>\n\n          {/* Cursor Line */}\n          <m.div\n            className={cn(\n              \"w-[3px] md:w-[4px] bg-violet-500 h-[1.10em] sm:h-[1em]\",\n              cursorClassName\n            )}\n            animate={{ opacity: [1, 0.5] }}\n            transition={{\n              duration: 0.8,\n              repeat: Infinity,\n              repeatType: \"reverse\",\n            }}\n          />\n        </div>\n      </div>\n    </LazyMotion>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}