{
  "name": "bars-scale-bottom-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-bottom/default.tsx",
      "content": "'use client';\n\nimport { useEffect } from 'react';\nimport { motion, useAnimation } from 'motion/react';\n\ninterface BarsScaleBottomProps {\n  width?: number;\n  height?: number;\n  color?: string;\n  gap?: number;\n  isAnimating?: boolean;\n  duration?: number;\n  ease?: any;\n  staggerDelay?: number;\n}\n\nexport function BarsScaleBottom({\n  width = 40,\n  height = 40,\n  color = \"currentColor\",\n  gap = 4,\n  isAnimating = true,\n  duration = 1.0,\n  ease = 'easeInOut',\n  staggerDelay = 0.15,\n}: BarsScaleBottomProps) {\n  const barWidth = (width - gap * 2) / 3;\n  const baseHeight = height / 2;\n  const minHeight = height / 4;\n\n  const controls = useAnimation();\n\n  useEffect(() => {\n    if (isAnimating) {\n      controls.start((i) => ({\n        height: [baseHeight, minHeight, baseHeight],\n        y: [height / 4, height - minHeight, height / 4],\n        transition: { duration, repeat: Infinity, ease, delay: i * staggerDelay },\n      }));\n    } else {\n      controls.stop();\n      controls.set({ height: baseHeight, y: height / 4 });\n    }\n  }, [isAnimating, duration, ease, staggerDelay, baseHeight, minHeight, 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      {[0, 1, 2].map((index) => (\n        <motion.rect\n          key={index}\n          x={index * (barWidth + gap)}\n          width={barWidth}\n          fill={color}\n          custom={index}\n          initial={{ height: baseHeight, y: height / 4 }}\n          animate={controls}\n        />\n      ))}\n    </svg>\n  );\n}\n",
      "type": "registry:ui",
      "target": "~/components/craftui/loaders/bars-scale-bottom/default.tsx"
    }
  ],
  "meta": {
    "displayName": "Bars Scale Bottom - Bars Scale Bottom",
    "description": "Three vertical bars scaling up and down with bottom fixed",
    "category": "loaders",
    "tags": [
      "bars",
      "loading",
      "scale",
      "vertical",
      "bottom-fixed"
    ],
    "animationType": "loop"
  }
}