{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "parallax-floating",
  "type": "registry:block",
  "title": "Parallax floating",
  "description": "Parallax floating",
  "files": [
    {
      "path": "components/usages/parallaxfloatingusage.tsx",
      "content": "\"use client\";\n\nimport React from \"react\";\n\nimport Link from \"next/link\";\n\nimport Floating, {\n\tFloatingElement,\n} from \"@/registry/open-source/parallax-floating\";\nimport TextRotate from \"@/registry/open-source/text-rotate\";\nimport { LayoutGroup, motion } from \"motion/react\";\n\nconst exampleImages = [\n\t{\n\t\turl: \"/itjustworks.jpg\",\n\t\tauthor: \"Branislav Rodman\",\n\t\ttitle: \"A Black and White Photo of a Woman Brushing Her Teeth\",\n\t},\n\t{\n\t\turl: \"/itjustworks.jpg\",\n\t\tlink: \"https://unsplash.com/photos/a-painting-of-a-palm-leaf-on-a-multicolored-background-AaNPwrSNOFE\",\n\t\ttitle: \"Neon Palm\",\n\t\tauthor: \"Tim Mossholder\",\n\t},\n\t{\n\t\turl: \"/itjustworks.jpg\",\n\t\tlink: \"https://unsplash.com/photos/a-blurry-photo-of-a-crowd-of-people-UgbxzloNGsc\",\n\t\tauthor: \"ANDRII SOLOK\",\n\t\ttitle: \"A blurry photo of a crowd of people\",\n\t},\n\t{\n\t\turl: \"/itjustworks.jpg\",\n\t\tlink: \"https://unsplash.com/photos/rippling-crystal-blue-water-9-OCsKoyQlk\",\n\t\tauthor: \"Wesley Tingey\",\n\t\ttitle: \"Rippling Crystal Blue Water\",\n\t},\n\t{\n\t\turl: \"/itjustworks.jpg\",\n\t\tlink: \"https://unsplash.com/de/fotos/mann-im-schwarzen-hemd-unter-blauem-himmel-m8RDNiuEXro\",\n\t\tauthor: \"Serhii Tyaglovsky\",\n\t\ttitle: \"Mann im schwarzen Hemd unter blauem Himmel\",\n\t},\n\t{\n\t\turl: \"/itjustworks.jpg\",\n\t\tlink: \"https://unsplash.com/photos/a-woman-with-a-flower-crown-on-her-head-0S3muIttbsY\",\n\t\tauthor: \"Vladimir Yelizarov\",\n\t\ttitle: \"A women with a flower crown on her head\",\n\t},\n\t{\n\t\turl: \"/itjustworks.jpg\",\n\t\ttitle: \"A blurry photo of white flowers in a field\",\n\t\tauthor: \"Eugene Golovesov\",\n\t\tlink: \"https://unsplash.com/photos/a-blurry-photo-of-white-flowers-in-a-field-6qbx0lzGPyc\",\n\t},\n\t{\n\t\turl: \"/itjustworks.jpg\",\n\t\tauthor: \"Mathilde Langevin\",\n\t\tlink: \"https://unsplash.com/photos/a-table-topped-with-two-wine-glasses-and-plates-Ig0gRAHspV0\",\n\t\ttitle: \"A table topped with two wine glasses and plates\",\n\t},\n];\n\nexport default function Usage() {\n\treturn (\n\t\t<div className=\"h-screen w-full flex items-center justify-center relative overflow-hidden bg-background\">\n\t\t\t<section className=\"w-full h-screen overflow-hidden md:overflow-visible flex flex-col items-center justify-center relative\">\n\t\t\t\t<Floating sensitivity={-0.5} className=\"h-full\">\n\t\t\t\t\t<FloatingElement\n\t\t\t\t\t\tdepth={0.5}\n\t\t\t\t\t\tclassName=\"top-[15%] left-[2%] md:top-[25%] md:left-[5%]\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<motion.img\n\t\t\t\t\t\t\tsrc={exampleImages[0].url}\n\t\t\t\t\t\t\talt={exampleImages[0].title}\n\t\t\t\t\t\t\tclassName=\"w-16 h-12 sm:w-24 sm:h-16 md:w-28 md:h-20 lg:w-32 lg:h-24 object-cover hover:scale-105 duration-200 cursor-pointer transition-transform -rotate-3 shadow-2xl rounded-xl\"\n\t\t\t\t\t\t\tinitial={{ opacity: 0 }}\n\t\t\t\t\t\t\tanimate={{ opacity: 1 }}\n\t\t\t\t\t\t\ttransition={{ delay: 0.5 }}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</FloatingElement>\n\n\t\t\t\t\t<FloatingElement\n\t\t\t\t\t\tdepth={1}\n\t\t\t\t\t\tclassName=\"top-[0%] left-[8%] md:top-[6%] md:left-[11%]\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<motion.img\n\t\t\t\t\t\t\tsrc={exampleImages[1].url}\n\t\t\t\t\t\t\talt={exampleImages[1].title}\n\t\t\t\t\t\t\tclassName=\"w-40 h-28 sm:w-48 sm:h-36 md:w-56 md:h-44 lg:w-60 lg:h-48 object-cover hover:scale-105 duration-200 cursor-pointer transition-transform -rotate-12 shadow-2xl rounded-xl\"\n\t\t\t\t\t\t\tinitial={{ opacity: 0 }}\n\t\t\t\t\t\t\tanimate={{ opacity: 1 }}\n\t\t\t\t\t\t\ttransition={{ delay: 0.7 }}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</FloatingElement>\n\n\t\t\t\t\t<FloatingElement\n\t\t\t\t\t\tdepth={4}\n\t\t\t\t\t\tclassName=\"top-[90%] left-[6%] md:top-[80%] md:left-[8%]\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<motion.img\n\t\t\t\t\t\t\tsrc={exampleImages[2].url}\n\t\t\t\t\t\t\talt={exampleImages[2].title}\n\t\t\t\t\t\t\tclassName=\"w-40 h-40 sm:w-48 sm:h-48 md:w-60 md:h-60 lg:w-64 lg:h-64 object-cover -rotate-[4deg] hover:scale-105 duration-200 cursor-pointer transition-transform shadow-2xl rounded-xl\"\n\t\t\t\t\t\t\tinitial={{ opacity: 0 }}\n\t\t\t\t\t\t\tanimate={{ opacity: 1 }}\n\t\t\t\t\t\t\ttransition={{ delay: 0.9 }}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</FloatingElement>\n\n\t\t\t\t\t<FloatingElement\n\t\t\t\t\t\tdepth={2}\n\t\t\t\t\t\tclassName=\"top-[0%] left-[87%] md:top-[2%] md:left-[83%]\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<motion.img\n\t\t\t\t\t\t\tsrc={exampleImages[3].url}\n\t\t\t\t\t\t\talt={exampleImages[3].title}\n\t\t\t\t\t\t\tclassName=\"w-40 h-36 sm:w-48 sm:h-44 md:w-60 md:h-52 lg:w-64 lg:h-56 object-cover hover:scale-105 duration-200 cursor-pointer transition-transform shadow-2xl rotate-6 rounded-xl\"\n\t\t\t\t\t\t\tinitial={{ opacity: 0 }}\n\t\t\t\t\t\t\tanimate={{ opacity: 1 }}\n\t\t\t\t\t\t\ttransition={{ delay: 1.1 }}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</FloatingElement>\n\n\t\t\t\t\t<FloatingElement\n\t\t\t\t\t\tdepth={1}\n\t\t\t\t\t\tclassName=\"top-[78%] left-[83%] md:top-[68%] md:left-[83%]\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<motion.img\n\t\t\t\t\t\t\tsrc={exampleImages[4].url}\n\t\t\t\t\t\t\talt={exampleImages[4].title}\n\t\t\t\t\t\t\tclassName=\"w-44 h-44 sm:w-64 sm:h-64 md:w-72 md:h-72 lg:w-80 lg:h-80 object-cover hover:scale-105 duration-200 cursor-pointer transition-transform shadow-2xl rotate-19 rounded-xl\"\n\t\t\t\t\t\t\tinitial={{ opacity: 0 }}\n\t\t\t\t\t\t\tanimate={{ opacity: 1 }}\n\t\t\t\t\t\t\ttransition={{ delay: 1.3 }}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</FloatingElement>\n\t\t\t\t</Floating>\n\n\t\t\t\t<div className=\"flex flex-col justify-center items-center w-[250px] sm:w-[300px] md:w-[500px] lg:w-[700px] z-50 pointer-events-auto\">\n\t\t\t\t\t<motion.h1\n\t\t\t\t\t\tclassName=\"text-3xl sm:text-5xl md:text-7xl lg:text-8xl text-center w-full justify-center items-center flex-col flex whitespace-pre leading-tight font-calendas tracking-tight space-y-1 md:space-y-4\"\n\t\t\t\t\t\tanimate={{ opacity: 1, y: 0 }}\n\t\t\t\t\t\tinitial={{ opacity: 0, y: 20 }}\n\t\t\t\t\t\ttransition={{\n\t\t\t\t\t\t\tduration: 0.2,\n\t\t\t\t\t\t\tease: \"easeOut\",\n\t\t\t\t\t\t\tdelay: 0.3,\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t<span>Make your </span>\n\t\t\t\t\t\t<LayoutGroup>\n\t\t\t\t\t\t\t<motion.span layout className=\"flex whitespace-pre\">\n\t\t\t\t\t\t\t\t<motion.span\n\t\t\t\t\t\t\t\t\tlayout\n\t\t\t\t\t\t\t\t\tclassName=\"flex whitespace-pre\"\n\t\t\t\t\t\t\t\t\ttransition={{\n\t\t\t\t\t\t\t\t\t\ttype: \"spring\",\n\t\t\t\t\t\t\t\t\t\tdamping: 30,\n\t\t\t\t\t\t\t\t\t\tstiffness: 400,\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\twebsite{\" \"}\n\t\t\t\t\t\t\t\t</motion.span>\n\t\t\t\t\t\t\t\t<TextRotate\n\t\t\t\t\t\t\t\t\ttexts={[\n\t\t\t\t\t\t\t\t\t\t\"fancy\",\n\t\t\t\t\t\t\t\t\t\t\"fun\",\n\t\t\t\t\t\t\t\t\t\t\"lovely ♥\",\n\t\t\t\t\t\t\t\t\t\t\"weird\",\n\t\t\t\t\t\t\t\t\t\t\"🪩 funky\",\n\t\t\t\t\t\t\t\t\t\t\"💃🕺\",\n\t\t\t\t\t\t\t\t\t\t\"sexy\",\n\t\t\t\t\t\t\t\t\t\t\"🕶️ cool\",\n\t\t\t\t\t\t\t\t\t\t\"go 🚀\",\n\t\t\t\t\t\t\t\t\t\t\"🔥🔥🔥\",\n\t\t\t\t\t\t\t\t\t\t\"over-animated?\",\n\t\t\t\t\t\t\t\t\t\t\"pop ✨\",\n\t\t\t\t\t\t\t\t\t\t\"rock 🤘\",\n\t\t\t\t\t\t\t\t\t]}\n\t\t\t\t\t\t\t\t\tmainClassName=\"overflow-hidden pr-3 text-primary py-0 pb-2 md:pb-4 rounded-xl\"\n\t\t\t\t\t\t\t\t\tstaggerDuration={0.03}\n\t\t\t\t\t\t\t\t\tstaggerFrom=\"last\"\n\t\t\t\t\t\t\t\t\trotationInterval={3000}\n\t\t\t\t\t\t\t\t\ttransition={{\n\t\t\t\t\t\t\t\t\t\ttype: \"spring\",\n\t\t\t\t\t\t\t\t\t\tdamping: 30,\n\t\t\t\t\t\t\t\t\t\tstiffness: 400,\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</motion.span>\n\t\t\t\t\t\t</LayoutGroup>\n\t\t\t\t\t</motion.h1>\n\t\t\t\t\t<motion.p\n\t\t\t\t\t\tclassName=\"text-sm sm:text-lg md:text-xl lg:text-2xl text-center font-overusedGrotesk pt-4 sm:pt-8 md:pt-10 lg:pt-12\"\n\t\t\t\t\t\tanimate={{ opacity: 1, y: 0 }}\n\t\t\t\t\t\tinitial={{ opacity: 0, y: 20 }}\n\t\t\t\t\t\ttransition={{\n\t\t\t\t\t\t\tduration: 0.2,\n\t\t\t\t\t\t\tease: \"easeOut\",\n\t\t\t\t\t\t\tdelay: 0.5,\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\twith a growing library of ready-to-use react components &\n\t\t\t\t\t\tmicrointeractions. free & open source.\n\t\t\t\t\t</motion.p>\n\n\t\t\t\t\t<div className=\"flex flex-row justify-center space-x-4 items-center mt-10 sm:mt-16 md:mt-20 lg:mt-20 text-xs\">\n\t\t\t\t\t\t<motion.button\n\t\t\t\t\t\t\tclassName=\"sm:text-base md:text-lg lg:text-xl font-semibold tracking-tight text-secondary bg-foreground px-4 py-2 sm:px-5 sm:py-2.5 md:px-6 md:py-3 lg:px-8 lg:py-3 rounded-full z-20 shadow-2xl font-calendas\"\n\t\t\t\t\t\t\tanimate={{ opacity: 1, y: 0 }}\n\t\t\t\t\t\t\tinitial={{ opacity: 0, y: 20 }}\n\t\t\t\t\t\t\ttransition={{\n\t\t\t\t\t\t\t\tduration: 0.2,\n\t\t\t\t\t\t\t\tease: \"easeOut\",\n\t\t\t\t\t\t\t\tdelay: 0.7,\n\t\t\t\t\t\t\t\tscale: { duration: 0.2 },\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\twhileHover={{\n\t\t\t\t\t\t\t\tscale: 1.05,\n\t\t\t\t\t\t\t\ttransition: {\n\t\t\t\t\t\t\t\t\ttype: \"spring\",\n\t\t\t\t\t\t\t\t\tdamping: 30,\n\t\t\t\t\t\t\t\t\tstiffness: 400,\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Link href=\"/docs/introduction\">\n\t\t\t\t\t\t\t\tCheck docs <span className=\"font-serif ml-1\">→</span>\n\t\t\t\t\t\t\t</Link>\n\t\t\t\t\t\t</motion.button>\n\t\t\t\t\t\t<motion.button\n\t\t\t\t\t\t\tclassName=\"sm:text-base md:text-lg lg:text-xl font-semibold tracking-tight text-secondary bg-background px-4 py-2 sm:px-5 sm:py-2.5 md:px-6 md:py-3 lg:px-8 lg:py-3 rounded-full z-20 shadow-2xl font-calendas\"\n\t\t\t\t\t\t\tanimate={{ opacity: 1, y: 0 }}\n\t\t\t\t\t\t\tinitial={{ opacity: 0, y: 20 }}\n\t\t\t\t\t\t\ttransition={{\n\t\t\t\t\t\t\t\tduration: 0.2,\n\t\t\t\t\t\t\t\tease: \"easeOut\",\n\t\t\t\t\t\t\t\tdelay: 0.7,\n\t\t\t\t\t\t\t\tscale: { duration: 0.2 },\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\twhileHover={{\n\t\t\t\t\t\t\t\tscale: 1.05,\n\t\t\t\t\t\t\t\ttransition: {\n\t\t\t\t\t\t\t\t\ttype: \"spring\",\n\t\t\t\t\t\t\t\t\tdamping: 30,\n\t\t\t\t\t\t\t\t\tstiffness: 400,\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Link href=\"https://github.com/danielpetho/fancy\">\n\t\t\t\t\t\t\t\t★ on GitHub\n\t\t\t\t\t\t\t</Link>\n\t\t\t\t\t\t</motion.button>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</section>{\" \"}\n\t\t</div>\n\t);\n}\n",
      "type": "registry:block",
      "target": "~/example.tsx"
    },
    {
      "path": "components/usages/parallaxfloatingusage.tsx",
      "content": "\"use client\";\n\nimport React from \"react\";\n\nimport Link from \"next/link\";\n\nimport Floating, {\n\tFloatingElement,\n} from \"@/registry/open-source/parallax-floating\";\nimport TextRotate from \"@/registry/open-source/text-rotate\";\nimport { LayoutGroup, motion } from \"motion/react\";\n\nconst exampleImages = [\n\t{\n\t\turl: \"/itjustworks.jpg\",\n\t\tauthor: \"Branislav Rodman\",\n\t\ttitle: \"A Black and White Photo of a Woman Brushing Her Teeth\",\n\t},\n\t{\n\t\turl: \"/itjustworks.jpg\",\n\t\tlink: \"https://unsplash.com/photos/a-painting-of-a-palm-leaf-on-a-multicolored-background-AaNPwrSNOFE\",\n\t\ttitle: \"Neon Palm\",\n\t\tauthor: \"Tim Mossholder\",\n\t},\n\t{\n\t\turl: \"/itjustworks.jpg\",\n\t\tlink: \"https://unsplash.com/photos/a-blurry-photo-of-a-crowd-of-people-UgbxzloNGsc\",\n\t\tauthor: \"ANDRII SOLOK\",\n\t\ttitle: \"A blurry photo of a crowd of people\",\n\t},\n\t{\n\t\turl: \"/itjustworks.jpg\",\n\t\tlink: \"https://unsplash.com/photos/rippling-crystal-blue-water-9-OCsKoyQlk\",\n\t\tauthor: \"Wesley Tingey\",\n\t\ttitle: \"Rippling Crystal Blue Water\",\n\t},\n\t{\n\t\turl: \"/itjustworks.jpg\",\n\t\tlink: \"https://unsplash.com/de/fotos/mann-im-schwarzen-hemd-unter-blauem-himmel-m8RDNiuEXro\",\n\t\tauthor: \"Serhii Tyaglovsky\",\n\t\ttitle: \"Mann im schwarzen Hemd unter blauem Himmel\",\n\t},\n\t{\n\t\turl: \"/itjustworks.jpg\",\n\t\tlink: \"https://unsplash.com/photos/a-woman-with-a-flower-crown-on-her-head-0S3muIttbsY\",\n\t\tauthor: \"Vladimir Yelizarov\",\n\t\ttitle: \"A women with a flower crown on her head\",\n\t},\n\t{\n\t\turl: \"/itjustworks.jpg\",\n\t\ttitle: \"A blurry photo of white flowers in a field\",\n\t\tauthor: \"Eugene Golovesov\",\n\t\tlink: \"https://unsplash.com/photos/a-blurry-photo-of-white-flowers-in-a-field-6qbx0lzGPyc\",\n\t},\n\t{\n\t\turl: \"/itjustworks.jpg\",\n\t\tauthor: \"Mathilde Langevin\",\n\t\tlink: \"https://unsplash.com/photos/a-table-topped-with-two-wine-glasses-and-plates-Ig0gRAHspV0\",\n\t\ttitle: \"A table topped with two wine glasses and plates\",\n\t},\n];\n\nexport default function Usage() {\n\treturn (\n\t\t<div className=\"h-screen w-full flex items-center justify-center relative overflow-hidden bg-background\">\n\t\t\t<section className=\"w-full h-screen overflow-hidden md:overflow-visible flex flex-col items-center justify-center relative\">\n\t\t\t\t<Floating sensitivity={-0.5} className=\"h-full\">\n\t\t\t\t\t<FloatingElement\n\t\t\t\t\t\tdepth={0.5}\n\t\t\t\t\t\tclassName=\"top-[15%] left-[2%] md:top-[25%] md:left-[5%]\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<motion.img\n\t\t\t\t\t\t\tsrc={exampleImages[0].url}\n\t\t\t\t\t\t\talt={exampleImages[0].title}\n\t\t\t\t\t\t\tclassName=\"w-16 h-12 sm:w-24 sm:h-16 md:w-28 md:h-20 lg:w-32 lg:h-24 object-cover hover:scale-105 duration-200 cursor-pointer transition-transform -rotate-3 shadow-2xl rounded-xl\"\n\t\t\t\t\t\t\tinitial={{ opacity: 0 }}\n\t\t\t\t\t\t\tanimate={{ opacity: 1 }}\n\t\t\t\t\t\t\ttransition={{ delay: 0.5 }}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</FloatingElement>\n\n\t\t\t\t\t<FloatingElement\n\t\t\t\t\t\tdepth={1}\n\t\t\t\t\t\tclassName=\"top-[0%] left-[8%] md:top-[6%] md:left-[11%]\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<motion.img\n\t\t\t\t\t\t\tsrc={exampleImages[1].url}\n\t\t\t\t\t\t\talt={exampleImages[1].title}\n\t\t\t\t\t\t\tclassName=\"w-40 h-28 sm:w-48 sm:h-36 md:w-56 md:h-44 lg:w-60 lg:h-48 object-cover hover:scale-105 duration-200 cursor-pointer transition-transform -rotate-12 shadow-2xl rounded-xl\"\n\t\t\t\t\t\t\tinitial={{ opacity: 0 }}\n\t\t\t\t\t\t\tanimate={{ opacity: 1 }}\n\t\t\t\t\t\t\ttransition={{ delay: 0.7 }}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</FloatingElement>\n\n\t\t\t\t\t<FloatingElement\n\t\t\t\t\t\tdepth={4}\n\t\t\t\t\t\tclassName=\"top-[90%] left-[6%] md:top-[80%] md:left-[8%]\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<motion.img\n\t\t\t\t\t\t\tsrc={exampleImages[2].url}\n\t\t\t\t\t\t\talt={exampleImages[2].title}\n\t\t\t\t\t\t\tclassName=\"w-40 h-40 sm:w-48 sm:h-48 md:w-60 md:h-60 lg:w-64 lg:h-64 object-cover -rotate-[4deg] hover:scale-105 duration-200 cursor-pointer transition-transform shadow-2xl rounded-xl\"\n\t\t\t\t\t\t\tinitial={{ opacity: 0 }}\n\t\t\t\t\t\t\tanimate={{ opacity: 1 }}\n\t\t\t\t\t\t\ttransition={{ delay: 0.9 }}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</FloatingElement>\n\n\t\t\t\t\t<FloatingElement\n\t\t\t\t\t\tdepth={2}\n\t\t\t\t\t\tclassName=\"top-[0%] left-[87%] md:top-[2%] md:left-[83%]\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<motion.img\n\t\t\t\t\t\t\tsrc={exampleImages[3].url}\n\t\t\t\t\t\t\talt={exampleImages[3].title}\n\t\t\t\t\t\t\tclassName=\"w-40 h-36 sm:w-48 sm:h-44 md:w-60 md:h-52 lg:w-64 lg:h-56 object-cover hover:scale-105 duration-200 cursor-pointer transition-transform shadow-2xl rotate-6 rounded-xl\"\n\t\t\t\t\t\t\tinitial={{ opacity: 0 }}\n\t\t\t\t\t\t\tanimate={{ opacity: 1 }}\n\t\t\t\t\t\t\ttransition={{ delay: 1.1 }}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</FloatingElement>\n\n\t\t\t\t\t<FloatingElement\n\t\t\t\t\t\tdepth={1}\n\t\t\t\t\t\tclassName=\"top-[78%] left-[83%] md:top-[68%] md:left-[83%]\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<motion.img\n\t\t\t\t\t\t\tsrc={exampleImages[4].url}\n\t\t\t\t\t\t\talt={exampleImages[4].title}\n\t\t\t\t\t\t\tclassName=\"w-44 h-44 sm:w-64 sm:h-64 md:w-72 md:h-72 lg:w-80 lg:h-80 object-cover hover:scale-105 duration-200 cursor-pointer transition-transform shadow-2xl rotate-19 rounded-xl\"\n\t\t\t\t\t\t\tinitial={{ opacity: 0 }}\n\t\t\t\t\t\t\tanimate={{ opacity: 1 }}\n\t\t\t\t\t\t\ttransition={{ delay: 1.3 }}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</FloatingElement>\n\t\t\t\t</Floating>\n\n\t\t\t\t<div className=\"flex flex-col justify-center items-center w-[250px] sm:w-[300px] md:w-[500px] lg:w-[700px] z-50 pointer-events-auto\">\n\t\t\t\t\t<motion.h1\n\t\t\t\t\t\tclassName=\"text-3xl sm:text-5xl md:text-7xl lg:text-8xl text-center w-full justify-center items-center flex-col flex whitespace-pre leading-tight font-calendas tracking-tight space-y-1 md:space-y-4\"\n\t\t\t\t\t\tanimate={{ opacity: 1, y: 0 }}\n\t\t\t\t\t\tinitial={{ opacity: 0, y: 20 }}\n\t\t\t\t\t\ttransition={{\n\t\t\t\t\t\t\tduration: 0.2,\n\t\t\t\t\t\t\tease: \"easeOut\",\n\t\t\t\t\t\t\tdelay: 0.3,\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t<span>Make your </span>\n\t\t\t\t\t\t<LayoutGroup>\n\t\t\t\t\t\t\t<motion.span layout className=\"flex whitespace-pre\">\n\t\t\t\t\t\t\t\t<motion.span\n\t\t\t\t\t\t\t\t\tlayout\n\t\t\t\t\t\t\t\t\tclassName=\"flex whitespace-pre\"\n\t\t\t\t\t\t\t\t\ttransition={{\n\t\t\t\t\t\t\t\t\t\ttype: \"spring\",\n\t\t\t\t\t\t\t\t\t\tdamping: 30,\n\t\t\t\t\t\t\t\t\t\tstiffness: 400,\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\twebsite{\" \"}\n\t\t\t\t\t\t\t\t</motion.span>\n\t\t\t\t\t\t\t\t<TextRotate\n\t\t\t\t\t\t\t\t\ttexts={[\n\t\t\t\t\t\t\t\t\t\t\"fancy\",\n\t\t\t\t\t\t\t\t\t\t\"fun\",\n\t\t\t\t\t\t\t\t\t\t\"lovely ♥\",\n\t\t\t\t\t\t\t\t\t\t\"weird\",\n\t\t\t\t\t\t\t\t\t\t\"🪩 funky\",\n\t\t\t\t\t\t\t\t\t\t\"💃🕺\",\n\t\t\t\t\t\t\t\t\t\t\"sexy\",\n\t\t\t\t\t\t\t\t\t\t\"🕶️ cool\",\n\t\t\t\t\t\t\t\t\t\t\"go 🚀\",\n\t\t\t\t\t\t\t\t\t\t\"🔥🔥🔥\",\n\t\t\t\t\t\t\t\t\t\t\"over-animated?\",\n\t\t\t\t\t\t\t\t\t\t\"pop ✨\",\n\t\t\t\t\t\t\t\t\t\t\"rock 🤘\",\n\t\t\t\t\t\t\t\t\t]}\n\t\t\t\t\t\t\t\t\tmainClassName=\"overflow-hidden pr-3 text-primary py-0 pb-2 md:pb-4 rounded-xl\"\n\t\t\t\t\t\t\t\t\tstaggerDuration={0.03}\n\t\t\t\t\t\t\t\t\tstaggerFrom=\"last\"\n\t\t\t\t\t\t\t\t\trotationInterval={3000}\n\t\t\t\t\t\t\t\t\ttransition={{\n\t\t\t\t\t\t\t\t\t\ttype: \"spring\",\n\t\t\t\t\t\t\t\t\t\tdamping: 30,\n\t\t\t\t\t\t\t\t\t\tstiffness: 400,\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</motion.span>\n\t\t\t\t\t\t</LayoutGroup>\n\t\t\t\t\t</motion.h1>\n\t\t\t\t\t<motion.p\n\t\t\t\t\t\tclassName=\"text-sm sm:text-lg md:text-xl lg:text-2xl text-center font-overusedGrotesk pt-4 sm:pt-8 md:pt-10 lg:pt-12\"\n\t\t\t\t\t\tanimate={{ opacity: 1, y: 0 }}\n\t\t\t\t\t\tinitial={{ opacity: 0, y: 20 }}\n\t\t\t\t\t\ttransition={{\n\t\t\t\t\t\t\tduration: 0.2,\n\t\t\t\t\t\t\tease: \"easeOut\",\n\t\t\t\t\t\t\tdelay: 0.5,\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\twith a growing library of ready-to-use react components &\n\t\t\t\t\t\tmicrointeractions. free & open source.\n\t\t\t\t\t</motion.p>\n\n\t\t\t\t\t<div className=\"flex flex-row justify-center space-x-4 items-center mt-10 sm:mt-16 md:mt-20 lg:mt-20 text-xs\">\n\t\t\t\t\t\t<motion.button\n\t\t\t\t\t\t\tclassName=\"sm:text-base md:text-lg lg:text-xl font-semibold tracking-tight text-secondary bg-foreground px-4 py-2 sm:px-5 sm:py-2.5 md:px-6 md:py-3 lg:px-8 lg:py-3 rounded-full z-20 shadow-2xl font-calendas\"\n\t\t\t\t\t\t\tanimate={{ opacity: 1, y: 0 }}\n\t\t\t\t\t\t\tinitial={{ opacity: 0, y: 20 }}\n\t\t\t\t\t\t\ttransition={{\n\t\t\t\t\t\t\t\tduration: 0.2,\n\t\t\t\t\t\t\t\tease: \"easeOut\",\n\t\t\t\t\t\t\t\tdelay: 0.7,\n\t\t\t\t\t\t\t\tscale: { duration: 0.2 },\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\twhileHover={{\n\t\t\t\t\t\t\t\tscale: 1.05,\n\t\t\t\t\t\t\t\ttransition: {\n\t\t\t\t\t\t\t\t\ttype: \"spring\",\n\t\t\t\t\t\t\t\t\tdamping: 30,\n\t\t\t\t\t\t\t\t\tstiffness: 400,\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Link href=\"/docs/introduction\">\n\t\t\t\t\t\t\t\tCheck docs <span className=\"font-serif ml-1\">→</span>\n\t\t\t\t\t\t\t</Link>\n\t\t\t\t\t\t</motion.button>\n\t\t\t\t\t\t<motion.button\n\t\t\t\t\t\t\tclassName=\"sm:text-base md:text-lg lg:text-xl font-semibold tracking-tight text-secondary bg-background px-4 py-2 sm:px-5 sm:py-2.5 md:px-6 md:py-3 lg:px-8 lg:py-3 rounded-full z-20 shadow-2xl font-calendas\"\n\t\t\t\t\t\t\tanimate={{ opacity: 1, y: 0 }}\n\t\t\t\t\t\t\tinitial={{ opacity: 0, y: 20 }}\n\t\t\t\t\t\t\ttransition={{\n\t\t\t\t\t\t\t\tduration: 0.2,\n\t\t\t\t\t\t\t\tease: \"easeOut\",\n\t\t\t\t\t\t\t\tdelay: 0.7,\n\t\t\t\t\t\t\t\tscale: { duration: 0.2 },\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\twhileHover={{\n\t\t\t\t\t\t\t\tscale: 1.05,\n\t\t\t\t\t\t\t\ttransition: {\n\t\t\t\t\t\t\t\t\ttype: \"spring\",\n\t\t\t\t\t\t\t\t\tdamping: 30,\n\t\t\t\t\t\t\t\t\tstiffness: 400,\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Link href=\"https://github.com/danielpetho/fancy\">\n\t\t\t\t\t\t\t\t★ on GitHub\n\t\t\t\t\t\t\t</Link>\n\t\t\t\t\t\t</motion.button>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</section>{\" \"}\n\t\t</div>\n\t);\n}\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/open-source/text-rotate.tsx",
      "content": "\"use client\";\r\n\r\nimport {\r\n\tElementType,\r\n\tforwardRef,\r\n\tuseCallback,\r\n\tuseEffect,\r\n\tuseImperativeHandle,\r\n\tuseMemo,\r\n\tuseState,\r\n} from \"react\";\r\n\r\nimport { cn } from \"@/registry/utilities/cn\";\r\nimport {\r\n\tAnimatePresence,\r\n\tAnimatePresenceProps,\r\n\tmotion,\r\n\tMotionProps,\r\n\tTransition,\r\n} from \"motion/react\";\r\n\r\n// Credit:\r\n// https://www.fancycomponents.dev/docs/components/text/text-rotate\r\n\r\n// handy function to split text into characters with support for unicode and emojis\r\nconst splitIntoCharacters = (text: string): string[] => {\r\n\tif (typeof Intl !== \"undefined\" && \"Segmenter\" in Intl) {\r\n\t\tconst segmenter = new Intl.Segmenter(\"en\", { granularity: \"grapheme\" });\r\n\t\treturn Array.from(segmenter.segment(text), ({ segment }) => segment);\r\n\t}\r\n\t// Fallback for browsers that don't support Intl.Segmenter\r\n\treturn Array.from(text);\r\n};\r\n\r\ninterface TextRotateProps {\r\n\t/**\r\n\t * Array of text strings to rotate through.\r\n\t * Required prop with no default value.\r\n\t */\r\n\ttexts: string[];\r\n\r\n\t/**\r\n\t * render as HTML Tag\r\n\t */\r\n\tas?: ElementType;\r\n\r\n\t/**\r\n\t * Time in milliseconds between text rotations.\r\n\t * @default 2000\r\n\t */\r\n\trotationInterval?: number;\r\n\r\n\t/**\r\n\t * Initial animation state or array of states.\r\n\t * @default { y: \"100%\", opacity: 0 }\r\n\t */\r\n\tinitial?: MotionProps[\"initial\"] | MotionProps[\"initial\"][];\r\n\r\n\t/**\r\n\t * Animation state to animate to or array of states.\r\n\t * @default { y: 0, opacity: 1 }\r\n\t */\r\n\tanimate?: MotionProps[\"animate\"] | MotionProps[\"animate\"][];\r\n\r\n\t/**\r\n\t * Animation state when exiting or array of states.\r\n\t * @default { y: \"-120%\", opacity: 0 }\r\n\t */\r\n\texit?: MotionProps[\"exit\"] | MotionProps[\"exit\"][];\r\n\r\n\t/**\r\n\t * AnimatePresence mode\r\n\t * @default \"wait\"\r\n\t */\r\n\tanimatePresenceMode?: AnimatePresenceProps[\"mode\"];\r\n\r\n\t/**\r\n\t * Whether to run initial animation on first render.\r\n\t * @default false\r\n\t */\r\n\tanimatePresenceInitial?: boolean;\r\n\r\n\t/**\r\n\t * Duration of stagger delay between elements in seconds.\r\n\t * @default 0\r\n\t */\r\n\tstaggerDuration?: number;\r\n\r\n\t/**\r\n\t * Direction to stagger animations from.\r\n\t * @default \"first\"\r\n\t */\r\n\tstaggerFrom?: \"first\" | \"last\" | \"center\" | number | \"random\";\r\n\r\n\t/**\r\n\t * Animation transition configuration.\r\n\t * @default { type: \"spring\", damping: 25, stiffness: 300 }\r\n\t */\r\n\ttransition?: Transition;\r\n\r\n\t/**\r\n\t * Whether to loop through texts continuously.\r\n\t * @default true\r\n\t */\r\n\tloop?: boolean;\r\n\r\n\t/**\r\n\t * Whether to auto-rotate texts.\r\n\t * @default true\r\n\t */\r\n\tauto?: boolean;\r\n\r\n\t/**\r\n\t * How to split the text for animation.\r\n\t * @default \"characters\"\r\n\t */\r\n\tsplitBy?: \"words\" | \"characters\" | \"lines\" | string;\r\n\r\n\t/**\r\n\t * Callback function triggered when rotating to next text.\r\n\t * @default undefined\r\n\t */\r\n\tonNext?: (index: number) => void;\r\n\r\n\t/**\r\n\t * Class name for the main container element.\r\n\t * @default undefined\r\n\t */\r\n\tmainClassName?: string;\r\n\r\n\t/**\r\n\t * Class name for the split level wrapper elements.\r\n\t * @default undefined\r\n\t */\r\n\tsplitLevelClassName?: string;\r\n\r\n\t/**\r\n\t * Class name for individual animated elements.\r\n\t * @default undefined\r\n\t */\r\n\telementLevelClassName?: string;\r\n}\r\n\r\n/**\r\n * Interface for the ref object exposed by TextRotate component.\r\n * Provides methods to control text rotation programmatically.\r\n * This allows external components to trigger text changes\r\n * without relying on the automatic rotation.\r\n */\r\nexport interface TextRotateRef {\r\n\t/**\r\n\t * Advance to next text in sequence.\r\n\t * If at the end, will loop to beginning if loop prop is true.\r\n\t */\r\n\tnext: () => void;\r\n\r\n\t/**\r\n\t * Go back to previous text in sequence.\r\n\t * If at the start, will loop to end if loop prop is true.\r\n\t */\r\n\tprevious: () => void;\r\n\r\n\t/**\r\n\t * Jump to specific text by index.\r\n\t * Will clamp index between 0 and texts.length - 1.\r\n\t */\r\n\tjumpTo: (index: number) => void;\r\n\r\n\t/**\r\n\t * Reset back to first text.\r\n\t * Equivalent to jumpTo(0).\r\n\t */\r\n\treset: () => void;\r\n}\r\n\r\n/**\r\n * Internal interface for representing words when splitting text by characters.\r\n * Used to maintain proper word spacing and line breaks while allowing\r\n * character-by-character animation. This prevents words from breaking\r\n * across lines during animation.\r\n */\r\ninterface WordObject {\r\n\t/**\r\n\t * Array of individual characters in the word.\r\n\t * Uses Intl.Segmenter when available for proper Unicode handling.\r\n\t */\r\n\tcharacters: string[];\r\n\r\n\t/**\r\n\t * Whether this word needs a space after it.\r\n\t * True for all words except the last one in a sequence.\r\n\t */\r\n\tneedsSpace: boolean;\r\n}\r\n\r\nconst TextRotate = forwardRef<TextRotateRef, TextRotateProps>(\r\n\t(\r\n\t\t{\r\n\t\t\ttexts,\r\n\t\t\tas = \"p\",\r\n\t\t\ttransition = { type: \"spring\", damping: 25, stiffness: 300 },\r\n\t\t\tinitial = { y: \"100%\", opacity: 0 },\r\n\t\t\tanimate = { y: 0, opacity: 1 },\r\n\t\t\texit = { y: \"-120%\", opacity: 0 },\r\n\t\t\tanimatePresenceMode = \"wait\",\r\n\t\t\tanimatePresenceInitial = false,\r\n\t\t\trotationInterval = 2000,\r\n\t\t\tstaggerDuration = 0,\r\n\t\t\tstaggerFrom = \"first\",\r\n\t\t\tloop = true,\r\n\t\t\tauto = true,\r\n\t\t\tsplitBy = \"characters\",\r\n\t\t\tonNext,\r\n\t\t\tmainClassName,\r\n\t\t\tsplitLevelClassName,\r\n\t\t\telementLevelClassName,\r\n\t\t\t...props\r\n\t\t},\r\n\t\tref\r\n\t) => {\r\n\t\tconst [currentTextIndex, setCurrentTextIndex] = useState(0);\r\n\r\n\t\t// Splitting the text into animation segments\r\n\t\tconst elements = useMemo(() => {\r\n\t\t\tconst currentText = texts[currentTextIndex];\r\n\t\t\tif (splitBy === \"characters\") {\r\n\t\t\t\tconst text = currentText?.split(\" \");\r\n\t\t\t\treturn text.map((word, i) => ({\r\n\t\t\t\t\tcharacters: splitIntoCharacters(word),\r\n\t\t\t\t\tneedsSpace: i !== text.length - 1,\r\n\t\t\t\t}));\r\n\t\t\t}\r\n\t\t\treturn splitBy === \"words\"\r\n\t\t\t\t? currentText?.split(\" \")\r\n\t\t\t\t: splitBy === \"lines\"\r\n\t\t\t\t\t? currentText?.split(\"\\n\")\r\n\t\t\t\t\t: currentText?.split(splitBy);\r\n\t\t}, [texts, currentTextIndex, splitBy]);\r\n\r\n\t\t// Helper function to calculate stagger delay for each text segment\r\n\t\tconst getStaggerDelay = useCallback(\r\n\t\t\t(index: number, totalChars: number) => {\r\n\t\t\t\tconst total = totalChars;\r\n\t\t\t\tif (staggerFrom === \"first\") return index * staggerDuration;\r\n\t\t\t\tif (staggerFrom === \"last\")\r\n\t\t\t\t\treturn (total - 1 - index) * staggerDuration;\r\n\t\t\t\tif (staggerFrom === \"center\") {\r\n\t\t\t\t\tconst center = Math.floor(total / 2);\r\n\t\t\t\t\treturn Math.abs(center - index) * staggerDuration;\r\n\t\t\t\t}\r\n\t\t\t\tif (staggerFrom === \"random\") {\r\n\t\t\t\t\tconst randomIndex = Math.floor(Math.random() * total);\r\n\t\t\t\t\treturn Math.abs(randomIndex - index) * staggerDuration;\r\n\t\t\t\t}\r\n\t\t\t\treturn Math.abs(staggerFrom - index) * staggerDuration;\r\n\t\t\t},\r\n\t\t\t[staggerFrom, staggerDuration]\r\n\t\t);\r\n\r\n\t\t// Helper function to handle index changes and trigger callback\r\n\t\tconst handleIndexChange = useCallback(\r\n\t\t\t(newIndex: number) => {\r\n\t\t\t\tsetCurrentTextIndex(newIndex);\r\n\t\t\t\tonNext?.(newIndex);\r\n\t\t\t},\r\n\t\t\t[onNext]\r\n\t\t);\r\n\r\n\t\t// Go to next text\r\n\t\tconst next = useCallback(() => {\r\n\t\t\tconst nextIndex =\r\n\t\t\t\tcurrentTextIndex === texts.length - 1\r\n\t\t\t\t\t? loop\r\n\t\t\t\t\t\t? 0\r\n\t\t\t\t\t\t: currentTextIndex\r\n\t\t\t\t\t: currentTextIndex + 1;\r\n\r\n\t\t\tif (nextIndex !== currentTextIndex) {\r\n\t\t\t\thandleIndexChange(nextIndex);\r\n\t\t\t}\r\n\t\t}, [currentTextIndex, texts.length, loop, handleIndexChange]);\r\n\r\n\t\t// Go back to previous text\r\n\t\tconst previous = useCallback(() => {\r\n\t\t\tconst prevIndex =\r\n\t\t\t\tcurrentTextIndex === 0\r\n\t\t\t\t\t? loop\r\n\t\t\t\t\t\t? texts.length - 1\r\n\t\t\t\t\t\t: currentTextIndex\r\n\t\t\t\t\t: currentTextIndex - 1;\r\n\r\n\t\t\tif (prevIndex !== currentTextIndex) {\r\n\t\t\t\thandleIndexChange(prevIndex);\r\n\t\t\t}\r\n\t\t}, [currentTextIndex, texts.length, loop, handleIndexChange]);\r\n\r\n\t\t// Jump to specific text by index\r\n\t\tconst jumpTo = useCallback(\r\n\t\t\t(index: number) => {\r\n\t\t\t\tconst validIndex = Math.max(0, Math.min(index, texts.length - 1));\r\n\t\t\t\tif (validIndex !== currentTextIndex) {\r\n\t\t\t\t\thandleIndexChange(validIndex);\r\n\t\t\t\t}\r\n\t\t\t},\r\n\t\t\t[texts.length, currentTextIndex, handleIndexChange]\r\n\t\t);\r\n\r\n\t\t// Reset back to first text\r\n\t\tconst reset = useCallback(() => {\r\n\t\t\tif (currentTextIndex !== 0) {\r\n\t\t\t\thandleIndexChange(0);\r\n\t\t\t}\r\n\t\t}, [currentTextIndex, handleIndexChange]);\r\n\r\n\t\t// Get animation props for each text segment. If array is provided, states will be mapped to text segments cyclically.\r\n\t\tconst getAnimationProps = useCallback(\r\n\t\t\t(index: number) => {\r\n\t\t\t\tconst getProp = (\r\n\t\t\t\t\tprop:\r\n\t\t\t\t\t\t| MotionProps[\"initial\"]\r\n\t\t\t\t\t\t| MotionProps[\"initial\"][]\r\n\t\t\t\t\t\t| MotionProps[\"animate\"]\r\n\t\t\t\t\t\t| MotionProps[\"animate\"][]\r\n\t\t\t\t\t\t| MotionProps[\"exit\"]\r\n\t\t\t\t\t\t| MotionProps[\"exit\"][]\r\n\t\t\t\t) => {\r\n\t\t\t\t\tif (Array.isArray(prop)) {\r\n\t\t\t\t\t\treturn prop[index % prop.length];\r\n\t\t\t\t\t}\r\n\t\t\t\t\treturn prop;\r\n\t\t\t\t};\r\n\r\n\t\t\t\treturn {\r\n\t\t\t\t\tinitial: getProp(initial) as MotionProps[\"initial\"],\r\n\t\t\t\t\tanimate: getProp(animate) as MotionProps[\"animate\"],\r\n\t\t\t\t\texit: getProp(exit) as MotionProps[\"exit\"],\r\n\t\t\t\t};\r\n\t\t\t},\r\n\t\t\t[initial, animate, exit]\r\n\t\t);\r\n\r\n\t\t// Expose all navigation functions via ref\r\n\t\tuseImperativeHandle(\r\n\t\t\tref,\r\n\t\t\t() => ({\r\n\t\t\t\tnext,\r\n\t\t\t\tprevious,\r\n\t\t\t\tjumpTo,\r\n\t\t\t\treset,\r\n\t\t\t}),\r\n\t\t\t[next, previous, jumpTo, reset]\r\n\t\t);\r\n\r\n\t\t// Auto-rotate text\r\n\t\tuseEffect(() => {\r\n\t\t\tif (!auto) return;\r\n\t\t\tconst intervalId = setInterval(next, rotationInterval);\r\n\t\t\treturn () => clearInterval(intervalId);\r\n\t\t}, [next, rotationInterval, auto]);\r\n\r\n\t\t// Custom motion component to render the text as a custom HTML tag provided via prop\r\n\t\tconst MotionComponent = useMemo(() => motion.create(as ?? \"p\"), [as]);\r\n\r\n\t\treturn (\r\n\t\t\t<MotionComponent\r\n\t\t\t\tclassName={cn(\"flex flex-wrap whitespace-pre-wrap\", mainClassName)}\r\n\t\t\t\ttransition={transition}\r\n\t\t\t\tlayout\r\n\t\t\t\t{...props}\r\n\t\t\t>\r\n\t\t\t\t<span className=\"sr-only\">{texts[currentTextIndex]}</span>\r\n\r\n\t\t\t\t<AnimatePresence\r\n\t\t\t\t\tmode={animatePresenceMode}\r\n\t\t\t\t\tinitial={animatePresenceInitial}\r\n\t\t\t\t>\r\n\t\t\t\t\t<motion.span\r\n\t\t\t\t\t\tkey={currentTextIndex}\r\n\t\t\t\t\t\tclassName={cn(\r\n\t\t\t\t\t\t\t\"flex flex-wrap\",\r\n\t\t\t\t\t\t\tsplitBy === \"lines\" && \"flex-col w-full\"\r\n\t\t\t\t\t\t)}\r\n\t\t\t\t\t\taria-hidden\r\n\t\t\t\t\t\tlayout\r\n\t\t\t\t\t>\r\n\t\t\t\t\t\t{(splitBy === \"characters\"\r\n\t\t\t\t\t\t\t? (elements as WordObject[])\r\n\t\t\t\t\t\t\t: (elements as string[]).map((el, i) => ({\r\n\t\t\t\t\t\t\t\t\tcharacters: [el],\r\n\t\t\t\t\t\t\t\t\tneedsSpace: i !== elements.length - 1,\r\n\t\t\t\t\t\t\t\t}))\r\n\t\t\t\t\t\t).map((wordObj, wordIndex, array) => {\r\n\t\t\t\t\t\t\tconst previousCharsCount = array\r\n\t\t\t\t\t\t\t\t.slice(0, wordIndex)\r\n\t\t\t\t\t\t\t\t.reduce((sum, word) => sum + word.characters.length, 0);\r\n\r\n\t\t\t\t\t\t\treturn (\r\n\t\t\t\t\t\t\t\t<span\r\n\t\t\t\t\t\t\t\t\tkey={wordIndex}\r\n\t\t\t\t\t\t\t\t\tclassName={cn(\"inline-flex\", splitLevelClassName)}\r\n\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t{wordObj.characters.map((char, charIndex) => {\r\n\t\t\t\t\t\t\t\t\t\tconst totalIndex = previousCharsCount + charIndex;\r\n\t\t\t\t\t\t\t\t\t\tconst animationProps =\r\n\t\t\t\t\t\t\t\t\t\t\tgetAnimationProps(totalIndex);\r\n\t\t\t\t\t\t\t\t\t\treturn (\r\n\t\t\t\t\t\t\t\t\t\t\t<span\r\n\t\t\t\t\t\t\t\t\t\t\t\tclassName={cn(elementLevelClassName)}\r\n\t\t\t\t\t\t\t\t\t\t\t\tkey={char + \"-\" + charIndex}\r\n\t\t\t\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t\t\t\t<motion.span\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t{...animationProps}\r\n\t\t\t\t\t\t\t\t\t\t\t\t\tkey={charIndex}\r\n\t\t\t\t\t\t\t\t\t\t\t\t\ttransition={{\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t...transition,\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tdelay: getStaggerDelay(\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tpreviousCharsCount + charIndex,\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tarray.reduce(\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t(sum, word) =>\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tsum + word.characters.length,\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t0\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t),\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t}}\r\n\t\t\t\t\t\t\t\t\t\t\t\t\tclassName={\"inline-block\"}\r\n\t\t\t\t\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t{char}\r\n\t\t\t\t\t\t\t\t\t\t\t\t</motion.span>\r\n\t\t\t\t\t\t\t\t\t\t\t</span>\r\n\t\t\t\t\t\t\t\t\t\t);\r\n\t\t\t\t\t\t\t\t\t})}\r\n\t\t\t\t\t\t\t\t\t{wordObj.needsSpace && (\r\n\t\t\t\t\t\t\t\t\t\t<span className=\"whitespace-pre\"> </span>\r\n\t\t\t\t\t\t\t\t\t)}\r\n\t\t\t\t\t\t\t\t</span>\r\n\t\t\t\t\t\t\t);\r\n\t\t\t\t\t\t})}\r\n\t\t\t\t\t</motion.span>\r\n\t\t\t\t</AnimatePresence>\r\n\t\t\t</MotionComponent>\r\n\t\t);\r\n\t}\r\n);\r\n\r\nTextRotate.displayName = \"TextRotate\";\r\n\r\nexport default TextRotate;\r\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/utilities/cn.ts",
      "content": "import { ClassValue, clsx } from \"clsx\";\r\nimport { twMerge } from \"tailwind-merge\";\r\n\r\nexport function cn(...inputs: ClassValue[]) {\r\n\treturn twMerge(clsx(inputs));\r\n}\r\n",
      "type": "registry:ui"
    }
  ]
}