{
  "name": "dots-rotate-default",
  "type": "registry:ui",
  "tier": "free",
  "dependencies": [
    "framer-motion"
  ],
  "registryDependencies": [
    "https://www.craftui.space/r/craftui-base.json"
  ],
  "files": [
    {
      "path": "components/craftui/loaders/dots-rotate/default.tsx",
      "content": "'use client';\n\nimport { motion } from 'motion/react';\n\ninterface DotsRotateProps {\n  width?: number;\n  height?: number;\n  color?: string;\n  dotSize?: number;\n  isAnimating?: boolean;\n  duration?: number;\n  ease?: any;\n}\n\nexport function DotsRotate({ \n  width = 40,\n  height = 46, // aspect-ratio 1.154 (40 * 1.154 ≈ 46)\n  color = \"currentColor\",\n  dotSize = 14, // 35% of 40px\n  isAnimating = true,\n  duration = 1.0,\n  ease = [0.645, 0.045, 0.355, 1],\n}: DotsRotateProps) {\n\n  // Dot positions forming a triangle\n  const positions = [\n    { x: width / 2, y: dotSize / 2 },        // Top center\n    { x: dotSize / 2, y: height - dotSize / 2 },    // Bottom left\n    { x: width - dotSize / 2, y: height - dotSize / 2 }  // Bottom right\n  ];\n\n  const dots = [\n    { id: 0, startPos: 0 }, // Starts at top\n    { id: 1, startPos: 1 }, // Starts at bottom left\n    { id: 2, startPos: 2 }  // Starts at bottom right\n  ];\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      {dots.map((dot) => {\n        // Each dot rotates to next position (0→2, 1→0, 2→1)\n        const nextPos = (dot.startPos + 2) % 3;\n        \n        return (\n          <motion.circle\n            key={dot.id}\n            r={dotSize / 2}\n            fill={color}\n            initial={{ cx: positions[dot.startPos].x, cy: positions[dot.startPos].y }}\n            animate={{\n              cx: [positions[dot.startPos].x, positions[nextPos].x],\n              cy: [positions[dot.startPos].y, positions[nextPos].y]\n            }}\n            transition={{\n              duration: duration,\n              repeat: isAnimating ? Infinity : 0,\n              ease: ease,\n              times: [0, 1]\n            }}\n          />\n        );\n      })}\n    </svg>\n  );\n}",
      "type": "registry:ui",
      "target": "~/components/craftui/loaders/dots-rotate/default.tsx"
    }
  ],
  "meta": {
    "displayName": "Dots Rotate - Dots Rotate",
    "description": "Three circular dots that continuously rotate 120 degrees around a center point",
    "category": "loaders",
    "tags": [
      "dots",
      "loading",
      "rotate",
      "spin",
      "circular",
      "triangle"
    ],
    "animationType": "loop"
  }
}