{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tracing-beam",
  "title": "Tracing Beam",
  "description": "Gradient line that draws itself down long-form content.",
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "src/components/velora/tracing-beam.tsx",
      "content": "\"use client\";\n\nimport { useEffect, useRef, useState } from \"react\";\nimport { motion, useScroll, useSpring, useTransform } from \"motion/react\";\n\nimport { cn } from \"@/lib/utils\";\n\ninterface TracingBeamProps {\n  children: React.ReactNode;\n  className?: string;\n}\n\n/**\n * A gradient line that draws itself down the side of long-form content as you\n * read. Pairs well with blog posts and changelogs.\n */\nexport function TracingBeam({ children, className }: TracingBeamProps) {\n  const ref = useRef<HTMLDivElement>(null);\n  const [height, setHeight] = useState(0);\n\n  const { scrollYProgress } = useScroll({\n    target: ref,\n    offset: [\"start 10%\", \"end 85%\"],\n  });\n\n  useEffect(() => {\n    const element = ref.current;\n    if (!element) return;\n    // Track height so the beam stays accurate as images and fonts settle.\n    const observer = new ResizeObserver(() =>\n      setHeight(element.getBoundingClientRect().height)\n    );\n    observer.observe(element);\n    return () => observer.disconnect();\n  }, []);\n\n  const drawn = useSpring(useTransform(scrollYProgress, [0, 1], [0, height]), {\n    stiffness: 480,\n    damping: 90,\n  });\n\n  return (\n    <div\n      ref={ref}\n      data-slot=\"tracing-beam\"\n      className={cn(\"relative w-full\", className)}\n    >\n      <div\n        aria-hidden\n        className=\"absolute -left-4 top-0 hidden h-full w-px bg-border md:block\"\n      >\n        <motion.div\n          style={{ height: drawn }}\n          // Reduced motion: show the beam fully drawn instead of tracking scroll.\n          className=\"w-px bg-gradient-to-b from-brand-from via-brand-via to-brand-to motion-reduce:h-full!\"\n        />\n      </div>\n      {children}\n    </div>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/velora/tracing-beam.tsx"
    }
  ],
  "cssVars": {
    "theme": {
      "color-brand": "var(--brand)",
      "color-brand-from": "var(--brand-from)",
      "color-brand-via": "var(--brand-via)",
      "color-brand-to": "var(--brand-to)"
    },
    "light": {
      "brand": "oklch(0.546 0.245 263)",
      "brand-from": "oklch(0.546 0.245 263)",
      "brand-via": "oklch(0.623 0.214 260)",
      "brand-to": "oklch(0.685 0.169 237)"
    },
    "dark": {
      "brand": "oklch(0.623 0.214 260)",
      "brand-from": "oklch(0.623 0.214 260)",
      "brand-via": "oklch(0.707 0.165 255)",
      "brand-to": "oklch(0.746 0.16 233)"
    }
  },
  "type": "registry:ui"
}