{
  "name": "dots-bounce-default",
  "type": "registry:ui",
  "tier": "free",
  "dependencies": [
    "framer-motion"
  ],
  "registryDependencies": [
    "https://www.craftui.space/r/craftui-base.json"
  ],
  "files": [
    {
      "path": "components/craftui/loaders/dots-bounce/default.tsx",
      "content": "'use client';\n\nimport { motion } from 'motion/react';\n\ninterface DotsBounceProps {\n  width?: number;\n  height?: number;\n  color?: string;\n  dotSize?: number;\n  dotCount?: number;\n  isAnimating?: boolean;\n  duration?: number;\n  ease?: any;\n  staggerDelay?: number;\n}\n\nexport function DotsBounce({\n  width = 60,\n  height = 30,\n  color = \"currentColor\",\n  dotSize = 8,\n  dotCount = 3,\n  isAnimating = true,\n  duration = 0.8,\n  ease = 'easeInOut',\n  staggerDelay = 0.15,\n}: DotsBounceProps) {\n  const dotRadius = dotSize / 2;\n  const centerY = height / 2;\n  const bounceHeight = height * 0.3;\n  const totalDotsWidth = dotCount * dotSize;\n  const spacing = (width - totalDotsWidth) / (dotCount + 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      {Array.from({ length: dotCount }).map((_, i) => {\n        const cx = spacing * (i + 1) + dotSize * i + dotRadius;\n        return (\n          <motion.circle\n            key={i}\n            cx={cx}\n            cy={centerY}\n            r={dotRadius}\n            fill={color}\n            animate={{\n              y: [0, -bounceHeight, 0],\n            }}\n            transition={{\n              duration: duration,\n              repeat: isAnimating ? Infinity : 0,\n              delay: i * staggerDelay,\n              ease: ease,\n            }}\n          />\n        );\n      })}\n    </svg>\n  );\n}\n",
      "type": "registry:ui",
      "target": "~/components/craftui/loaders/dots-bounce/default.tsx"
    }
  ],
  "meta": {
    "displayName": "Dots Bounce - Dots Bounce",
    "description": "Dots in a horizontal row bounce upward sequentially with staggered delays creating a wave-like typing indicator",
    "category": "loaders",
    "tags": [
      "dots",
      "bounce",
      "horizontal",
      "simple",
      "smooth",
      "minimal",
      "three",
      "typing"
    ],
    "animationType": "loop"
  }
}