{
  "name": "dot-circle-expand-default",
  "type": "registry:ui",
  "tier": "free",
  "dependencies": [
    "framer-motion"
  ],
  "registryDependencies": [
    "https://www.craftui.space/r/craftui-base.json"
  ],
  "files": [
    {
      "path": "components/craftui/loaders/dot-circle-expand/default.tsx",
      "content": "'use client';\n\nimport { motion } from 'motion/react';\n\ninterface DotCircleExpandProps {\n  width?: number;\n  height?: number;\n  color?: string;\n  centerDotSize?: number;\n  cornerDotSize?: number;\n  isAnimating?: boolean;\n  duration?: number;\n  ease?: any;\n}\n\nexport function DotCircleExpand({\n  width = 40,\n  height = 40,\n  color = \"currentColor\",\n  centerDotSize = 10,\n  cornerDotSize = 9,\n  isAnimating = true,\n  duration = 1.5,\n  ease = [0.3, 1, 0, 1],\n}: DotCircleExpandProps) {\n  const cx = width / 2;\n  const cy = height / 2;\n  const cornerR = cornerDotSize / 2;\n\n  // Corner dot positions (centers)\n  const quarterX = width * 0.25;\n  const quarterY = height * 0.25;\n  const threeQuarterX = width * 0.75;\n  const threeQuarterY = height * 0.75;\n\n  const cornerPositions = [\n    { x: quarterX, y: quarterY },         // TL\n    { x: threeQuarterX, y: quarterY },    // TR\n    { x: threeQuarterX, y: threeQuarterY }, // BR\n    { x: quarterX, y: threeQuarterY },    // BL\n  ];\n\n  const expandOffset = width * 0.18;\n  const expandedPositions = [\n    { x: quarterX - expandOffset, y: quarterY - expandOffset },\n    { x: threeQuarterX + expandOffset, y: quarterY - expandOffset },\n    { x: threeQuarterX + expandOffset, y: threeQuarterY + expandOffset },\n    { x: quarterX - expandOffset, y: threeQuarterY + expandOffset },\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      aria-label=\"Loading\"\n      role=\"img\"\n    >\n      {/* Static center dot */}\n      <circle cx={cx} cy={cy} r={centerDotSize / 2} fill={color} />\n      {/* Animated corner dots */}\n      {cornerPositions.map((pos, i) => (\n        <motion.circle\n          key={i}\n          r={cornerR}\n          fill={color}\n          initial={{ cx: pos.x, cy: pos.y }}\n          animate={{\n            cx: [pos.x, expandedPositions[i].x, expandedPositions[i].x, pos.x],\n            cy: [pos.y, expandedPositions[i].y, expandedPositions[i].y, pos.y],\n          }}\n          transition={{\n            duration: duration,\n            repeat: isAnimating ? Infinity : 0,\n            times: [0, 0.33, 0.66, 1],\n            ease: ease,\n          }}\n        />\n      ))}\n    </svg>\n  );\n}\n",
      "type": "registry:ui",
      "target": "~/components/craftui/loaders/dot-circle-expand/default.tsx"
    }
  ],
  "meta": {
    "displayName": "Dot Circle Expand - Dot Circle Expand",
    "description": "Static center dot with four corner dots that pulse outward and return, creating a dynamic radial expansion effect",
    "category": "loaders",
    "tags": [
      "dots",
      "circle",
      "radial",
      "expand",
      "pulse",
      "multi",
      "smooth",
      "rotate"
    ],
    "animationType": "loop"
  }
}