{
  "name": "bars-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-wave/default.tsx",
      "content": "'use client';\n\nimport { motion } from 'motion/react';\n\ninterface BarsWaveProps {\n  width?: number;\n  height?: number;\n  color?: string;\n  barWidth?: number;\n  isAnimating?: boolean;\n  duration?: number;\n  ease?: any;\n}\n\nexport function BarsWave({\n  width = 100,\n  height = 100,\n  color = \"currentColor\",\n  barWidth = 3,\n  isAnimating = true,\n  duration = 1.0,\n  ease = 'easeInOut',\n}: BarsWaveProps) {\n  const bars = [\n    { x: 0, delay: 0 },\n    { x: 10, delay: 0.1 },\n    { x: 20, delay: 0.3 },\n    { x: 30, delay: 0.5 },\n    { x: 40, delay: 0.1 }\n  ];\n\n  return (\n    <svg\n      width={width}\n      height={height}\n      viewBox={`0 0 100 100`}\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={bar.x}\n          width={barWidth}\n          fill={color}\n          initial={{ height: 30, y: 70 }}\n          animate={isAnimating ? { height: [30, 100, 30], y: [70, 0, 70] } : { height: 30, y: 70 }}\n          transition={{ duration, repeat: isAnimating ? Infinity : 0, ease, delay: bar.delay }}\n        />\n      ))}\n    </svg>\n  );\n}\n",
      "type": "registry:ui",
      "target": "~/components/craftui/loaders/bars-wave/default.tsx"
    }
  ],
  "meta": {
    "displayName": "Bars Wave - Bars Wave",
    "description": "Five vertical bars with staggered height animation creating a wave effect",
    "category": "loaders",
    "tags": [
      "bars",
      "loading",
      "wave",
      "vertical",
      "five-bars"
    ],
    "animationType": "loop"
  }
}