{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "fade-text",
  "title": "fade-text",
  "description": "A combined fade text component with support for in, up, and down directions.",
  "dependencies": [
    "motion",
    "react",
    "clsx"
  ],
  "files": [
    {
      "path": "registry/eldoraui/fade-text.tsx",
      "content": "\"use client\"\n\nimport React from \"react\"\nimport clsx from \"clsx\"\nimport { motion } from \"motion/react\"\n\ntype FadeDirection = \"in\" | \"up\" | \"down\"\n\ninterface FadeTextProps {\n  text?: string\n  className?: string\n  direction?: FadeDirection\n  staggerDelay?: number\n  wordDelay?: number\n}\n\nexport const FadeText: React.FC<FadeTextProps> = ({\n  text = \"\",\n  className = \"\",\n  direction = \"in\",\n  staggerDelay = 0.15,\n  wordDelay = 0.1,\n}) => {\n  // For \"in\" direction, we animate word by word\n  if (direction === \"in\") {\n    const words = text.split(\" \")\n\n    return (\n      <motion.div\n        initial=\"hidden\"\n        animate=\"visible\"\n        viewport={{ once: true }}\n        variants={{\n          hidden: {},\n          visible: {\n            transition: {\n              staggerChildren: wordDelay,\n            },\n          },\n        }}\n      >\n        <motion.h1\n          className={clsx(\n            \"font-display text-center font-bold drop-shadow-sm\",\n            \"text-4xl md:text-5xl lg:text-6xl xl:text-7xl\",\n            \"tracking-[-0.02em]\",\n            \"md:leading-[4rem] lg:leading-[4.5rem] xl:leading-[5rem]\",\n            className\n          )}\n        >\n          {words.map((word, i) => (\n            <motion.span\n              key={`${word}-${i}`}\n              variants={{\n                hidden: { opacity: 0 },\n                visible: { opacity: 1 },\n              }}\n            >\n              {word}{\" \"}\n            </motion.span>\n          ))}\n        </motion.h1>\n      </motion.div>\n    )\n  }\n\n  // For \"up\" and \"down\" directions, we animate the entire text\n  const animationVariants =\n    direction === \"up\"\n      ? {\n          hidden: { opacity: 0, y: 20 },\n          show: {\n            opacity: 1,\n            y: 0,\n            transition: {\n              type: \"spring\" as const,\n              stiffness: 100,\n              damping: 12,\n              duration: 0.8,\n            },\n          },\n        }\n      : {\n          hidden: { opacity: 0, y: -20 },\n          show: {\n            opacity: 1,\n            y: 0,\n            transition: {\n              type: \"spring\" as const,\n              stiffness: 100,\n              damping: 12,\n              duration: 0.8,\n            },\n          },\n        }\n\n  return (\n    <motion.div\n      initial=\"hidden\"\n      animate=\"show\"\n      viewport={{ once: true }}\n      transition={{ delay: staggerDelay }}\n    >\n      <motion.h1\n        className={clsx(\n          \"font-display text-center font-bold drop-shadow-sm\",\n          \"text-4xl md:text-5xl lg:text-6xl xl:text-7xl\",\n          \"tracking-[-0.02em]\",\n          \"md:leading-[4rem] lg:leading-[4.5rem] xl:leading-[5rem]\",\n          className\n        )}\n        variants={animationVariants}\n      >\n        {text}\n      </motion.h1>\n    </motion.div>\n  )\n}\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}