{
  "name": "audio-bars-opacity-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-opacity/default.tsx",
      "content": "'use client';\n\nimport { useEffect } from 'react';\nimport { motion, useAnimation } from 'motion/react';\n\ninterface AudioBarsOpacityProps {\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 AudioBarsOpacity({\n  width = 60,\n  height = 60,\n  color = \"currentColor\",\n  barWidth = 4,\n  gap = 3,\n  isAnimating = true,\n  duration = 0.8,\n  ease = 'easeInOut',\n}: AudioBarsOpacityProps) {\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.3, 1, 0.3] : [1, 0.3, 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.3 : 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      {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={color}\n            custom={index}\n            initial={{\n              height: isOdd ? minHeight : maxHeight,\n              y: isOdd ? (height - minHeight) / 2 : (height - maxHeight) / 2,\n              opacity: isOdd ? 0.3 : 1,\n            }}\n            animate={controls}\n          />\n        );\n      })}\n    </svg>\n  );\n}\n",
      "type": "registry:ui",
      "target": "~/components/craftui/loaders/audio-bars-opacity/default.tsx"
    }
  ],
  "meta": {
    "displayName": "Audio Bars Opacity - Audio Bars Opacity",
    "description": "Six vertical bars fading in and out as they grow and shrink, creating a ghosting wave effect",
    "category": "loaders",
    "tags": [
      "audio",
      "music",
      "sound",
      "opacity",
      "fade",
      "vertical",
      "bars"
    ],
    "animationType": "loop"
  }
}