{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "text-animate-demo",
  "type": "registry:component",
  "registryDependencies": [
    "text-animate"
  ],
  "files": [
    {
      "path": "registry/default/example/text-animate-demo.tsx",
      "content": "\"use client\"\n\nimport { useRef, useState } from \"react\"\nimport { motion, useInView } from \"motion/react\"\n\nimport { FadeIn } from \"@/components/fade-in\"\n\nimport TextAnimate from \"../ui/text-animate\"\n\n// @ts-ignore\nconst AnimationDemo = ({ type, children }) => {\n  const ref = useRef(null)\n  const isInView = useInView(ref, { once: true })\n  const [count, setCount] = useState(0)\n\n  return (\n    <div className=\"relative flex flex-col\" ref={ref}>\n      <div className=\"mt-8\">\n        <FadeIn key={count}>{children}</FadeIn>\n      </div>\n      <div className=\"absolute top-0 -right-5 md:right-5\">\n        <Refresh onClick={() => setCount(count + 1)} />\n      </div>\n      <div className=\"absolute bottom-0 -left-5 md:hidden\">\n        <Refresh onClick={() => setCount(count + 1)} />\n      </div>\n    </div>\n  )\n}\n\nconst button = {\n  rest: { scale: 1 },\n  hover: { scale: 1.1 },\n  pressed: { scale: 0.95 },\n}\nconst arrow = {\n  rest: { rotate: 0 },\n  hover: { rotate: 360, transition: { duration: 0.4 } },\n}\n\n// @ts-ignore\nconst Refresh = ({ onClick }) => {\n  return (\n    <motion.div\n      className=\"flex h-7 w-7 cursor-pointer items-center justify-center rounded border border-dotted p-1\"\n      onClick={onClick}\n      variants={button}\n      initial=\"rest\"\n      whileHover=\"hover\"\n      whileTap=\"pressed\"\n    >\n      <motion.svg\n        width=\"16\"\n        height=\"16\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        variants={arrow}\n      >\n        <path\n          d=\"M12.8 5.1541V2.5a.7.7 0 0 1 1.4 0v5a.7.7 0 0 1-.7.7h-5a.7.7 0 0 1 0-1.4h3.573c-.7005-1.8367-2.4886-3.1-4.5308-3.1C4.8665 3.7 2.7 5.85 2.7 8.5s2.1665 4.8 4.8422 4.8c1.3035 0 2.523-.512 3.426-1.4079a.7.7 0 0 1 .986.9938C10.7915 14.0396 9.2186 14.7 7.5422 14.7 4.0957 14.7 1.3 11.9257 1.3 8.5s2.7957-6.2 6.2422-6.2c2.1801 0 4.137 1.1192 5.2578 2.8541z\"\n          className=\"fill-black dark:fill-white\"\n          fillRule=\"nonzero\"\n        />\n      </motion.svg>\n    </motion.div>\n  )\n}\n\nexport default function TextAnimationDemo() {\n  return (\n    <AnimationDemo type=\"TextAnimate\">\n      <div>\n        <div className=\"flex flex-col\">\n          <div className=\"flex flex-col py-4\">\n            <div className=\"grid grid-cols-1 md:grid-cols-2\">\n              <div>\n                <p className=\"text-sm font-semibold\">Roll In</p>\n                <div className=\"md:mt-12\">\n                  <TextAnimate text=\"Roll In\" type=\"rollIn\" />\n                </div>\n              </div>\n\n              <div>\n                <p className=\"text-sm font-semibold\">Whip In</p>\n                <div className=\"md:mt-12\">\n                  <TextAnimate\n                    text=\"Whip In\"\n                    type=\"whipIn\"\n                    className=\"text-lg\"\n                  />\n                </div>\n              </div>\n              <div>\n                <p className=\"text-sm font-semibold\">fade In</p>\n                <div className=\"md:mt-12\">\n                  <TextAnimate text=\"Fade In\" type=\"fadeIn\" />\n                </div>\n              </div>\n\n              <div>\n                <p className=\"text-sm font-semibold\">Pop In</p>\n                <div className=\"md:mt-12\">\n                  <TextAnimate text=\"Pop In\" type=\"popIn\" />\n                </div>\n              </div>\n\n              <div>\n                <p className=\"text-sm font-semibold\">Fade In Up</p>\n                <div className=\"md:mt-12\">\n                  <TextAnimate text=\"Fade In Up\" type=\"fadeInUp\" />\n                </div>\n              </div>\n\n              <div>\n                <p className=\"text-sm font-semibold\">Shift In Up</p>\n                <div className=\"md:mt-12\">\n                  <TextAnimate text=\"Shift In Up\" type=\"shiftInUp\" />\n                </div>\n              </div>\n\n              <div>\n                <p className=\"text-sm font-semibold\">Whip In Up</p>\n                <div className=\"md:mt-12\">\n                  <TextAnimate text=\"Whip In Up\" type=\"whipInUp\" />\n                </div>\n              </div>\n\n              <div>\n                <p className=\"text-sm font-semibold\">Calm In Up</p>\n                <div className=\"md:mt-12\">\n                  <TextAnimate text=\"Calm In Up\" type=\"calmInUp\" />\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </AnimationDemo>\n  )\n}\n",
      "type": "registry:component"
    }
  ]
}