{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "bubble-text",
  "type": "registry:block",
  "title": "Bubble text",
  "description": "Bubble text",
  "files": [
    {
      "path": "components/usages/bubbletextusage.tsx",
      "content": "\"use client\";\r\n\r\nimport React from \"react\";\r\n\r\nimport BubbleText from \"@/registry/open-source/bubble-text\";\r\n\r\nexport default function Usage() {\r\n\treturn (\r\n\t\t<div className=\"h-screen w-full flex items-center justify-center relative overflow-hidden bg-background\">\r\n\t\t\t<div className=\"grid h-screen place-content-center bg-background\">\r\n\t\t\t\t<BubbleText text=\"bubble text\" />\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t);\r\n}\r\n",
      "type": "registry:block",
      "target": "~/example.tsx"
    },
    {
      "path": "components/usages/bubbletextusage.tsx",
      "content": "\"use client\";\r\n\r\nimport React from \"react\";\r\n\r\nimport BubbleText from \"@/registry/open-source/bubble-text\";\r\n\r\nexport default function Usage() {\r\n\treturn (\r\n\t\t<div className=\"h-screen w-full flex items-center justify-center relative overflow-hidden bg-background\">\r\n\t\t\t<div className=\"grid h-screen place-content-center bg-background\">\r\n\t\t\t\t<BubbleText text=\"bubble text\" />\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t);\r\n}\r\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/open-source/bubble-text.tsx",
      "content": "import React, { useEffect } from \"react\";\r\n\r\n// www.hover.dev/components/text#bubble-text\r\n\r\n// DONT FORGET THE CSS\r\n\r\nconst BubbleText = ({ text }: { text: string }) => {\r\n\tuseEffect(() => {\r\n\t\tconst spans = document.querySelectorAll(\r\n\t\t\t\".hover-text span\"\r\n\t\t) as NodeListOf<HTMLSpanElement>;\r\n\r\n\t\tspans.forEach((span) => {\r\n\t\t\tspan.addEventListener(\"mouseenter\", function (this: typeof span) {\r\n\t\t\t\tthis.style.fontWeight = \"900\";\r\n\t\t\t\tthis.style.color = \"rgb(238, 242, 255)\";\r\n\r\n\t\t\t\tconst leftNeighbor = this.previousElementSibling as HTMLSpanElement;\r\n\t\t\t\tconst rightNeighbor = this.nextElementSibling as HTMLSpanElement;\r\n\r\n\t\t\t\tif (leftNeighbor) {\r\n\t\t\t\t\tleftNeighbor.style.fontWeight = \"500\";\r\n\t\t\t\t\tleftNeighbor.style.color = \"rgb(199, 210, 254)\";\r\n\t\t\t\t}\r\n\t\t\t\tif (rightNeighbor) {\r\n\t\t\t\t\trightNeighbor.style.fontWeight = \"500\";\r\n\t\t\t\t\trightNeighbor.style.color = \"rgb(199, 210, 254)\";\r\n\t\t\t\t}\r\n\t\t\t});\r\n\r\n\t\t\tspan.addEventListener(\"mouseleave\", function (this: typeof span) {\r\n\t\t\t\tthis.style.fontWeight = \"100\";\r\n\t\t\t\tthis.style.color = \"rgb(165, 180, 252)\";\r\n\r\n\t\t\t\tconst leftNeighbor = this.previousElementSibling as HTMLSpanElement;\r\n\t\t\t\tconst rightNeighbor = this.nextElementSibling as HTMLSpanElement;\r\n\r\n\t\t\t\tif (leftNeighbor) {\r\n\t\t\t\t\tleftNeighbor.style.fontWeight = \"100\";\r\n\t\t\t\t\tleftNeighbor.style.color = \"rgb(165, 180, 252)\";\r\n\t\t\t\t}\r\n\r\n\t\t\t\tif (rightNeighbor) {\r\n\t\t\t\t\trightNeighbor.style.fontWeight = \"100\";\r\n\t\t\t\t\trightNeighbor.style.color = \"rgb(165, 180, 252)\";\r\n\t\t\t\t}\r\n\t\t\t});\r\n\t\t});\r\n\t}, []);\r\n\r\n\treturn (\r\n\t\t<h2 className=\"hover-text text-center text-5xl font-thin text-indigo-300\">\r\n\t\t\t<Text>{text}</Text>\r\n\t\t</h2>\r\n\t);\r\n};\r\n\r\nconst Text = ({ children }: { children: string }) => {\r\n\treturn (\r\n\t\t<>\r\n\t\t\t{children.split(\"\").map((child, idx) => (\r\n\t\t\t\t<span\r\n\t\t\t\t\tstyle={{\r\n\t\t\t\t\t\ttransition: \"0.35s font-weight, 0.35s color\",\r\n\t\t\t\t\t}}\r\n\t\t\t\t\tkey={idx + \"bubble-text\"}\r\n\t\t\t\t>\r\n\t\t\t\t\t{child}\r\n\t\t\t\t</span>\r\n\t\t\t))}\r\n\t\t</>\r\n\t);\r\n};\r\n\r\nexport default BubbleText;\r\n",
      "type": "registry:ui"
    }
  ]
}