{
  "name": "bars-scale-wave-default",
  "type": "registry:ui",
  "tier": "free",
  "dependencies": [
    "framer-motion"
  ],
  "registryDependencies": [
    "https://www.craftui.space/r/craftui-base.json"
  ],
  "files": [
    {
      "path": "components/craftui/loaders/bars-scale-wave/default.tsx",
      "content": "'use client';\n\nimport { useEffect } from 'react';\nimport { motion, useAnimation } from 'motion/react';\n\ninterface BarsScaleWaveProps {\n  width?: number;\n  height?: number;\n  color?: string;\n  barCount?: number;\n  barWidth?: number;\n  isAnimating?: boolean;\n  duration?: number;\n  ease?: any;\n  staggerDelay?: number;\n}\n\nexport function BarsScaleWave({\n  width = 60,\n  height = 60,\n  color = \"currentColor\",\n  barCount = 5,\n  barWidth = 8,\n  isAnimating = true,\n  duration = 1.0,\n  ease = 'easeInOut',\n  staggerDelay = 0.1,\n}: BarsScaleWaveProps) {\n  const totalBarsWidth = barCount * barWidth;\n  const spacing = (width - totalBarsWidth) / (barCount + 1);\n  const minHeightRatio = 0.3;\n\n  const controls = useAnimation();\n\n  useEffect(() => {\n    if (isAnimating) {\n      controls.start((i) => ({\n        scaleY: [minHeightRatio, 1, minHeightRatio],\n        y: [height * (1 - minHeightRatio) / 2, 0, height * (1 - minHeightRatio) / 2],\n        transition: { duration, repeat: Infinity, delay: i * staggerDelay, ease },\n      }));\n    } else {\n      controls.stop();\n      controls.set({ scaleY: minHeightRatio, y: height * (1 - minHeightRatio) / 2 });\n    }\n  }, [isAnimating, duration, ease, staggerDelay, height, minHeightRatio, 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      aria-label=\"Loading\"\n      role=\"img\"\n    >\n      {Array.from({ length: barCount }).map((_, i) => {\n        const x = spacing * (i + 1) + barWidth * i;\n\n        return (\n          <motion.rect\n            key={i}\n            x={x}\n            y={0}\n            width={barWidth}\n            height={height}\n            fill={color}\n            rx={barWidth / 2}\n            custom={i}\n            initial={{ scaleY: minHeightRatio, y: height * (1 - minHeightRatio) / 2 }}\n            animate={controls}\n            style={{ originY: 'center', transformOrigin: `${x + barWidth / 2}px ${height / 2}px` }}\n          />\n        );\n      })}\n    </svg>\n  );\n}\n",
      "type": "registry:ui",
      "target": "~/components/craftui/loaders/bars-scale-wave/default.tsx"
    }
  ],
  "meta": {
    "displayName": "Bars Scale Wave - Bars Scale Wave",
    "description": "Vertical bars grow and shrink in a wave pattern with staggered delays, resembling an audio equalizer",
    "category": "loaders",
    "tags": [
      "bars",
      "scale",
      "wave",
      "vertical",
      "multi",
      "smooth",
      "simple",
      "equalizer"
    ],
    "animationType": "loop"
  }
}