{
  "name": "tracing-beam",
  "type": "registry:ui",
  "dependencies": [
    "motion"
  ],
  "files": [
    {
      "path": "components/ui/tracing-beam.tsx",
      "content": "\"use client\";\nimport React, { useEffect, useRef, useState } from \"react\";\nimport {\n  motion,\n  useTransform,\n  useScroll,\n  useVelocity,\n  useSpring,\n} from \"motion/react\";\nimport { cn } from \"@/lib/utils\";\n\nexport const TracingBeam = ({\n  children,\n  className,\n}: {\n  children: React.ReactNode;\n  className?: string;\n}) => {\n  const ref = useRef<HTMLDivElement>(null);\n  const { scrollYProgress } = useScroll({\n    target: ref,\n    offset: [\"start start\", \"end start\"],\n  });\n\n  const contentRef = useRef<HTMLDivElement>(null);\n  const [svgHeight, setSvgHeight] = useState(0);\n\n  useEffect(() => {\n    if (contentRef.current) {\n      setSvgHeight(contentRef.current.offsetHeight);\n    }\n  }, []);\n\n  const y1 = useSpring(\n    useTransform(scrollYProgress, [0, 0.8], [50, svgHeight]),\n    {\n      stiffness: 500,\n      damping: 90,\n    },\n  );\n  const y2 = useSpring(\n    useTransform(scrollYProgress, [0, 1], [50, svgHeight - 200]),\n    {\n      stiffness: 500,\n      damping: 90,\n    },\n  );\n\n  return (\n    <motion.div\n      ref={ref}\n      className={cn(\"relative mx-auto h-full w-full max-w-4xl\", className)}\n    >\n      <div className=\"absolute top-3 -left-4 md:-left-20\">\n        <motion.div\n          transition={{\n            duration: 0.2,\n            delay: 0.5,\n          }}\n          animate={{\n            boxShadow:\n              scrollYProgress.get() > 0\n                ? \"none\"\n                : \"rgba(0, 0, 0, 0.24) 0px 3px 8px\",\n          }}\n          className=\"border-netural-200 ml-[27px] flex h-4 w-4 items-center justify-center rounded-full border shadow-sm\"\n        >\n          <motion.div\n            transition={{\n              duration: 0.2,\n              delay: 0.5,\n            }}\n            animate={{\n              backgroundColor: scrollYProgress.get() > 0 ? \"white\" : \"#10b981\",\n              borderColor: scrollYProgress.get() > 0 ? \"white\" : \"#059669\",\n            }}\n            className=\"h-2 w-2 rounded-full border border-neutral-300 bg-white\"\n          />\n        </motion.div>\n        <svg\n          viewBox={`0 0 20 ${svgHeight}`}\n          width=\"20\"\n          height={svgHeight} // Set the SVG height\n          className=\"ml-4 block\"\n          aria-hidden=\"true\"\n        >\n          <motion.path\n            d={`M 1 0V -36 l 18 24 V ${svgHeight * 0.8} l -18 24V ${svgHeight}`}\n            fill=\"none\"\n            stroke=\"#9091A0\"\n            strokeOpacity=\"0.16\"\n            transition={{\n              duration: 10,\n            }}\n          ></motion.path>\n          <motion.path\n            d={`M 1 0V -36 l 18 24 V ${svgHeight * 0.8} l -18 24V ${svgHeight}`}\n            fill=\"none\"\n            stroke=\"url(#gradient)\"\n            strokeWidth=\"1.25\"\n            className=\"motion-reduce:hidden\"\n            transition={{\n              duration: 10,\n            }}\n          ></motion.path>\n          <defs>\n            <motion.linearGradient\n              id=\"gradient\"\n              gradientUnits=\"userSpaceOnUse\"\n              x1=\"0\"\n              x2=\"0\"\n              y1={y1} // set y1 for gradient\n              y2={y2} // set y2 for gradient\n            >\n              <stop stopColor=\"#18CCFC\" stopOpacity=\"0\"></stop>\n              <stop stopColor=\"#18CCFC\"></stop>\n              <stop offset=\"0.325\" stopColor=\"#6344F5\"></stop>\n              <stop offset=\"1\" stopColor=\"#AE48FF\" stopOpacity=\"0\"></stop>\n            </motion.linearGradient>\n          </defs>\n        </svg>\n      </div>\n      <div ref={contentRef}>{children}</div>\n    </motion.div>\n  );\n};\n",
      "type": "registry:ui",
      "target": "components/ui/tracing-beam.tsx"
    }
  ],
  "author": "Manu Arora <hi@manuarora.in>",
  "title": "Tracing Beam"
}