{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "typing-animation-motion",
  "type": "registry:component",
  "description": "A text component with typing animation.",
  "dependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "src/app/components/animatedComponents/text-animation/typing-animation/TypingAnimationMotion.tsx",
      "content": "\"use client\";\r\n\r\nimport { useEffect, useState } from \"react\";\r\n\r\nexport default function TypingAnimationMotion() {\r\n  const words = [\"Hello, World!\", \"Welcome to my website!\", \"This is a typewriter effect.\"];\r\n  const [i, setI] = useState(0); \r\n  const [j, setJ] = useState(0); \r\n  const [isDeleting, setIsDeleting] = useState(false);\r\n  const [text, setText] = useState(\"\");\r\n\r\n  useEffect(() => {\r\n    const currentWord = words[i];\r\n\r\n    const timeout = setTimeout(() => {\r\n      if (isDeleting) {\r\n        setText(currentWord.substring(0, j - 1));\r\n        setJ(j - 1);\r\n\r\n        if (j === 0) {\r\n          setIsDeleting(false);\r\n          setI((prev) => (prev + 1) % words.length);\r\n        }\r\n      } else {\r\n        setText(currentWord.substring(0, j + 1));\r\n        setJ(j + 1);\r\n\r\n        if (j === currentWord.length) {\r\n          setIsDeleting(true);\r\n        }\r\n      }\r\n    }, 100);\r\n\r\n    return () => clearTimeout(timeout);\r\n  }, [j, i, isDeleting, words]);\r\n\r\n  return (\r\n    <div className=\"w-full h-full flex justify-start items-center min-h-10\">\r\n      <h1 className=\"text-2xl font-medium text-primary\">{text}</h1>\r\n    </div>\r\n  );\r\n}\r\n",
      "type": "registry:component",
      "target": "components/animated/text-animation/typing-animation/TypingAnimationMotion.tsx"
    }
  ]
}