{
  "name": "audio-bars-glow-default",
  "type": "registry:ui",
  "tier": "free",
  "dependencies": [
    "framer-motion"
  ],
  "registryDependencies": [
    "https://www.craftui.space/r/craftui-base.json"
  ],
  "files": [
    {
      "path": "components/craftui/loaders/audio-bars-glow/default.tsx",
      "content": "'use client';\n\nimport { useEffect } from 'react';\nimport { motion, useAnimation } from 'motion/react';\n\ninterface AudioBarsGlowProps {\n  width?: number;\n  height?: number;\n  color?: string;\n  barWidth?: number;\n  gap?: number;\n  isAnimating?: boolean;\n  duration?: number;\n  ease?: any;\n}\n\nexport function AudioBarsGlow({\n  width = 60,\n  height = 60,\n  color = \"#000000\", // Default black for gradient\n  barWidth = 4,\n  gap = 3,\n  isAnimating = true,\n  duration = 0.8,\n  ease = 'easeInOut',\n}: AudioBarsGlowProps) {\n  const barCount = 6;\n  const totalWidth = (barCount * barWidth) + ((barCount - 1) * gap);\n  const startX = (width - totalWidth) / 2;\n\n  const minHeight = height * 0.3;\n  const maxHeight = height * 0.8;\n\n  const controls = useAnimation();\n\n  useEffect(() => {\n    if (isAnimating) {\n      controls.start((i) => {\n        const isOdd = i % 2 === 0;\n        return {\n          height: isOdd ? [minHeight, maxHeight, minHeight] : [maxHeight, minHeight, maxHeight],\n          y: isOdd\n            ? [(height - minHeight) / 2, (height - maxHeight) / 2, (height - minHeight) / 2]\n            : [(height - maxHeight) / 2, (height - minHeight) / 2, (height - maxHeight) / 2],\n          opacity: isOdd ? [0.5, 1, 0.5] : [1, 0.5, 1],\n          transition: { duration, repeat: Infinity, ease },\n        };\n      });\n    } else {\n      controls.stop();\n      controls.set((i) => {\n        const isOdd = i % 2 === 0;\n        return {\n          height: isOdd ? minHeight : maxHeight,\n          y: isOdd ? (height - minHeight) / 2 : (height - maxHeight) / 2,\n          opacity: isOdd ? 0.5 : 1,\n        };\n      });\n    }\n  }, [isAnimating, duration, ease, minHeight, maxHeight, height, controls]);\n\n  return (\n    <svg\n      width={width}\n      height={height}\n      viewBox={`0 0 ${width} ${height}`}\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <defs>\n        {/* Gradient definition */}\n        <linearGradient id=\"barGradient\" x1=\"0%\" y1=\"0%\" x2=\"0%\" y2=\"100%\">\n          <stop offset=\"0%\" stopColor={color} stopOpacity=\"0.2\" />\n          <stop offset=\"50%\" stopColor={color} stopOpacity=\"0.8\" />\n          <stop offset=\"100%\" stopColor={color} stopOpacity=\"1\" />\n        </linearGradient>\n\n        {/* Glow filter */}\n        <filter id=\"glow\">\n          <feGaussianBlur stdDeviation=\"2\" result=\"coloredBlur\"/>\n          <feMerge>\n            <feMergeNode in=\"coloredBlur\"/>\n            <feMergeNode in=\"SourceGraphic\"/>\n          </feMerge>\n        </filter>\n      </defs>\n\n      {Array.from({ length: barCount }).map((_, index) => {\n        const isOdd = index % 2 === 0;\n        return (\n          <motion.rect\n            key={index}\n            x={startX + (index * (barWidth + gap))}\n            width={barWidth}\n            fill=\"url(#barGradient)\"\n            filter=\"url(#glow)\"\n            custom={index}\n            initial={{\n              height: isOdd ? minHeight : maxHeight,\n              y: isOdd ? (height - minHeight) / 2 : (height - maxHeight) / 2,\n              opacity: isOdd ? 0.5 : 1,\n            }}\n            animate={controls}\n          />\n        );\n      })}\n    </svg>\n  );\n}\n",
      "type": "registry:ui",
      "target": "~/components/craftui/loaders/audio-bars-glow/default.tsx"
    }
  ],
  "meta": {
    "displayName": "Audio Bars Glow - Audio Bars Glow",
    "description": "Six vertical bars with gradient fill, glow effect, and synchronized alternating animation",
    "category": "loaders",
    "tags": [
      "audio",
      "music",
      "sound",
      "glow",
      "gradient",
      "vertical",
      "bars"
    ],
    "animationType": "loop"
  }
}