{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "background-paths",
  "type": "registry:ui",
  "title": "Background Paths",
  "description": "A set of SVG paths that animate as if being drawn. Great for tech hero backgrounds.",
  "author": "Ahdeetai <https://aditya.is-cool.dev>",
  "registryDependencies": [],
  "dependencies": ["motion", "clsx", "tailwind-merge"],
  "files": [
    {
      "type": "registry:ui",
      "path": "components/ui/background-paths.tsx",
      "content": "'use client';\nimport React from 'react';\nimport { motion } from 'motion/react';\nimport { cn } from '@/lib/utils';\n\nexport const BackgroundPaths = ({\n  children,\n  className,\n  svgOptions,\n}: {\n  children: React.ReactNode;\n  className?: string;\n  svgOptions?: {\n    duration?: number;\n  };\n}) => {\n  return (\n    <div\n      className={\n        cn\n          ? cn(\n              'relative h-96 md:h-screen w-full bg-white dark:bg-black',\n              className,\n            )\n          : `relative h-screen w-full bg-white dark:bg-black ${className ?? ''}`\n      }\n    >\n      <PathSVG svgOptions={svgOptions} />\n      <div className='relative z-10'>{children}</div>\n    </div>\n  );\n};\n\nconst PathSVG = ({ svgOptions }: { svgOptions?: { duration?: number } }) => {\n  const circuits = [\n    'M 50 100 L 200 100 L 200 200 L 350 200 L 350 300 L 500 300',\n    'M 500 50 L 500 150 L 650 150 L 650 250 L 800 250 L 800 350',\n    'M 100 400 L 250 400 L 250 500 L 400 500 L 400 600 L 550 600',\n    'M 600 400 L 750 400 L 750 500 L 900 500 L 900 600',\n    'M 50 300 L 150 300 L 150 450 L 300 450 L 300 550',\n    'M 700 100 L 850 100 L 850 200 L 950 200',\n    'M 150 200 L 300 200 L 300 350 L 450 350 L 450 450',\n    'M 550 150 L 700 150 L 700 300 L 850 300',\n  ];\n\n  const nodes = [\n    { x: 200, y: 100 },\n    { x: 350, y: 200 },\n    { x: 500, y: 300 },\n    { x: 500, y: 150 },\n    { x: 650, y: 150 },\n    { x: 800, y: 350 },\n    { x: 250, y: 400 },\n    { x: 400, y: 500 },\n    { x: 750, y: 400 },\n    { x: 150, y: 300 },\n    { x: 300, y: 450 },\n    { x: 850, y: 100 },\n  ];\n\n  return (\n    <motion.svg\n      viewBox='0 0 1000 700'\n      fill='none'\n      xmlns='http://www.w3.org/2000/svg'\n      className='absolute inset-0 w-full h-full'\n      initial={{ opacity: 0 }}\n      animate={{ opacity: 1 }}\n      transition={{ duration: 1 }}\n    >\n      <defs>\n        <linearGradient id='circuitGradientLight'>\n          <stop offset='0%' stopColor='#10b981' />\n          <stop offset='50%' stopColor='#3b82f6' />\n          <stop offset='100%' stopColor='#8b5cf6' />\n        </linearGradient>\n        <linearGradient id='circuitGradientDark'>\n          <stop offset='0%' stopColor='#00ff41' />\n          <stop offset='50%' stopColor='#00d9ff' />\n          <stop offset='100%' stopColor='#7c3aed' />\n        </linearGradient>\n        <filter id='circuitGlowLight'>\n          <feGaussianBlur stdDeviation='1.5' result='coloredBlur' />\n          <feMerge>\n            <feMergeNode in='coloredBlur' />\n            <feMergeNode in='SourceGraphic' />\n          </feMerge>\n        </filter>\n        <filter id='circuitGlowDark'>\n          <feGaussianBlur stdDeviation='2' result='coloredBlur' />\n          <feMerge>\n            <feMergeNode in='coloredBlur' />\n            <feMergeNode in='SourceGraphic' />\n          </feMerge>\n        </filter>\n      </defs>\n\n      {circuits.map((path, idx) => (\n        <motion.path\n          key={`circuit-${idx}`}\n          d={path}\n          stroke='url(#circuitGradientLight)'\n          strokeWidth='3'\n          fill='none'\n          filter='url(#circuitGlowLight)'\n          strokeLinecap='round'\n          className='dark:stroke-[url(#circuitGradientDark)] dark:filter-[url(#circuitGlowDark)]'\n          initial={{ pathLength: 0, opacity: 0 }}\n          animate={{\n            pathLength: [0, 1, 0.8, 1],\n            opacity: [0, 1, 0.4, 1],\n          }}\n          transition={{\n            duration: svgOptions?.duration || 6,\n            repeat: Infinity,\n            delay: idx * 0.5,\n            ease: 'easeInOut',\n          }}\n        />\n      ))}\n\n      {nodes.map((node, idx) => (\n        <motion.g key={`node-${idx}`}>\n          <motion.circle\n            cx={node.x}\n            cy={node.y}\n            r='6'\n            fill='url(#circuitGradientLight)'\n            filter='url(#circuitGlowLight)'\n            className='dark:fill-[url(#circuitGradientDark)] dark:filter-[url(#circuitGlowDark)]'\n            initial={{ scale: 0 }}\n            animate={{ scale: [0, 1.3, 1, 1.1, 1] }}\n            transition={{\n              duration: 2,\n              repeat: Infinity,\n              delay: idx * 0.3,\n              ease: 'easeInOut',\n            }}\n          />\n          <motion.circle\n            cx={node.x}\n            cy={node.y}\n            r='12'\n            fill='none'\n            stroke='url(#circuitGradientLight)'\n            strokeWidth='1'\n            opacity='0.5'\n            className='dark:stroke-[url(#circuitGradientDark)]'\n            initial={{ scale: 0 }}\n            animate={{ scale: [0, 1.5, 1.2, 1.5] }}\n            transition={{\n              duration: 3,\n              repeat: Infinity,\n              delay: idx * 0.3,\n              ease: 'easeInOut',\n            }}\n          />\n        </motion.g>\n      ))}\n    </motion.svg>\n  );\n};\n"
    },
    {
      "type": "registry:lib",
      "path": "lib/utils.ts",
      "content": "import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}"
    }
  ]
}