{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"current-trace","type":"registry:ui","title":"Current Trace","description":"Pulses of glowing current race along any SVG outline, flickering and arcing as they go.","dependencies":[],"registryDependencies":[],"files":[{"path":"registry/ui/current-trace.tsx","type":"registry:ui","content":"\"use client\";\n\nimport { useEffect, useId, useRef } from \"react\";\n\nconst DEFAULT_PATH =\n  \"M100 18 L171 59 L171 141 L100 182 L29 141 L29 59 Z M113 46 L68 110 L99 110 L87 154 L132 90 L101 90 Z\";\n\nexport interface CurrentTraceProps {\n  /** SVG path data drawn in a 200×200 viewBox. */\n  path?: string;\n  /** Rendered size in px. */\n  size?: number;\n  color?: string;\n  /** Current speed multiplier. */\n  speed?: number;\n  /** Px of electric jitter. */\n  jitter?: number;\n  /** Glow strength multiplier. */\n  glow?: number;\n  /** Stroke width in viewBox units. */\n  strokeWidth?: number;\n  /** Accessible name; omit for a decorative logo. */\n  label?: string;\n  className?: string;\n}\n\nconst css = `\n@keyframes electric-logo-run{to{stroke-dashoffset:-1000}}\n@media (prefers-reduced-motion: reduce){[data-electric-logo] *{animation:none!important}}\n`;\n\nexport function CurrentTrace({\n  path = DEFAULT_PATH,\n  size = 240,\n  color = \"#c6ff3d\",\n  speed = 1,\n  jitter = 3,\n  glow = 1,\n  strokeWidth = 2.5,\n  label,\n  className,\n}: CurrentTraceProps) {\n  const svgRef = useRef<SVGSVGElement>(null);\n  const id = useId().replace(/[^\\w-]/g, \"\");\n\n  useEffect(() => {\n    const svg = svgRef.current!;\n    const turb = svg.querySelector(\"feTurbulence\")!;\n    const halo = svg.querySelector<SVGGElement>(\"[data-halo]\")!;\n    if (window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches) return;\n    let raf = 0;\n    let last = 0;\n    let visible = true;\n    // Reseeding the noise ~14x a second gives the hard, stepped flicker of real arcs.\n    const tick = (now: number) => {\n      if (now - last > 70) {\n        last = now;\n        turb.setAttribute(\"seed\", String((Math.random() * 999) | 0));\n        halo.style.opacity = String(0.65 + Math.random() * 0.35);\n      }\n      raf = visible ? requestAnimationFrame(tick) : 0;\n    };\n    const io = new IntersectionObserver(([entry]) => {\n      visible = entry.isIntersecting;\n      if (visible && !raf) raf = requestAnimationFrame(tick);\n    });\n    io.observe(svg);\n    return () => {\n      cancelAnimationFrame(raf);\n      io.disconnect();\n    };\n  }, []);\n\n  const run = (seconds: number, reverse = false) => ({\n    animation: `electric-logo-run ${seconds / speed}s linear infinite${reverse ? \" reverse\" : \"\"}`,\n  });\n  const common = { d: path, pathLength: 1000, fill: \"none\", strokeLinecap: \"round\" as const, strokeLinejoin: \"round\" as const };\n\n  return (\n    <>\n      <style href=\"current-trace\" precedence=\"default\">\n        {css}\n      </style>\n      <svg\n      ref={svgRef}\n      data-electric-logo=\"\"\n      viewBox=\"-20 -20 240 240\"\n      width={size}\n      height={size}\n      role={label ? \"img\" : undefined}\n      aria-label={label}\n      aria-hidden={label ? undefined : true}\n      className={className}\n      style={{ overflow: \"visible\" }}\n    >\n      <defs>\n        <filter id={`${id}-zap`} x=\"-20%\" y=\"-20%\" width=\"140%\" height=\"140%\">\n          <feTurbulence type=\"turbulence\" baseFrequency=\"0.06\" numOctaves=\"2\" seed=\"1\" result=\"noise\" />\n          <feDisplacementMap in=\"SourceGraphic\" in2=\"noise\" scale={jitter * 2} xChannelSelector=\"R\" yChannelSelector=\"G\" />\n        </filter>\n        <filter id={`${id}-glow`} x=\"-50%\" y=\"-50%\" width=\"200%\" height=\"200%\">\n          <feGaussianBlur stdDeviation={6 * glow} />\n        </filter>\n      </defs>\n      <path {...common} stroke={color} strokeWidth={strokeWidth} opacity={0.16} />\n      <g filter={`url(#${id}-zap)`}>\n        <g data-halo filter={`url(#${id}-glow)`}>\n          <path {...common} stroke={color} strokeWidth={strokeWidth * 4} strokeDasharray=\"160 340\" style={run(2.6)} />\n          <path {...common} stroke={color} strokeWidth={strokeWidth * 3} strokeDasharray=\"70 180\" style={run(3.8, true)} />\n        </g>\n        <path {...common} stroke={color} strokeWidth={strokeWidth} strokeDasharray=\"160 340\" style={run(2.6)} />\n        <path {...common} stroke={color} strokeWidth={strokeWidth * 0.8} strokeDasharray=\"70 180\" style={run(3.8, true)} />\n        <path {...common} stroke=\"#fff\" strokeWidth={strokeWidth * 0.45} strokeDasharray=\"110 390\" style={run(2.6)} />\n      </g>\n    </svg>\n    </>\n  );\n}\n"}]}