{
  "name": "bars-fade-01-fade",
  "type": "registry:ui",
  "tier": "free",
  "dependencies": [
    "framer-motion"
  ],
  "registryDependencies": [
    "https://www.craftui.space/r/craftui-base.json"
  ],
  "files": [
    {
      "path": "components/craftui/loaders/bars-fade-01/fade.tsx",
      "content": "'use client';\n\nimport { motion } from 'motion/react';\n\ninterface BarsFadeProps {\n  size?: number;\n  color?: string;\n  gap?: number;\n  isAnimating?: boolean;\n  duration?: number;\n  ease?: any;\n  staggerDelay?: number;\n}\n\nexport function BarsFade({\n  size = 40,\n  color = \"currentColor\",\n  gap = 4,\n  isAnimating = true,\n  duration = 1.2,\n  ease = 'easeInOut',\n  staggerDelay = 0.2,\n}: BarsFadeProps) {\n  const barWidth = (size - gap * 2) / 3;\n  \n  return (\n    <svg\n      width={size}\n      height={size}\n      viewBox={`0 0 ${size} ${size}`}\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          y={size / 4}\n          width={barWidth}\n          height={size / 2}\n          fill={color}\n          initial={{ opacity: 1 }}\n          animate={{\n            opacity: [1, 0.3, 1]\n          }}\n          transition={{\n            duration: duration,\n            repeat: isAnimating ? Infinity : 0,\n            ease: ease,\n            delay: index * staggerDelay\n          }}\n        />\n      ))}\n    </svg>\n  );\n}",
      "type": "registry:ui",
      "target": "~/components/craftui/loaders/bars-fade-01/fade.tsx"
    }
  ],
  "meta": {
    "displayName": "Bars Fade - Bars Fade",
    "description": "Three vertical bars with smooth fade animation",
    "category": "loaders",
    "tags": [
      "bars",
      "loading",
      "fade",
      "vertical",
      "opacity"
    ],
    "animationType": "loop"
  }
}