{
  "name": "ball-bounce-box-default",
  "type": "registry:ui",
  "tier": "free",
  "dependencies": [
    "framer-motion"
  ],
  "registryDependencies": [
    "https://www.craftui.space/r/craftui-base.json"
  ],
  "files": [
    {
      "path": "components/craftui/loaders/ball-bounce-box/default.tsx",
      "content": "'use client';\n\nimport { useEffect } from 'react';\nimport { motion, useAnimation } from 'motion/react';\n\ninterface BallBounceBoxProps {\n  width?: number;\n  height?: number;\n  color?: string;\n  boxColor?: string;\n  isAnimating?: boolean;\n  duration?: number;\n  ease?: any;\n  strokeWidth?: number;\n}\n\nexport function BallBounceBox({\n  width = 60,\n  height = 60,\n  color = \"currentColor\",\n  boxColor = \"currentColor\",\n  isAnimating = true,\n  duration = 0.5,\n  ease = 'easeOut',\n  strokeWidth = 3,\n}: BallBounceBoxProps) {\n  const ballRadius = width * 0.15;\n  const ballX = width * 0.35 + ballRadius;\n  const ballY = height - ballRadius - strokeWidth;\n\n  // Increase viewBox to accommodate rotation and bounce\n  const viewBoxPadding = width * 0.2;\n  const viewBoxSize = width + (viewBoxPadding * 2);\n  const offset = viewBoxPadding;\n\n  const controlsBox = useAnimation();\n  const controlsBall = useAnimation();\n\n  useEffect(() => {\n    if (isAnimating) {\n      controlsBox.start({\n        rotate: [0, 0, 90, 90],\n        transition: { duration, repeat: Infinity, times: [0, 0.2, 0.8, 1], ease },\n      });\n      controlsBall.start({\n        y: [0, -height * 0.4, 0],\n        transition: { duration, repeat: Infinity, times: [0, 0.08, 1], ease },\n      });\n    } else {\n      controlsBox.stop();\n      controlsBox.set({ rotate: 0 });\n      controlsBall.stop();\n      controlsBall.set({ y: 0 });\n    }\n  }, [isAnimating, duration, ease, height, controlsBox, controlsBall]);\n\n  return (\n    <svg\n      width={width}\n      height={height}\n      viewBox={`${-offset} ${-offset} ${viewBoxSize} ${viewBoxSize}`}\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      aria-label=\"Loading\"\n      role=\"img\"\n    >\n      {/* Rotating box outline */}\n      <motion.rect\n        x={strokeWidth / 2}\n        y={strokeWidth / 2}\n        width={width - strokeWidth}\n        height={height - strokeWidth}\n        stroke={boxColor}\n        strokeWidth={strokeWidth}\n        fill=\"none\"\n        initial={{ rotate: 0 }}\n        animate={controlsBox}\n        style={{ originX: `${width / 2}px`, originY: `${height / 2}px` }}\n      />\n      {/* Bouncing ball */}\n      <motion.circle\n        cx={ballX}\n        cy={ballY}\n        r={ballRadius}\n        fill={color}\n        initial={{ y: 0 }}\n        animate={controlsBall}\n      />\n    </svg>\n  );\n}\n",
      "type": "registry:ui",
      "target": "~/components/craftui/loaders/ball-bounce-box/default.tsx"
    }
  ],
  "meta": {
    "displayName": "Ball Bounce Box - Ball Bounce Box",
    "description": "A square box outline rotates 90° in stepped intervals while a ball bounces rapidly inside it",
    "category": "loaders",
    "tags": [
      "bounce",
      "rotate",
      "ball",
      "square",
      "multi",
      "sequential",
      "geometric"
    ],
    "animationType": "loop"
  }
}