{
  "name": "spinner-orbit-dots-default",
  "type": "registry:ui",
  "tier": "free",
  "dependencies": [
    "framer-motion"
  ],
  "registryDependencies": [
    "https://www.craftui.space/r/craftui-base.json"
  ],
  "files": [
    {
      "path": "components/craftui/loaders/spinner-orbit-dots/default.tsx",
      "content": "'use client';\n\nimport { motion } from 'motion/react';\nimport { useEffect, useState } from 'react';\n\ninterface SpinnerOrbitDotsProps {\n  width?: number;\n  height?: number;\n  dotCount?: number;\n  dotSize?: number;\n  isAnimating?: boolean;\n  speed?: number;\n}\n\nexport function SpinnerOrbitDots({\n  width = 60,\n  height = 60,\n  dotCount = 8,\n  dotSize = 6,\n  isAnimating = true,\n  speed = 120,\n}: SpinnerOrbitDotsProps) {\n  const centerX = width / 2;\n  const centerY = height / 2;\n  const radius = Math.min(width, height) * 0.35;\n  const [activeDot, setActiveDot] = useState(0);\n\n  const dots = Array.from({ length: dotCount }).map((_, i) => {\n    const angle = (360 / dotCount) * i - 90;\n    const rad = (angle * Math.PI) / 180;\n    const x = centerX + radius * Math.cos(rad);\n    const y = centerY + radius * Math.sin(rad);\n    return { x, y };\n  });\n\n  useEffect(() => {\n    if (!isAnimating) return;\n    const interval = setInterval(() => {\n      setActiveDot((prev) => (prev + 1) % dotCount);\n    }, speed);\n    return () => clearInterval(interval);\n  }, [isAnimating, dotCount]);\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      {/* Static dim dots */}\n      {dots.map((dot, i) => (\n        <circle\n          key={i}\n          cx={dot.x}\n          cy={dot.y}\n          r={dotSize / 2}\n          fill={i === activeDot ? 'transparent' : '#404040'}\n        />\n      ))}\n    </svg>\n  );\n}",
      "type": "registry:ui",
      "target": "~/components/craftui/loaders/spinner-orbit-dots/default.tsx"
    }
  ],
  "meta": {
    "displayName": "Spinner Orbit Dots - Spinner Orbit Dots",
    "description": "Dots arranged in a radial pattern rotate together as a group, with opacity gradient creating a comet-tail effect",
    "category": "loaders",
    "tags": [
      "spinner",
      "dots",
      "orbit",
      "circle",
      "radial",
      "smooth",
      "minimal",
      "rotate"
    ],
    "animationType": "loop"
  }
}