{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "text-dia",
  "type": "registry:component",
  "title": "Dia Text",
  "description": "Scroll-driven text reveal with precision blur and spring physics",
  "dependencies": [
    "motion"
  ],
  "files": [
    {
      "path": "registry/new-york/animations/text/dia-text.tsx",
      "content": "\"use client\";\n\nimport { useState, useEffect } from \"react\";\nimport { motion, AnimatePresence } from \"motion/react\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface DiaTextProps extends React.HTMLAttributes<HTMLSpanElement> {\n    words: string[];\n    duration?: number;\n    className?: string;\n}\n\nexport function DiaText({\n    words,\n    duration = 2000,\n    className,\n    ...props\n}: DiaTextProps) {\n    const [index, setIndex] = useState(0);\n\n    useEffect(() => {\n        const interval = setInterval(() => {\n            setIndex((prev) => (prev + 1) % words.length);\n        }, duration);\n\n        return () => clearInterval(interval);\n    }, [words, duration]);\n\n    return (\n        <span\n            className={cn(\"relative inline-block overflow-hidden min-w-[2ch] align-bottom text-black dark:text-white\", className)}\n            style={{ verticalAlign: \"bottom\" }}\n            {...props}\n        >\n            <AnimatePresence mode=\"wait\">\n                <motion.span\n                    key={index}\n                    initial={{ y: \"100%\", opacity: 0, filter: \"blur(4px)\" }}\n                    animate={{ y: \"0%\", opacity: 1, filter: \"blur(0px)\" }}\n                    exit={{ y: \"-100%\", opacity: 0, filter: \"blur(4px)\" }}\n                    transition={{\n                        y: { type: \"spring\", stiffness: 300, damping: 30 },\n                        opacity: { duration: 0.2 },\n                        filter: { duration: 0.2 },\n                    }}\n                    className=\"absolute inset-0 inline-block\"\n                >\n                    <motion.span\n                        className=\"inline-block bg-clip-text pb-1\"\n                        style={{\n                            WebkitTextFillColor: \"transparent\",\n                            backgroundImage: \"linear-gradient(90deg, currentColor 50%, #2563EB 50%, #EA580C, #DB2777, #9333EA)\",\n                            backgroundSize: \"250% 100%\",\n                        }}\n                        initial={{\n                            backgroundPosition: \"100% 0%\",\n                        }}\n                        animate={{\n                            backgroundPosition: \"0% 0%\",\n                        }}\n                        transition={{\n                            duration: 0.8,\n                            ease: \"easeInOut\",\n                            delay: 0.1,\n                        }}\n                    >\n                        {words[index]}\n                    </motion.span>\n                </motion.span>\n            </AnimatePresence>\n\n            {/* Spacer for layout stability */}\n            <span className=\"invisible\" aria-hidden=\"true\">{words[index]}</span>\n        </span>\n    );\n}\n",
      "type": "registry:component"
    }
  ]
}