{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "text-roller-motion",
  "type": "registry:component",
  "description": "A text component that rolls through a list of words.",
  "dependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "src/app/components/animatedComponents/text-animation/text-roller/TextRollerMotion.tsx",
      "content": "\"use client\";\r\nimport { useEffect, useState } from \"react\";\r\n\r\nconst greetings = [\r\n  { text: \"Initializing ...\", color: \"text-orange-400\" },\r\n  { text: \"Fetching Data...\", color: \"text-green-500\" },\r\n  { text: \"Rendering...\", color: \"text-purple-400\" },\r\n  { text: \"System Ready \", color: \"text-gray-400\" },\r\n];\r\n\r\nexport default function TextRollerMotion() {\r\n  const [index, setIndex] = useState(0);\r\n\r\n  useEffect(() => {\r\n    const interval = setInterval(() => {\r\n      setIndex((prev) => (prev + 1) % greetings.length);\r\n    }, 2000); \r\n    return () => clearInterval(interval);\r\n  }, []);\r\n\r\n  return (\r\n    <div className=\" flex items-center justify-start text-2xl\">\r\n      <div className=\"flex gap-2\">\r\n        <h2 className=\"text-lg text-forest-black\">Hello, Tailwind Admin</h2>\r\n        <div className=\"overflow-hidden h-[1.5rem] text-center\">\r\n          <div\r\n            className=\"transition-transform duration-700 ease-in-out\"\r\n            style={{ transform: `translateY(-${index * 1.5}rem)` }}\r\n          >\r\n            {greetings.map((g, i) => (\r\n              <h1 key={i} className={`${g.color} h-[1.5rem] flex items-center justify-start text-lg `}>\r\n                {g.text}\r\n              </h1>\r\n            ))}\r\n          </div>\r\n        </div> \r\n      </div>\r\n    </div>\r\n  );\r\n}\r\n",
      "type": "registry:component",
      "target": "components/animated/text-animation/text-roller/TextRollerMotion.tsx"
    }
  ]
}