{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "animated-quote-block-shadcnui",
  "type": "registry:ui",
  "title": "Animated Quote Block",
  "description": "Quote that types itself in, pauses, then subtly breathes",
  "dependencies": [
    "framer-motion",
    "react"
  ],
  "files": [
    {
      "path": "@uitripled/react-shadcn/src/components/motion-core/animated-quote-block.tsx",
      "content": "\"use client\";\n\nimport { AnimatePresence, motion } from \"framer-motion\";\nimport { useEffect, useState } from \"react\";\n\ntype AnimatedQuoteBlockProps = {\n  quote?: string;\n  author?: string;\n  typingSpeed?: number;\n};\n\nexport function AnimatedQuoteBlock({\n  quote = \"The only way to do great work is to love what you do.\",\n  author = \"Steve Jobs\",\n  typingSpeed = 50,\n}: AnimatedQuoteBlockProps) {\n  const [displayedText, setDisplayedText] = useState(\"\");\n  const [isTyping, setIsTyping] = useState(true);\n  const [showPulse, setShowPulse] = useState(false);\n\n  useEffect(() => {\n    let index = 0;\n    const timer = setInterval(() => {\n      if (index < quote.length) {\n        setDisplayedText(quote.slice(0, index + 1));\n        index++;\n      } else {\n        setIsTyping(false);\n        setShowPulse(true);\n        clearInterval(timer);\n      }\n    }, typingSpeed);\n\n    return () => clearInterval(timer);\n  }, [quote, typingSpeed]);\n\n  return (\n    <div className=\"w-full max-w-2xl rounded-2xl border border-border bg-card p-8\">\n      <motion.div\n        animate={{\n          scale: showPulse ? [1, 1.02, 1] : 1,\n        }}\n        transition={{\n          duration: 2,\n          repeat: showPulse ? Infinity : 0,\n          ease: \"easeInOut\",\n        }}\n        className=\"relative\"\n      >\n        <div className=\"text-4xl font-bold text-primary\">\"</div>\n\n        <div className=\"py-4 text-xl leading-relaxed\">\n          <AnimatePresence mode=\"wait\">\n            {isTyping ? (\n              <motion.span\n                key=\"typing\"\n                initial={{ opacity: 0 }}\n                animate={{ opacity: 1 }}\n                exit={{ opacity: 0 }}\n              >\n                {displayedText}\n                <motion.span\n                  animate={{ opacity: [1, 0, 1] }}\n                  transition={{ duration: 0.8, repeat: Infinity }}\n                  className=\"inline-block w-0.5 bg-current\"\n                />\n              </motion.span>\n            ) : (\n              <motion.span\n                key=\"complete\"\n                initial={{ opacity: 0 }}\n                animate={{ opacity: 1 }}\n              >\n                {quote}\n              </motion.span>\n            )}\n          </AnimatePresence>\n        </div>\n\n        <div className=\"mt-4 text-right text-sm text-muted-foreground\">\n          - {author}\n        </div>\n      </motion.div>\n    </div>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/uitripled/animated-quote-block-shadcnui.tsx"
    }
  ]
}