{
  "$schema": "https://www.cooki-ui.design/schema/registry-item.json",
  "name": "rolling-text-3d",
  "type": "registry:ui",
  "title": "Rolling Text 3D",
  "description": "Vertical 3D cylinder rotating headline ticker cycling through phrases with spring physics.",
  "category": "text",
  "dependencies": [
    "framer-motion"
  ],
  "files": [
    {
      "path": "registry/text/rolling-text-3d/rolling-text-3d.tsx",
      "type": "registry:ui",
      "target": "components/ui/rolling-text-3d.tsx",
      "content": "import React, { useState, useEffect } from 'react';\nimport { motion, AnimatePresence } from 'framer-motion';\n\nconst WORDS = ['SYNTHESIZING', 'VERIFYING', 'OPTIMIZING', 'EMITTING'];\n\nexport const RollingText3D: React.FC = () => {\n  const [index, setIndex] = useState(0);\n\n  useEffect(() => {\n    const timer = setInterval(() => {\n      setIndex((prev) => (prev + 1) % WORDS.length);\n    }, 2200);\n    return () => clearInterval(timer);\n  }, []);\n\n  return (\n    <div className=\"flex flex-col items-center justify-center p-6 font-mono text-center\">\n      <span className=\"text-xs uppercase tracking-widest text-zinc-500 mb-2\">AUTONOMOUS RUNTIME</span>\n      <div className=\"h-12 overflow-hidden flex items-center justify-center\">\n        <AnimatePresence mode=\"wait\">\n          <motion.div\n            key={WORDS[index]}\n            initial={{ y: 35, opacity: 0, rotateX: -60 }}\n            animate={{ y: 0, opacity: 1, rotateX: 0 }}\n            exit={{ y: -35, opacity: 0, rotateX: 60 }}\n            transition={{ duration: 0.5, ease: [0.16, 1, 0.3, 1] }}\n            className=\"text-2xl sm:text-3xl font-extrabold tracking-tight bg-gradient-to-r from-indigo-500 via-violet-400 to-cyan-400 bg-clip-text text-transparent\"\n          >\n            {WORDS[index]}\n          </motion.div>\n        </AnimatePresence>\n      </div>\n    </div>\n  );\n};\n\nexport const RollingText3d = RollingText3D;\n\n"
    }
  ]
}