{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "circuit-divider",
  "title": "Circuit Divider",
  "description": "DrawSVG circuit-board divider with animated paths and junction dots",
  "dependencies": [
    "gsap"
  ],
  "files": [
    {
      "path": "components/animation/circuit-divider.tsx",
      "content": "\"use client\";\n\nimport { useRef, useEffect } from \"react\";\nimport { gsap, ScrollTrigger } from \"@/lib/gsap-draw\";\n\n/**\n * CircuitDivider — PCB-style SVG trace that draws on scroll.\n *\n * Renders a horizontal circuit board trace with junction nodes,\n * perpendicular branches, and right-angle paths. DrawSVG reveals\n * the paths as the divider scrolls into view.\n *\n * Variants control visual weight and complexity:\n * - \"default\" — single horizontal trace with 2-3 branches\n * - \"complex\" — multiple parallel traces with more nodes\n * - \"minimal\" — thin single line with one node\n */\n\ninterface CircuitDividerProps {\n  variant?: \"default\" | \"complex\" | \"minimal\";\n  className?: string;\n}\n\nexport function CircuitDivider({\n  variant = \"default\",\n  className = \"\",\n}: CircuitDividerProps) {\n  const svgRef = useRef<SVGSVGElement>(null);\n\n  useEffect(() => {\n    if (window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches) return;\n\n    const svg = svgRef.current;\n    if (!svg) return;\n\n    const paths = svg.querySelectorAll<SVGPathElement>(\".circuit-path\");\n    const dots = svg.querySelectorAll<SVGCircleElement>(\".circuit-dot\");\n\n    const ctx = gsap.context(() => {\n      // Set initial state\n      gsap.set(paths, { drawSVG: \"0%\" });\n      gsap.set(dots, { scale: 0, transformOrigin: \"center\" });\n\n      const mainPaths = svg.querySelectorAll<SVGPathElement>(\".circuit-path--main\");\n      const branchPaths = svg.querySelectorAll<SVGPathElement>(\".circuit-path--branch\");\n\n      // Main traces + branches: scrub-linked to scroll (wipes left as you scroll down)\n      const scrubTl = gsap.timeline({\n        scrollTrigger: {\n          trigger: svg,\n          start: \"top 90%\",\n          end: \"bottom 20%\",\n          scrub: 1,\n        },\n      });\n\n      scrubTl.to(mainPaths, {\n        drawSVG: \"100%\",\n        duration: 1,\n        ease: \"none\",\n        stagger: 0.1,\n      });\n\n      if (branchPaths.length) {\n        scrubTl.to(\n          branchPaths,\n          {\n            drawSVG: \"100%\",\n            duration: 0.6,\n            ease: \"none\",\n            stagger: 0.1,\n          },\n          \"-=0.5\"\n        );\n      }\n\n      scrubTl.to(\n        dots,\n        {\n          scale: 1,\n          duration: 0.2,\n          ease: \"back.out(3)\",\n          stagger: 0.05,\n        },\n        \"-=0.3\"\n      );\n    });\n\n    return () => ctx.revert();\n  }, []);\n\n  return (\n    <div aria-hidden=\"true\" className={`circuit-divider relative w-full opacity-[0.06] ${className}`}>\n      {variant === \"default\" && <DefaultCircuit ref={svgRef} />}\n      {variant === \"complex\" && <ComplexCircuit ref={svgRef} />}\n      {variant === \"minimal\" && <MinimalCircuit ref={svgRef} />}\n    </div>\n  );\n}\n\n/* ── SVG Variants ── */\n\nimport { forwardRef } from \"react\";\n\nconst STROKE = \"var(--color-foreground)\";\nconst ACCENT = \"var(--color-primary)\";\n\nconst DefaultCircuit = forwardRef<SVGSVGElement>(function DefaultCircuit(_, ref) {\n  return (\n    <svg\n      ref={ref}\n      viewBox=\"0 0 1200 48\"\n      fill=\"none\"\n      className=\"w-full h-6\"\n      preserveAspectRatio=\"none\"\n    >\n      {/* Main trace */}\n      <path\n        className=\"circuit-path circuit-path--main\"\n        d=\"M0 24 H300 Q310 24 316 18 L340 6 Q346 0 356 0 H500 Q510 0 516 6 L540 18 Q546 24 556 24 H1200\"\n        stroke={STROKE}\n        strokeWidth=\"2\"\n        fill=\"none\"\n      />\n      {/* Parallel — offset +6px below main */}\n      <path\n        className=\"circuit-path circuit-path--main\"\n        d=\"M0 30 H295 Q305 30 311 24 L335 12 Q341 6 351 6 H505 Q515 6 521 12 L545 24 Q551 30 561 30 H1200\"\n        stroke={STROKE}\n        strokeWidth=\"0.75\"\n        fill=\"none\"\n      />\n      {/* Split branch — diagonal up */}\n      <path\n        className=\"circuit-path circuit-path--branch\"\n        d=\"M300 24 Q308 24 314 18 L360 6 Q366 2 376 2 H480\"\n        stroke={ACCENT}\n        strokeWidth=\"1.5\"\n        fill=\"none\"\n      />\n      {/* Split branch — diagonal down right */}\n      <path\n        className=\"circuit-path circuit-path--branch\"\n        d=\"M750 24 Q758 24 764 30 L790 40 Q796 44 806 44 H920\"\n        stroke={STROKE}\n        strokeWidth=\"1.5\"\n        fill=\"none\"\n      />\n      {/* Split branch — short diagonal up right */}\n      <path\n        className=\"circuit-path circuit-path--branch\"\n        d=\"M750 24 Q758 24 764 18 L785 8 Q790 4 800 4 H870\"\n        stroke={ACCENT}\n        strokeWidth=\"1\"\n        fill=\"none\"\n      />\n      {/* Parallel to down-right branch */}\n      <path\n        className=\"circuit-path circuit-path--branch\"\n        d=\"M755 28 Q763 28 769 34 L795 44 Q801 48 811 48 H910\"\n        stroke={STROKE}\n        strokeWidth=\"0.5\"\n        fill=\"none\"\n      />\n      {/* Junction nodes */}\n      <circle className=\"circuit-dot\" cx=\"300\" cy=\"24\" r=\"3\" fill={STROKE} />\n      <circle className=\"circuit-dot\" cx=\"480\" cy=\"2\" r=\"2.5\" fill={ACCENT} />\n      <circle className=\"circuit-dot\" cx=\"556\" cy=\"24\" r=\"2.5\" fill={STROKE} />\n      <circle className=\"circuit-dot\" cx=\"750\" cy=\"24\" r=\"3\" fill={STROKE} />\n      <circle className=\"circuit-dot\" cx=\"870\" cy=\"4\" r=\"2\" fill={ACCENT} />\n      <circle className=\"circuit-dot\" cx=\"920\" cy=\"44\" r=\"2\" fill={STROKE} />\n    </svg>\n  );\n});\n\nconst ComplexCircuit = forwardRef<SVGSVGElement>(function ComplexCircuit(_, ref) {\n  return (\n    <svg\n      ref={ref}\n      viewBox=\"0 0 1200 64\"\n      fill=\"none\"\n      className=\"w-full h-8\"\n      preserveAspectRatio=\"none\"\n    >\n      {/* Upper main trace */}\n      <path\n        className=\"circuit-path circuit-path--main\"\n        d=\"M0 20 H180 Q190 20 196 14 L220 4 Q226 0 236 0 H440 Q450 0 456 6 L470 14 Q476 20 486 20 H700 Q710 20 716 14 L740 4 Q746 0 756 0 H1200\"\n        stroke={STROKE}\n        strokeWidth=\"2\"\n        fill=\"none\"\n      />\n      {/* Upper parallel — offset +5px */}\n      <path\n        className=\"circuit-path circuit-path--main\"\n        d=\"M0 25 H176 Q186 25 192 19 L216 9 Q222 5 232 5 H444 Q454 5 460 11 L474 19 Q480 25 490 25 H696 Q706 25 712 19 L736 9 Q742 5 752 5 H1200\"\n        stroke={STROKE}\n        strokeWidth=\"0.5\"\n        fill=\"none\"\n      />\n      {/* Lower main trace */}\n      <path\n        className=\"circuit-path circuit-path--main\"\n        d=\"M0 48 H120 Q130 48 136 42 L160 30 Q166 26 176 26 H350 Q360 26 366 32 L390 42 Q396 48 406 48 H650 Q660 48 666 42 L700 26 Q706 22 716 22 H900 Q910 22 916 28 L940 42 Q946 48 956 48 H1200\"\n        stroke={STROKE}\n        strokeWidth=\"1.5\"\n        fill=\"none\"\n      />\n      {/* Lower parallel — offset -5px */}\n      <path\n        className=\"circuit-path circuit-path--main\"\n        d=\"M0 43 H116 Q126 43 132 37 L156 25 Q162 21 172 21 H354 Q364 21 370 27 L394 37 Q400 43 410 43 H646 Q656 43 662 37 L696 21 Q702 17 712 17 H904 Q914 17 920 23 L944 37 Q950 43 960 43 H1200\"\n        stroke={STROKE}\n        strokeWidth=\"0.5\"\n        fill=\"none\"\n      />\n      {/* Diagonal connector — upper to lower */}\n      <path\n        className=\"circuit-path circuit-path--branch\"\n        d=\"M486 20 Q492 20 498 26 L530 44 Q536 48 546 48 H650\"\n        stroke={ACCENT}\n        strokeWidth=\"1.5\"\n        fill=\"none\"\n      />\n      {/* Diagonal connector — lower to upper */}\n      <path\n        className=\"circuit-path circuit-path--branch\"\n        d=\"M716 22 Q722 22 728 16 L750 4 Q754 0 756 0\"\n        stroke={ACCENT}\n        strokeWidth=\"1.5\"\n        fill=\"none\"\n      />\n      {/* Split from upper — diagonal down-right */}\n      <path\n        className=\"circuit-path circuit-path--branch\"\n        d=\"M236 0 Q244 0 250 6 L280 30 Q286 36 296 36 H380\"\n        stroke={STROKE}\n        strokeWidth=\"1\"\n        fill=\"none\"\n      />\n      {/* Split from lower — diagonal down */}\n      <path\n        className=\"circuit-path circuit-path--branch\"\n        d=\"M406 48 Q414 48 420 54 L440 62 Q444 64 454 64 H560\"\n        stroke={STROKE}\n        strokeWidth=\"1\"\n        fill=\"none\"\n      />\n      {/* Split from upper right — diagonal up */}\n      <path\n        className=\"circuit-path circuit-path--branch\"\n        d=\"M956 48 Q964 48 970 42 L1000 22 Q1006 18 1016 18 H1100\"\n        stroke={ACCENT}\n        strokeWidth=\"1\"\n        fill=\"none\"\n      />\n      {/* Short diagonal spur */}\n      <path\n        className=\"circuit-path circuit-path--branch\"\n        d=\"M176 26 Q182 26 186 22 L200 12 Q204 8 214 8 H260\"\n        stroke={ACCENT}\n        strokeWidth=\"1\"\n        fill=\"none\"\n      />\n      {/* Junction nodes */}\n      <circle className=\"circuit-dot\" cx=\"180\" cy=\"20\" r=\"3\" fill={STROKE} />\n      <circle className=\"circuit-dot\" cx=\"236\" cy=\"0\" r=\"2.5\" fill={ACCENT} />\n      <circle className=\"circuit-dot\" cx=\"486\" cy=\"20\" r=\"3\" fill={STROKE} />\n      <circle className=\"circuit-dot\" cx=\"380\" cy=\"36\" r=\"2\" fill={STROKE} />\n      <circle className=\"circuit-dot\" cx=\"756\" cy=\"0\" r=\"2.5\" fill={ACCENT} />\n      <circle className=\"circuit-dot\" cx=\"176\" cy=\"26\" r=\"2.5\" fill={STROKE} />\n      <circle className=\"circuit-dot\" cx=\"260\" cy=\"8\" r=\"2\" fill={ACCENT} />\n      <circle className=\"circuit-dot\" cx=\"406\" cy=\"48\" r=\"2.5\" fill={STROKE} />\n      <circle className=\"circuit-dot\" cx=\"560\" cy=\"64\" r=\"2\" fill={STROKE} />\n      <circle className=\"circuit-dot\" cx=\"716\" cy=\"22\" r=\"3\" fill={ACCENT} />\n      <circle className=\"circuit-dot\" cx=\"956\" cy=\"48\" r=\"2.5\" fill={STROKE} />\n      <circle className=\"circuit-dot\" cx=\"1100\" cy=\"18\" r=\"2\" fill={ACCENT} />\n    </svg>\n  );\n});\n\nconst MinimalCircuit = forwardRef<SVGSVGElement>(function MinimalCircuit(_, ref) {\n  return (\n    <svg\n      ref={ref}\n      viewBox=\"0 0 1200 32\"\n      fill=\"none\"\n      className=\"w-full h-4\"\n      preserveAspectRatio=\"none\"\n    >\n      {/* Single trace with diagonal kink */}\n      <path\n        className=\"circuit-path circuit-path--main\"\n        d=\"M0 16 H500 Q510 16 516 10 L540 4 Q546 0 556 0 H644 Q654 0 660 4 L684 10 Q690 16 700 16 H1200\"\n        stroke={STROKE}\n        strokeWidth=\"1.5\"\n        fill=\"none\"\n      />\n      {/* Parallel — offset +5px below */}\n      <path\n        className=\"circuit-path circuit-path--main\"\n        d=\"M0 21 H496 Q506 21 512 15 L536 9 Q542 5 552 5 H648 Q658 5 664 9 L688 15 Q694 21 704 21 H1200\"\n        stroke={STROKE}\n        strokeWidth=\"0.5\"\n        fill=\"none\"\n      />\n      {/* Split — short diagonal spur */}\n      <path\n        className=\"circuit-path circuit-path--branch\"\n        d=\"M700 16 Q708 16 714 22 L730 30 Q734 32 744 32 H830\"\n        stroke={ACCENT}\n        strokeWidth=\"1\"\n        fill=\"none\"\n      />\n      {/* Nodes */}\n      <circle className=\"circuit-dot\" cx=\"600\" cy=\"0\" r=\"2.5\" fill={ACCENT} />\n      <circle className=\"circuit-dot\" cx=\"700\" cy=\"16\" r=\"2\" fill={STROKE} />\n      <circle className=\"circuit-dot\" cx=\"830\" cy=\"32\" r=\"2\" fill={ACCENT} />\n    </svg>\n  );\n});\n",
      "type": "registry:ui"
    }
  ],
  "meta": {
    "layer": "signal",
    "pattern": "C"
  },
  "type": "registry:ui"
}