{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tracing-beam",
  "type": "registry:block",
  "title": "Tracing beam",
  "description": "Tracing beam",
  "files": [
    {
      "path": "components/usages/tracingbeamusage.tsx",
      "content": "\"use client\";\n\nimport React from \"react\";\n\nimport { TracingBeam } from \"@/registry/open-source/tracing-beam\";\n\nexport default function TracingBeamDemo() {\n\treturn (\n\t\t<TracingBeam className=\"px-6\">\n\t\t\t<div className=\"max-w-2xl mx-auto antialiased pt-4 relative\">\n\t\t\t\t{dummyContent.map((item, index) => (\n\t\t\t\t\t<div key={`content-${index}`} className=\"mb-10\">\n\t\t\t\t\t\t<h2 className=\"bg-background text-secondary rounded-full text-sm w-fit px-4 py-1 mb-4\">\n\t\t\t\t\t\t\t{item.badge}\n\t\t\t\t\t\t</h2>\n\n\t\t\t\t\t\t<p className={\"text-xl mb-4\"}>{item.title}</p>\n\n\t\t\t\t\t\t<div className=\"text-sm  prose prose-sm dark:prose-invert\">\n\t\t\t\t\t\t\t{item?.image && (\n\t\t\t\t\t\t\t\t<img\n\t\t\t\t\t\t\t\t\tsrc={item.image}\n\t\t\t\t\t\t\t\t\talt=\"blog thumbnail\"\n\t\t\t\t\t\t\t\t\theight=\"1000\"\n\t\t\t\t\t\t\t\t\twidth=\"1000\"\n\t\t\t\t\t\t\t\t\tclassName=\"rounded-lg mb-10 object-cover\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t{item.description}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t))}\n\t\t\t</div>\n\t\t</TracingBeam>\n\t);\n}\n\nexport const dummyContent = [\n\t{\n\t\ttitle: \"Lorem Ipsum Dolor Sit Amet\",\n\t\tdescription: (\n\t\t\t<>\n\t\t\t\t<p>\n\t\t\t\t\tSit duis est minim proident non nisi velit non consectetur. Esse\n\t\t\t\t\tadipisicing laboris consectetur enim ipsum reprehenderit eu\n\t\t\t\t\tdeserunt Lorem ut aliqua anim do. Duis cupidatat qui irure\n\t\t\t\t\tcupidatat incididunt incididunt enim magna id est qui sunt\n\t\t\t\t\tfugiat. Laboris do duis pariatur fugiat Lorem aute sit ullamco.\n\t\t\t\t\tQui deserunt non reprehenderit dolore nisi velit exercitation\n\t\t\t\t\tLorem qui do enim culpa. Aliqua eiusmod in occaecat reprehenderit\n\t\t\t\t\tlaborum nostrud fugiat voluptate do Lorem culpa officia sint\n\t\t\t\t\tlabore. Tempor consectetur excepteur ut fugiat veniam commodo et\n\t\t\t\t\tlabore dolore commodo pariatur.\n\t\t\t\t</p>\n\t\t\t\t<p>\n\t\t\t\t\tDolor minim irure ut Lorem proident. Ipsum do pariatur est ad ad\n\t\t\t\t\tveniam in commodo id reprehenderit adipisicing. Proident duis\n\t\t\t\t\texercitation ad quis ex cupidatat cupidatat occaecat adipisicing.\n\t\t\t\t</p>\n\t\t\t\t<p>\n\t\t\t\t\tTempor quis dolor veniam quis dolor. Sit reprehenderit eiusmod\n\t\t\t\t\treprehenderit deserunt amet laborum consequat adipisicing officia\n\t\t\t\t\tqui irure id sint adipisicing. Adipisicing fugiat aliqua nulla\n\t\t\t\t\tnostrud. Amet culpa officia aliquip deserunt veniam deserunt\n\t\t\t\t\tofficia adipisicing aliquip proident officia sunt.\n\t\t\t\t</p>\n\t\t\t</>\n\t\t),\n\t\tbadge: \"React\",\n\t\timage: \"https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?auto=format&fit=crop&q=80&w=3540&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\",\n\t},\n\t{\n\t\ttitle: \"Lorem Ipsum Dolor Sit Amet\",\n\t\tdescription: (\n\t\t\t<>\n\t\t\t\t<p>\n\t\t\t\t\tEx irure dolore veniam ex velit non aute nisi labore ipsum\n\t\t\t\t\toccaecat deserunt cupidatat aute. Enim cillum dolor et nulla sunt\n\t\t\t\t\texercitation non voluptate qui aliquip esse tempor. Ullamco ut\n\t\t\t\t\tsunt consectetur sint qui qui do do qui do. Labore laborum culpa\n\t\t\t\t\tmagna reprehenderit ea velit id esse adipisicing deserunt amet\n\t\t\t\t\tdolore. Ipsum occaecat veniam commodo proident aliqua id ad\n\t\t\t\t\tdeserunt dolor aliquip duis veniam sunt.\n\t\t\t\t</p>\n\t\t\t\t<p>\n\t\t\t\t\tIn dolore veniam excepteur eu est et sunt velit. Ipsum sint esse\n\t\t\t\t\tveniam fugiat esse qui sint ad sunt reprehenderit do qui proident\n\t\t\t\t\treprehenderit. Laborum exercitation aliqua reprehenderit ea sint\n\t\t\t\t\tcillum ut mollit.\n\t\t\t\t</p>\n\t\t\t</>\n\t\t),\n\t\tbadge: \"Changelog\",\n\t\timage: \"https://images.unsplash.com/photo-1519681393784-d120267933ba?auto=format&fit=crop&q=80&w=3540&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\",\n\t},\n\t{\n\t\ttitle: \"Lorem Ipsum Dolor Sit Amet\",\n\t\tdescription: (\n\t\t\t<>\n\t\t\t\t<p>\n\t\t\t\t\tEx irure dolore veniam ex velit non aute nisi labore ipsum\n\t\t\t\t\toccaecat deserunt cupidatat aute. Enim cillum dolor et nulla sunt\n\t\t\t\t\texercitation non voluptate qui aliquip esse tempor. Ullamco ut\n\t\t\t\t\tsunt consectetur sint qui qui do do qui do. Labore laborum culpa\n\t\t\t\t\tmagna reprehenderit ea velit id esse adipisicing deserunt amet\n\t\t\t\t\tdolore. Ipsum occaecat veniam commodo proident aliqua id ad\n\t\t\t\t\tdeserunt dolor aliquip duis veniam sunt.\n\t\t\t\t</p>\n\t\t\t</>\n\t\t),\n\t\tbadge: \"Launch Week\",\n\t\timage: \"https://images.unsplash.com/photo-1469474968028-56623f02e42e?auto=format&fit=crop&q=80&w=3506&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\",\n\t},\n];\n",
      "type": "registry:block",
      "target": "~/example.tsx"
    },
    {
      "path": "components/usages/tracingbeamusage.tsx",
      "content": "\"use client\";\n\nimport React from \"react\";\n\nimport { TracingBeam } from \"@/registry/open-source/tracing-beam\";\n\nexport default function TracingBeamDemo() {\n\treturn (\n\t\t<TracingBeam className=\"px-6\">\n\t\t\t<div className=\"max-w-2xl mx-auto antialiased pt-4 relative\">\n\t\t\t\t{dummyContent.map((item, index) => (\n\t\t\t\t\t<div key={`content-${index}`} className=\"mb-10\">\n\t\t\t\t\t\t<h2 className=\"bg-background text-secondary rounded-full text-sm w-fit px-4 py-1 mb-4\">\n\t\t\t\t\t\t\t{item.badge}\n\t\t\t\t\t\t</h2>\n\n\t\t\t\t\t\t<p className={\"text-xl mb-4\"}>{item.title}</p>\n\n\t\t\t\t\t\t<div className=\"text-sm  prose prose-sm dark:prose-invert\">\n\t\t\t\t\t\t\t{item?.image && (\n\t\t\t\t\t\t\t\t<img\n\t\t\t\t\t\t\t\t\tsrc={item.image}\n\t\t\t\t\t\t\t\t\talt=\"blog thumbnail\"\n\t\t\t\t\t\t\t\t\theight=\"1000\"\n\t\t\t\t\t\t\t\t\twidth=\"1000\"\n\t\t\t\t\t\t\t\t\tclassName=\"rounded-lg mb-10 object-cover\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t{item.description}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t))}\n\t\t\t</div>\n\t\t</TracingBeam>\n\t);\n}\n\nexport const dummyContent = [\n\t{\n\t\ttitle: \"Lorem Ipsum Dolor Sit Amet\",\n\t\tdescription: (\n\t\t\t<>\n\t\t\t\t<p>\n\t\t\t\t\tSit duis est minim proident non nisi velit non consectetur. Esse\n\t\t\t\t\tadipisicing laboris consectetur enim ipsum reprehenderit eu\n\t\t\t\t\tdeserunt Lorem ut aliqua anim do. Duis cupidatat qui irure\n\t\t\t\t\tcupidatat incididunt incididunt enim magna id est qui sunt\n\t\t\t\t\tfugiat. Laboris do duis pariatur fugiat Lorem aute sit ullamco.\n\t\t\t\t\tQui deserunt non reprehenderit dolore nisi velit exercitation\n\t\t\t\t\tLorem qui do enim culpa. Aliqua eiusmod in occaecat reprehenderit\n\t\t\t\t\tlaborum nostrud fugiat voluptate do Lorem culpa officia sint\n\t\t\t\t\tlabore. Tempor consectetur excepteur ut fugiat veniam commodo et\n\t\t\t\t\tlabore dolore commodo pariatur.\n\t\t\t\t</p>\n\t\t\t\t<p>\n\t\t\t\t\tDolor minim irure ut Lorem proident. Ipsum do pariatur est ad ad\n\t\t\t\t\tveniam in commodo id reprehenderit adipisicing. Proident duis\n\t\t\t\t\texercitation ad quis ex cupidatat cupidatat occaecat adipisicing.\n\t\t\t\t</p>\n\t\t\t\t<p>\n\t\t\t\t\tTempor quis dolor veniam quis dolor. Sit reprehenderit eiusmod\n\t\t\t\t\treprehenderit deserunt amet laborum consequat adipisicing officia\n\t\t\t\t\tqui irure id sint adipisicing. Adipisicing fugiat aliqua nulla\n\t\t\t\t\tnostrud. Amet culpa officia aliquip deserunt veniam deserunt\n\t\t\t\t\tofficia adipisicing aliquip proident officia sunt.\n\t\t\t\t</p>\n\t\t\t</>\n\t\t),\n\t\tbadge: \"React\",\n\t\timage: \"https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?auto=format&fit=crop&q=80&w=3540&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\",\n\t},\n\t{\n\t\ttitle: \"Lorem Ipsum Dolor Sit Amet\",\n\t\tdescription: (\n\t\t\t<>\n\t\t\t\t<p>\n\t\t\t\t\tEx irure dolore veniam ex velit non aute nisi labore ipsum\n\t\t\t\t\toccaecat deserunt cupidatat aute. Enim cillum dolor et nulla sunt\n\t\t\t\t\texercitation non voluptate qui aliquip esse tempor. Ullamco ut\n\t\t\t\t\tsunt consectetur sint qui qui do do qui do. Labore laborum culpa\n\t\t\t\t\tmagna reprehenderit ea velit id esse adipisicing deserunt amet\n\t\t\t\t\tdolore. Ipsum occaecat veniam commodo proident aliqua id ad\n\t\t\t\t\tdeserunt dolor aliquip duis veniam sunt.\n\t\t\t\t</p>\n\t\t\t\t<p>\n\t\t\t\t\tIn dolore veniam excepteur eu est et sunt velit. Ipsum sint esse\n\t\t\t\t\tveniam fugiat esse qui sint ad sunt reprehenderit do qui proident\n\t\t\t\t\treprehenderit. Laborum exercitation aliqua reprehenderit ea sint\n\t\t\t\t\tcillum ut mollit.\n\t\t\t\t</p>\n\t\t\t</>\n\t\t),\n\t\tbadge: \"Changelog\",\n\t\timage: \"https://images.unsplash.com/photo-1519681393784-d120267933ba?auto=format&fit=crop&q=80&w=3540&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\",\n\t},\n\t{\n\t\ttitle: \"Lorem Ipsum Dolor Sit Amet\",\n\t\tdescription: (\n\t\t\t<>\n\t\t\t\t<p>\n\t\t\t\t\tEx irure dolore veniam ex velit non aute nisi labore ipsum\n\t\t\t\t\toccaecat deserunt cupidatat aute. Enim cillum dolor et nulla sunt\n\t\t\t\t\texercitation non voluptate qui aliquip esse tempor. Ullamco ut\n\t\t\t\t\tsunt consectetur sint qui qui do do qui do. Labore laborum culpa\n\t\t\t\t\tmagna reprehenderit ea velit id esse adipisicing deserunt amet\n\t\t\t\t\tdolore. Ipsum occaecat veniam commodo proident aliqua id ad\n\t\t\t\t\tdeserunt dolor aliquip duis veniam sunt.\n\t\t\t\t</p>\n\t\t\t</>\n\t\t),\n\t\tbadge: \"Launch Week\",\n\t\timage: \"https://images.unsplash.com/photo-1469474968028-56623f02e42e?auto=format&fit=crop&q=80&w=3506&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\",\n\t},\n];\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/open-source/tracing-beam.tsx",
      "content": "\"use client\";\r\n\r\nimport React, { useEffect, useRef, useState } from \"react\";\r\n\r\nimport { cn } from \"@/registry/utilities/cn\";\r\nimport { motion, useScroll, useSpring, useTransform } from \"motion/react\";\r\n\r\nexport const TracingBeam = ({\r\n\tchildren,\r\n\tclassName,\r\n\tcontainerRef,\r\n}: {\r\n\tchildren: React.ReactNode;\r\n\tclassName?: string;\r\n}) => {\r\n\tconst ref = useRef<HTMLDivElement>(null);\r\n\tconst [componentContainerRef, setComponentContainerRef] = useState(null);\r\n\tuseEffect(() => {\r\n\t\tsetComponentContainerRef(containerRef);\r\n\t}, [containerRef]);\r\n\r\n\tconst { scrollYProgress } = useScroll({\r\n\t\ttarget: ref,\r\n\t\toffset: [\"start start\", \"end start\"],\r\n\t\t// container: componentContainerRef || null,\r\n\t});\r\n\r\n\tconst contentRef = useRef<HTMLDivElement>(null);\r\n\tconst [svgHeight, setSvgHeight] = useState(0);\r\n\r\n\tuseEffect(() => {\r\n\t\tif (contentRef.current) {\r\n\t\t\tsetSvgHeight(contentRef.current.offsetHeight);\r\n\t\t}\r\n\t}, []);\r\n\r\n\tconst y1 = useSpring(\r\n\t\tuseTransform(scrollYProgress, [0, 0.8], [50, svgHeight]),\r\n\t\t{\r\n\t\t\tstiffness: 500,\r\n\t\t\tdamping: 90,\r\n\t\t}\r\n\t);\r\n\tconst y2 = useSpring(\r\n\t\tuseTransform(scrollYProgress, [0, 1], [50, svgHeight - 200]),\r\n\t\t{\r\n\t\t\tstiffness: 500,\r\n\t\t\tdamping: 90,\r\n\t\t}\r\n\t);\r\n\r\n\tif (!!componentContainerRef && componentContainerRef?.current === undefined)\r\n\t\treturn null;\r\n\r\n\treturn (\r\n\t\t<motion.div\r\n\t\t\tref={ref}\r\n\t\t\tclassName={cn(\r\n\t\t\t\t\"relative w-full max-w-4xl mx-auto h-full px-6\",\r\n\t\t\t\tclassName\r\n\t\t\t)}\r\n\t\t>\r\n\t\t\t<div className=\"absolute -left-4 md:-left-20 top-3 pt-24\">\r\n\t\t\t\t<motion.div\r\n\t\t\t\t\ttransition={{\r\n\t\t\t\t\t\tduration: 0.2,\r\n\t\t\t\t\t\tdelay: 0.5,\r\n\t\t\t\t\t}}\r\n\t\t\t\t\tanimate={{\r\n\t\t\t\t\t\tboxShadow:\r\n\t\t\t\t\t\t\tscrollYProgress.get() > 0\r\n\t\t\t\t\t\t\t\t? \"none\"\r\n\t\t\t\t\t\t\t\t: \"rgba(0, 0, 0, 0.24) 0px 3px 8px\",\r\n\t\t\t\t\t}}\r\n\t\t\t\t\tclassName=\"ml-[27px] h-4 w-4 rounded-full border border-netural-200 shadow-xs flex items-center justify-center\"\r\n\t\t\t\t>\r\n\t\t\t\t\t<motion.div\r\n\t\t\t\t\t\ttransition={{\r\n\t\t\t\t\t\t\tduration: 0.2,\r\n\t\t\t\t\t\t\tdelay: 0.5,\r\n\t\t\t\t\t\t}}\r\n\t\t\t\t\t\tanimate={{\r\n\t\t\t\t\t\t\tbackgroundColor: \"white\",\r\n\t\t\t\t\t\t\tborderColor: \"white\",\r\n\t\t\t\t\t\t}}\r\n\t\t\t\t\t\tclassName=\"h-2 w-2  rounded-full border border-neutral-300 bg-background\"\r\n\t\t\t\t\t/>\r\n\t\t\t\t</motion.div>\r\n\t\t\t\t<svg\r\n\t\t\t\t\tviewBox={`0 0 20 ${svgHeight}`}\r\n\t\t\t\t\twidth=\"20\"\r\n\t\t\t\t\theight={svgHeight} // Set the SVG height\r\n\t\t\t\t\tclassName=\" ml-4 block\"\r\n\t\t\t\t\taria-hidden=\"true\"\r\n\t\t\t\t>\r\n\t\t\t\t\t<motion.path\r\n\t\t\t\t\t\td={`M 1 0V -36 l 18 24 V ${\r\n\t\t\t\t\t\t\tsvgHeight * 0.8\r\n\t\t\t\t\t\t} l -18 24V ${svgHeight}`}\r\n\t\t\t\t\t\tfill=\"none\"\r\n\t\t\t\t\t\tstroke=\"hsl(358 70% 42%)\"\r\n\t\t\t\t\t\tstrokeOpacity=\"0.16\"\r\n\t\t\t\t\t\ttransition={{\r\n\t\t\t\t\t\t\tduration: 10,\r\n\t\t\t\t\t\t}}\r\n\t\t\t\t\t></motion.path>\r\n\t\t\t\t\t<motion.path\r\n\t\t\t\t\t\td={`M 1 0V -36 l 18 24 V ${\r\n\t\t\t\t\t\t\tsvgHeight * 0.8\r\n\t\t\t\t\t\t} l -18 24V ${svgHeight}`}\r\n\t\t\t\t\t\tfill=\"none\"\r\n\t\t\t\t\t\tstroke=\"url(#gradient)\"\r\n\t\t\t\t\t\tstrokeWidth=\"1.25\"\r\n\t\t\t\t\t\tclassName=\"motion-reduce:hidden\"\r\n\t\t\t\t\t\ttransition={{\r\n\t\t\t\t\t\t\tduration: 10,\r\n\t\t\t\t\t\t}}\r\n\t\t\t\t\t></motion.path>\r\n\t\t\t\t\t<defs>\r\n\t\t\t\t\t\t<motion.linearGradient\r\n\t\t\t\t\t\t\tid=\"gradient\"\r\n\t\t\t\t\t\t\tgradientUnits=\"userSpaceOnUse\"\r\n\t\t\t\t\t\t\tx1=\"0\"\r\n\t\t\t\t\t\t\tx2=\"0\"\r\n\t\t\t\t\t\t\ty1={y1} // set y1 for gradient\r\n\t\t\t\t\t\t\ty2={y2} // set y2 for gradient\r\n\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t<stop stopColor=\"hsl(358 70% 42%)\" stopOpacity=\"0\"></stop>\r\n\t\t\t\t\t\t\t<stop stopColor=\"hsl(358 70% 42%)\"></stop>\r\n\t\t\t\t\t\t\t<stop offset=\"0.325\" stopColor=\"hsl(358 70% 42%)\"></stop>\r\n\t\t\t\t\t\t\t<stop\r\n\t\t\t\t\t\t\t\toffset=\"1\"\r\n\t\t\t\t\t\t\t\tstopColor=\"hsl(345 6% 13%)\"\r\n\t\t\t\t\t\t\t\tstopOpacity=\"0\"\r\n\t\t\t\t\t\t\t></stop>\r\n\t\t\t\t\t\t</motion.linearGradient>\r\n\t\t\t\t\t</defs>\r\n\t\t\t\t</svg>\r\n\t\t\t</div>\r\n\t\t\t<div className=\"\" ref={contentRef}>\r\n\t\t\t\t{children}\r\n\t\t\t</div>\r\n\t\t</motion.div>\r\n\t);\r\n};\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"
    }
  ]
}