{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "colorful-text",
  "type": "registry:block",
  "title": "Colorful text",
  "description": "Colorful text",
  "files": [
    {
      "path": "components/usages/colorfultextusage.tsx",
      "content": "\"use client\";\n\nimport React from \"react\";\n\nimport { ColourfulText } from \"@/registry/open-source/colorful-text\";\nimport { motion } from \"motion/react\";\n\nexport default function ColourfulTextDemo() {\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<motion.img\n\t\t\t\tsrc=\"/itjustworks.jpg\"\n\t\t\t\tclassName=\"h-full w-full object-cover absolute inset-0 mask-[radial-gradient(circle,transparent,black_80%)] pointer-events-none\"\n\t\t\t\tinitial={{ opacity: 0 }}\n\t\t\t\tanimate={{ opacity: 0.5 }}\n\t\t\t\ttransition={{ duration: 1 }}\n\t\t\t/>\n\t\t\t<h1 className=\"text-2xl md:text-5xl lg:text-7xl font-bold text-center text-secondary relative z-2 font-sans\">\n\t\t\t\tThe best <ColourfulText text={\"components\"} /> <br /> you will ever\n\t\t\t\tfind\n\t\t\t</h1>\n\t\t</div>\n\t);\n}\n",
      "type": "registry:block",
      "target": "~/example.tsx"
    },
    {
      "path": "components/usages/colorfultextusage.tsx",
      "content": "\"use client\";\n\nimport React from \"react\";\n\nimport { ColourfulText } from \"@/registry/open-source/colorful-text\";\nimport { motion } from \"motion/react\";\n\nexport default function ColourfulTextDemo() {\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<motion.img\n\t\t\t\tsrc=\"/itjustworks.jpg\"\n\t\t\t\tclassName=\"h-full w-full object-cover absolute inset-0 mask-[radial-gradient(circle,transparent,black_80%)] pointer-events-none\"\n\t\t\t\tinitial={{ opacity: 0 }}\n\t\t\t\tanimate={{ opacity: 0.5 }}\n\t\t\t\ttransition={{ duration: 1 }}\n\t\t\t/>\n\t\t\t<h1 className=\"text-2xl md:text-5xl lg:text-7xl font-bold text-center text-secondary relative z-2 font-sans\">\n\t\t\t\tThe best <ColourfulText text={\"components\"} /> <br /> you will ever\n\t\t\t\tfind\n\t\t\t</h1>\n\t\t</div>\n\t);\n}\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/open-source/colorful-text.tsx",
      "content": "\"use client\";\n\nimport React from \"react\";\n\nimport { motion } from \"motion/react\";\n\n// Credit:\n// https://ui.aceternity.com/components/colourful-text\n\nexport function ColourfulText({ text }: { text: string }) {\n\tconst colors = [\n\t\t\"rgb(131, 179, 32)\",\n\t\t\"rgb(47, 195, 106)\",\n\t\t\"rgb(42, 169, 210)\",\n\t\t\"rgb(4, 112, 202)\",\n\t\t\"rgb(107, 10, 255)\",\n\t\t\"rgb(183, 0, 218)\",\n\t\t\"rgb(218, 0, 171)\",\n\t\t\"rgb(230, 64, 92)\",\n\t\t\"rgb(232, 98, 63)\",\n\t\t\"rgb(249, 129, 47)\",\n\t];\n\n\tconst [currentColors, setCurrentColors] = React.useState(colors);\n\tconst [count, setCount] = React.useState(0);\n\n\tReact.useEffect(() => {\n\t\tconst interval = setInterval(() => {\n\t\t\tconst shuffled = [...colors].sort(() => Math.random() - 0.5);\n\t\t\tsetCurrentColors(shuffled);\n\t\t\tsetCount((prev) => prev + 1);\n\t\t}, 5000);\n\n\t\treturn () => clearInterval(interval);\n\t}, []);\n\n\treturn text.split(\"\").map((char, index) => (\n\t\t<motion.span\n\t\t\tkey={`${char}-${count}-${index}`}\n\t\t\tinitial={{\n\t\t\t\ty: 0,\n\t\t\t}}\n\t\t\tanimate={{\n\t\t\t\tcolor: currentColors[index % currentColors.length],\n\t\t\t\ty: [0, -3, 0],\n\t\t\t\tscale: [1, 1.01, 1],\n\t\t\t\tfilter: [\"blur(0px)\", `blur(5px)`, \"blur(0px)\"],\n\t\t\t\topacity: [1, 0.8, 1],\n\t\t\t}}\n\t\t\ttransition={{\n\t\t\t\tduration: 0.5,\n\t\t\t\tdelay: index * 0.05,\n\t\t\t}}\n\t\t\tclassName=\"inline-block whitespace-pre font-sans tracking-tight\"\n\t\t>\n\t\t\t{char}\n\t\t</motion.span>\n\t));\n}\n",
      "type": "registry:ui"
    }
  ]
}