{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"word-rotate","type":"registry:component","title":"Word Rotate","description":"Uma palavra da frase troca com deslize vertical a cada 2 segundos.","author":"UI Catalog <https://ui.codehall.io>","dependencies":["motion"],"registryDependencies":[],"files":[{"path":"components/illustrations/word-rotate.tsx","type":"registry:component","content":"'use client'\n\nimport { useEffect, useState } from 'react'\nimport { AnimatePresence, motion } from 'motion/react'\n\n// \"Word Rotate\": uma palavra da frase troca com deslize vertical a cada 2s.\nconst WORDS = ['vendas', 'leads', 'atendimento', 'campanhas', 'cobranças']\n\nexport default function WordRotate() {\n  const [i, setI] = useState(0)\n  useEffect(() => {\n    const t = setInterval(() => setI((v) => (v + 1) % WORDS.length), 2000)\n    return () => clearInterval(t)\n  }, [])\n  return (\n    <div className=\"text-center text-foreground\">\n      <h2 className=\"text-3xl font-semibold tracking-tight sm:text-4xl\">\n        Automatize suas{' '}\n        <span className=\"relative inline-flex h-[1.2em] overflow-hidden align-bottom\">\n          <AnimatePresence mode=\"popLayout\" initial={false}>\n            <motion.span\n              key={WORDS[i]}\n              initial={{ y: '100%', opacity: 0 }}\n              animate={{ y: 0, opacity: 1 }}\n              exit={{ y: '-100%', opacity: 0 }}\n              transition={{ duration: 0.45, ease: [0.2, 0.8, 0.2, 1] }}\n              className=\"inline-block rounded-md bg-primary px-2 text-primary-foreground\"\n            >\n              {WORDS[i]}\n            </motion.span>\n          </AnimatePresence>\n        </span>\n      </h2>\n    </div>\n  )\n}\n"}]}