{
  "name": "bars-cascade-default",
  "type": "registry:ui",
  "tier": "free",
  "dependencies": [
    "framer-motion"
  ],
  "registryDependencies": [
    "https://www.craftui.space/r/craftui-base.json"
  ],
  "files": [
    {
      "path": "components/craftui/loaders/bars-cascade/default.tsx",
      "content": "'use client';\n\nimport { useEffect } from 'react';\nimport { motion, useAnimation } from 'motion/react';\n\ninterface BarsCascadeProps {\n  width?: number;\n  height?: number;\n  color?: string;\n  isAnimating?: boolean;\n  duration?: number;\n  ease?: any;\n}\n\nexport function BarsCascade({\n  width = 45,\n  height = 45,\n  color = \"currentColor\",\n  isAnimating = true,\n  duration = 1.5,\n  ease = [0.455, 0.03, 0.515, 0.955],\n}: BarsCascadeProps) {\n\n  const barHeight = height * 0.26; // 26% of container\n  const stripeWidth = width * 0.2; // 20% for stripe pattern\n\n  // 4 bars with their animation sequences\n  const bars = [\n    { id: 0, ySequence: [-20, -20, -20, -20, 0, 0, 0, 0, 50] },\n    { id: 1, ySequence: [-20, -20, -20, height/3, height/3, height/3, height/3, 50, 50] },\n    { id: 2, ySequence: [-20, -20, (height*2)/3, (height*2)/3, (height*2)/3, (height*2)/3, 50, 50, 50] },\n    { id: 3, ySequence: [-20, height, height, height, height, 50, 50, 50, 50] }\n  ];\n\n  const controls = useAnimation();\n\n  useEffect(() => {\n    if (isAnimating) {\n      controls.start((i) => ({\n        y: bars[i].ySequence,\n        transition: { duration, repeat: Infinity, ease, times: [0, 0.125, 0.25, 0.375, 0.5, 0.625, 0.75, 0.875, 1] },\n      }));\n    } else {\n      controls.stop();\n      controls.set({ y: -20 });\n    }\n  }, [isAnimating, duration, ease, 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      <defs>\n        {/* Striped pattern */}\n        <pattern\n          id=\"stripePattern\"\n          patternUnits=\"userSpaceOnUse\"\n          width={stripeWidth * 2}\n          height={barHeight}\n        >\n          <rect x=\"0\" y=\"0\" width={stripeWidth} height={barHeight} fill={color} />\n          <rect x={stripeWidth} y=\"0\" width={stripeWidth} height={barHeight} fill=\"transparent\" />\n        </pattern>\n      </defs>\n\n      {bars.map((bar, i) => (\n        <motion.rect\n          key={bar.id}\n          x={0}\n          width={width}\n          height={barHeight}\n          fill=\"url(#stripePattern)\"\n          custom={i}\n          initial={{ y: -20 }}\n          animate={controls}\n        />\n      ))}\n    </svg>\n  );\n}\n",
      "type": "registry:ui",
      "target": "~/components/craftui/loaders/bars-cascade/default.tsx"
    }
  ],
  "meta": {
    "displayName": "Bars Cascade - Bars Cascade",
    "description": "Four horizontal bars with stripe pattern that cascade down from top, stack up, then cascade out from bottom",
    "category": "loaders",
    "tags": [
      "bars",
      "loading",
      "cascade",
      "waterfall",
      "horizontal",
      "striped"
    ],
    "animationType": "loop"
  }
}