{
  "name": "typewriter-effect",
  "type": "registry:ui",
  "dependencies": [
    "motion"
  ],
  "files": [
    {
      "path": "components/ui/typewriter-effect.tsx",
      "content": "\"use client\";\n\nimport { cn } from \"@/lib/utils\";\nimport { motion, stagger, useAnimate, useInView } from \"motion/react\";\nimport { useEffect } from \"react\";\n\nexport const TypewriterEffect = ({\n  words,\n  className,\n  cursorClassName,\n}: {\n  words: {\n    text: string;\n    className?: string;\n  }[];\n  className?: string;\n  cursorClassName?: string;\n}) => {\n  // split text inside of words into array of characters\n  const wordsArray = words.map((word) => {\n    return {\n      ...word,\n      text: word.text.split(\"\"),\n    };\n  });\n\n  const [scope, animate] = useAnimate();\n  const isInView = useInView(scope);\n  useEffect(() => {\n    if (isInView) {\n      animate(\n        \"span\",\n        {\n          display: \"inline-block\",\n          opacity: 1,\n          width: \"fit-content\",\n        },\n        {\n          duration: 0.3,\n          delay: stagger(0.1),\n          ease: \"easeInOut\",\n        }\n      );\n    }\n  }, [isInView]);\n\n  const renderWords = () => {\n    return (\n      <motion.div ref={scope} className=\"inline\">\n        {wordsArray.map((word, idx) => {\n          return (\n            <div key={`word-${idx}`} className=\"inline-block\">\n              {word.text.map((char, index) => (\n                <motion.span\n                  initial={{}}\n                  key={`char-${index}`}\n                  className={cn(\n                    `dark:text-white text-black opacity-0 hidden`,\n                    word.className\n                  )}\n                >\n                  {char}\n                </motion.span>\n              ))}\n              &nbsp;\n            </div>\n          );\n        })}\n      </motion.div>\n    );\n  };\n  return (\n    <div\n      className={cn(\n        \"text-base sm:text-xl md:text-3xl lg:text-5xl font-bold text-center\",\n        className\n      )}\n    >\n      {renderWords()}\n      <motion.span\n        initial={{\n          opacity: 0,\n        }}\n        animate={{\n          opacity: 1,\n        }}\n        transition={{\n          duration: 0.8,\n          repeat: Infinity,\n          repeatType: \"reverse\",\n        }}\n        className={cn(\n          \"inline-block rounded-sm w-[4px] h-4 md:h-6 lg:h-10 bg-blue-500\",\n          cursorClassName\n        )}\n      ></motion.span>\n    </div>\n  );\n};\n\nexport const TypewriterEffectSmooth = ({\n  words,\n  className,\n  cursorClassName,\n}: {\n  words: {\n    text: string;\n    className?: string;\n  }[];\n  className?: string;\n  cursorClassName?: string;\n}) => {\n  // split text inside of words into array of characters\n  const wordsArray = words.map((word) => {\n    return {\n      ...word,\n      text: word.text.split(\"\"),\n    };\n  });\n  const renderWords = () => {\n    return (\n      <div>\n        {wordsArray.map((word, idx) => {\n          return (\n            <div key={`word-${idx}`} className=\"inline-block\">\n              {word.text.map((char, index) => (\n                <span\n                  key={`char-${index}`}\n                  className={cn(`dark:text-white text-black `, word.className)}\n                >\n                  {char}\n                </span>\n              ))}\n              &nbsp;\n            </div>\n          );\n        })}\n      </div>\n    );\n  };\n\n  return (\n    <div className={cn(\"flex space-x-1 my-6\", className)}>\n      <motion.div\n        className=\"overflow-hidden pb-2\"\n        initial={{\n          width: \"0%\",\n        }}\n        whileInView={{\n          width: \"fit-content\",\n        }}\n        transition={{\n          duration: 2,\n          ease: \"linear\",\n          delay: 1,\n        }}\n      >\n        <div\n          className=\"text-xs sm:text-base md:text-xl lg:text:3xl xl:text-5xl font-bold\"\n          style={{\n            whiteSpace: \"nowrap\",\n          }}\n        >\n          {renderWords()}{\" \"}\n        </div>{\" \"}\n      </motion.div>\n      <motion.span\n        initial={{\n          opacity: 0,\n        }}\n        animate={{\n          opacity: 1,\n        }}\n        transition={{\n          duration: 0.8,\n\n          repeat: Infinity,\n          repeatType: \"reverse\",\n        }}\n        className={cn(\n          \"block rounded-sm w-[4px]  h-4 sm:h-6 xl:h-12 bg-blue-500\",\n          cursorClassName\n        )}\n      ></motion.span>\n    </div>\n  );\n};\n",
      "type": "registry:ui",
      "target": "components/ui/typewriter-effect.tsx"
    }
  ],
  "author": "Manu Arora <hi@manuarora.in>",
  "title": "Typewriter Effect"
}