{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "flip-fade-text",
  "type": "registry:ui",
  "dependencies": [
    "framer-motion"
  ],
  "files": [
    {
      "path": "components/ui/flip-fade-text.tsx",
      "content": "\"use client\"\r\n\r\nimport { useEffect, useState, useMemo, useCallback, memo } from \"react\"\r\nimport { motion, AnimatePresence } from \"framer-motion\"\r\nimport { cn } from \"@/lib/utils\"\r\n\r\ninterface FlipFadeTextProps {\r\n    /**\r\n     * Array of words to cycle through\r\n     * @default [\"LOADING\", \"COMPUTING\", \"SEARCHING\", \"RETRIEVING\", \"ASSEMBLING\"]\r\n     */\r\n    words?: string[]\r\n    /**\r\n     * Interval between word changes in milliseconds\r\n     * @default 2500\r\n     */\r\n    interval?: number\r\n    /**\r\n     * Additional CSS classes for the container\r\n     */\r\n    className?: string\r\n    /**\r\n     * Additional CSS classes for the text\r\n     */\r\n    textClassName?: string\r\n    /**\r\n     * Animation duration for each letter in seconds\r\n     * @default 0.6\r\n     */\r\n    letterDuration?: number\r\n    /**\r\n     * Stagger delay between letters on enter in seconds\r\n     * @default 0.1\r\n     */\r\n    staggerDelay?: number\r\n    /**\r\n     * Stagger delay between letters on exit in seconds\r\n     * @default 0.05\r\n     */\r\n    exitStaggerDelay?: number\r\n}\r\n\r\nconst defaultWords = [\"LOADING\", \"COMPUTING\", \"SEARCHING\", \"RETRIEVING\", \"ASSEMBLING\"]\r\n\r\n// Memoized Letter component for performance\r\nconst Letter = memo(function Letter({\r\n    char,\r\n    letterDuration\r\n}: {\r\n    char: string\r\n    letterDuration: number\r\n}) {\r\n    return (\r\n        <motion.span\r\n            style={{ transformStyle: \"preserve-3d\" }}\r\n            variants={{\r\n                initial: {\r\n                    rotateX: 90,\r\n                    y: 20,\r\n                    opacity: 0,\r\n                    filter: \"blur(8px)\",\r\n                },\r\n                animate: {\r\n                    rotateX: 0,\r\n                    y: 0,\r\n                    opacity: 1,\r\n                    filter: \"blur(0px)\",\r\n                    transition: {\r\n                        duration: letterDuration,\r\n                        ease: [0.2, 0.65, 0.3, 0.9],\r\n                    },\r\n                },\r\n                exit: {\r\n                    rotateX: -90,\r\n                    y: -20,\r\n                    opacity: 0,\r\n                    filter: \"blur(8px)\",\r\n                    transition: {\r\n                        duration: letterDuration * 0.67,\r\n                        ease: \"easeIn\",\r\n                    },\r\n                },\r\n            }}\r\n            className=\"inline-block\"\r\n        >\r\n            {char}\r\n        </motion.span>\r\n    )\r\n})\r\n\r\n// Memoized Word component for performance\r\nconst Word = memo(function Word({\r\n    text,\r\n    staggerDelay,\r\n    exitStaggerDelay,\r\n    letterDuration,\r\n    textClassName\r\n}: {\r\n    text: string\r\n    staggerDelay: number\r\n    exitStaggerDelay: number\r\n    letterDuration: number\r\n    textClassName?: string\r\n}) {\r\n    const letters = useMemo(() => text.split(\"\"), [text])\r\n\r\n    return (\r\n        <motion.div\r\n            className={cn(\r\n                \"flex gap-[0.1em] text-4xl md:text-6xl font-bold uppercase tracking-wider text-neutral-800 dark:text-neutral-100\",\r\n                textClassName\r\n            )}\r\n            initial=\"initial\"\r\n            animate=\"animate\"\r\n            exit=\"exit\"\r\n            variants={{\r\n                initial: { opacity: 1 },\r\n                animate: {\r\n                    opacity: 1,\r\n                    transition: {\r\n                        staggerChildren: staggerDelay,\r\n                    },\r\n                },\r\n                exit: {\r\n                    opacity: 1,\r\n                    transition: {\r\n                        staggerChildren: exitStaggerDelay,\r\n                    },\r\n                },\r\n            }}\r\n        >\r\n            {letters.map((char, i) => (\r\n                <Letter\r\n                    key={`${char}-${i}`}\r\n                    char={char}\r\n                    letterDuration={letterDuration}\r\n                />\r\n            ))}\r\n        </motion.div>\r\n    )\r\n})\r\n\r\nexport function FlipFadeText({\r\n    words = defaultWords,\r\n    interval = 2500,\r\n    className,\r\n    textClassName,\r\n    letterDuration = 0.6,\r\n    staggerDelay = 0.1,\r\n    exitStaggerDelay = 0.05,\r\n}: FlipFadeTextProps) {\r\n    const [index, setIndex] = useState(0)\r\n\r\n    // Memoize the interval callback\r\n    const updateIndex = useCallback(() => {\r\n        setIndex((prev) => (prev + 1) % words.length)\r\n    }, [words.length])\r\n\r\n    useEffect(() => {\r\n        const timer = setInterval(updateIndex, interval)\r\n        return () => clearInterval(timer)\r\n    }, [updateIndex, interval])\r\n\r\n    // Memoize the current word\r\n    const currentWord = useMemo(() => words[index], [words, index])\r\n\r\n    return (\r\n        <div className={cn(\"flex items-center justify-center min-h-[200px]\", className)}>\r\n            <div className=\"relative flex items-center justify-center\" style={{ perspective: \"1000px\" }}>\r\n                <AnimatePresence mode=\"wait\">\r\n                    <Word\r\n                        key={currentWord}\r\n                        text={currentWord}\r\n                        staggerDelay={staggerDelay}\r\n                        exitStaggerDelay={exitStaggerDelay}\r\n                        letterDuration={letterDuration}\r\n                        textClassName={textClassName}\r\n                    />\r\n                </AnimatePresence>\r\n            </div>\r\n        </div>\r\n    )\r\n}\r\n\r\nexport default FlipFadeText\r\n",
      "type": "registry:ui",
      "target": "components/ui/flip-fade-text.tsx"
    }
  ]
}