{
  "name": "audio-wave-vertical-default",
  "type": "registry:ui",
  "tier": "free",
  "dependencies": [
    "framer-motion"
  ],
  "registryDependencies": [
    "https://www.craftui.space/r/craftui-base.json"
  ],
  "files": [
    {
      "path": "components/craftui/loaders/audio-wave-vertical/default.tsx",
      "content": "'use client';\n\nimport { useEffect, useMemo } from 'react';\nimport { motion, useAnimation } from 'motion/react';\n\ninterface AudioWaveVerticalProps {\n  width?: number;\n  height?: number;\n  color?: string;\n  barWidth?: number;\n  gap?: number;\n  barCount?: number;\n  isAnimating?: boolean;\n  duration?: number;\n  ease?: any;\n  staggerDelay?: number;\n}\n\nexport function AudioWaveVertical({\n  width = 60,\n  height = 60,\n  color = \"currentColor\",\n  barWidth = 3,\n  gap = 3,\n  barCount = 5,\n  isAnimating = true,\n  duration = 0.6,\n  ease = 'easeInOut',\n  staggerDelay = 0.1,\n}: AudioWaveVerticalProps) {\n  const totalWidth = (barCount * barWidth) + ((barCount - 1) * gap);\n  const startX = (width - totalWidth) / 2;\n\n  // Define different height ranges for each bar (center is tallest)\n  // Use useMemo to stabilize bars across renders\n  const bars = useMemo(() => Array.from({ length: barCount }, (_, i) => {\n    const distanceFromCenter = Math.abs(i - Math.floor(barCount / 2));\n    const minHeight = height * 0.2; // 20% min\n    const maxHeight = height * (0.9 - distanceFromCenter * 0.15); // Center is tallest\n\n    return {\n      minHeight,\n      maxHeight,\n      duration: 0.6 + (i * 0.08), // deterministic per-bar duration\n      delay: i * 0.1, // Staggered\n    };\n  }), [barCount, height]);\n\n  const controls = useAnimation();\n\n  useEffect(() => {\n    if (isAnimating) {\n      controls.start((i) => ({\n        height: [bars[i].minHeight, bars[i].maxHeight, bars[i].minHeight],\n        y: [(height - bars[i].minHeight) / 2, (height - bars[i].maxHeight) / 2, (height - bars[i].minHeight) / 2],\n        transition: { duration: bars[i].duration, repeat: Infinity, ease, delay: bars[i].delay },\n      }));\n    } else {\n      controls.stop();\n      controls.set((i) => ({\n        height: bars[i].minHeight,\n        y: (height - bars[i].minHeight) / 2,\n      }));\n    }\n  }, [isAnimating, ease, height, bars, 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      {bars.map((bar, index) => (\n        <motion.rect\n          key={index}\n          x={startX + (index * (barWidth + gap))}\n          width={barWidth}\n          fill={color}\n          custom={index}\n          initial={{ height: bar.minHeight, y: (height - bar.minHeight) / 2 }}\n          animate={controls}\n        />\n      ))}\n    </svg>\n  );\n}\n",
      "type": "registry:ui",
      "target": "~/components/craftui/loaders/audio-wave-vertical/default.tsx"
    }
  ],
  "meta": {
    "displayName": "Audio Wave Vertical - Audio Wave Vertical",
    "description": "Five vertical bars animating in a symmetric wave pattern like audio visualization",
    "category": "loaders",
    "tags": [
      "audio",
      "music",
      "sound",
      "wave",
      "vertical",
      "bars",
      "equalizer"
    ],
    "animationType": "loop"
  }
}