{
  "name": "triangle-cascade-default",
  "type": "registry:ui",
  "tier": "free",
  "dependencies": [
    "framer-motion"
  ],
  "registryDependencies": [
    "https://www.craftui.space/r/craftui-base.json"
  ],
  "files": [
    {
      "path": "components/craftui/loaders/triangle-cascade/default.tsx",
      "content": "'use client';\n\nimport { motion } from 'motion/react';\n\ninterface TriangleCascadeProps {\n  width?: number;\n  height?: number;\n  color?: string;\n  bars?: number;\n  isAnimating?: boolean;\n  duration?: number;\n  ease?: any;\n  strokeWidth?: number;\n  staggerDelay?: number;\n}\n\nexport function TriangleCascade({\n  width = 80,\n  height = 69,\n  color = \"currentColor\",\n  bars = 5,\n  isAnimating = true,\n  duration = 2.0,\n  ease = 'easeInOut',\n  strokeWidth = 1,\n  staggerDelay = 0.4,\n}: TriangleCascadeProps) {\n  const barHeight = height / bars + 1;\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      aria-label=\"Loading\"\n      role=\"img\"\n    >\n      <defs>\n        <clipPath id={`triangle-clip-${width}`}>\n          <polygon points={`${width / 2},0 ${width},${height} 0,${height}`} />\n        </clipPath>\n      </defs>\n      {/* Triangle outline */}\n      <polygon\n        points={`${width / 2},0 ${width},${height} 0,${height}`}\n        stroke={color}\n        strokeWidth={strokeWidth}\n        fill=\"none\"\n        opacity={0.2}\n      />\n      {/* Cascading bars clipped to triangle */}\n      <g clipPath={`url(#triangle-clip-${width})`}>\n        {Array.from({ length: bars }).map((_, i) => {\n          const barY = height - (i + 1) * barHeight;\n          return (\n            <motion.rect\n              key={i}\n              x={0}\n              width={width}\n              height={barHeight}\n              fill={color}\n              initial={{ y: -barHeight }}\n              animate={{\n                y: [-barHeight, barY],\n              }}\n              transition={{\n                duration: duration,\n                repeat: isAnimating ? Infinity : 0,\n                delay: i * staggerDelay,\n                ease: ease,\n                times: [0, 1],\n              }}\n            />\n          );\n        })}\n      </g>\n    </svg>\n  );\n}\n",
      "type": "registry:ui",
      "target": "~/components/craftui/loaders/triangle-cascade/default.tsx"
    }
  ],
  "meta": {
    "displayName": "Triangle Cascade - Triangle Cascade",
    "description": "Five horizontal bars slide into position one after another, filling a triangle shape from bottom to top in a waterfall effect",
    "category": "loaders",
    "tags": [
      "triangle",
      "fill",
      "cascade",
      "sequential",
      "geometric",
      "complex",
      "vertical",
      "bars"
    ],
    "animationType": "loop"
  }
}