{
  "name": "spinner-sequential-pulse",
  "type": "registry:ui",
  "registryDependencies": [],
  "dependencies": [
    "motion"
  ],
  "devDependencies": [],
  "tailwind": {},
  "cssVars": {
    "light": {},
    "dark": {}
  },
  "files": [
    {
      "path": "spinner-sequential-pulse.tsx",
      "content": "'use client';\n\nimport React from 'react';\nimport { motion } from 'motion/react';\nimport { cn } from '@/lib/utils';\n\nexport type SpinnerSequentialPulseProps = {\n  /** Outer box size (px) */\n  size?: number;\n  /** Number of dots around the ring */\n  count?: number;\n  /** Dot diameter (px) */\n  dotSize?: number;\n  /** Dot color */\n  color?: string;\n  /** Track (ring) visibility */\n  showTrack?: boolean;\n  /** Track color */\n  trackColor?: string;\n  /** Track thickness (px) */\n  trackWidth?: number;\n  /** Show faint spokes from center to each dot */\n  showSpokes?: boolean;\n  /** Base cycle duration (seconds) */\n  speed?: number;\n  className?: string;\n};\n\nexport function SpinnerSequentialPulse({\n  size = 120,\n  count = 12,\n  dotSize = 8,\n  color = '#fff',\n  showTrack = true,\n  trackColor = 'rgba(255,255,255,0.1)',\n  trackWidth = 2,\n  showSpokes = true,\n  speed = 1.2,\n  className,\n}: SpinnerSequentialPulseProps) {\n  const dots = Array.from({ length: count });\n  const radius = size / 2 - dotSize * 1.25; // leave room for the dot\n  const center = size / 2;\n\n  return (\n    <div\n      className={cn('relative flex items-center justify-center', className)}\n      style={{ width: size, height: size }}\n      role='status'\n      aria-label='Loading'\n    >\n      {/* Track ring */}\n      {showTrack && (\n        <span\n          aria-hidden\n          className='absolute rounded-full'\n          style={{\n            inset: dotSize,\n            border: `${trackWidth}px solid ${trackColor}`,\n          }}\n        />\n      )}\n\n      {/* Spokes */}\n      {showSpokes &&\n        dots.map((_, i) => {\n          const angle = (i * 360) / count;\n          return (\n            <span\n              aria-hidden\n              key={`spoke-${i}`}\n              className='absolute origin-[0_50%]'\n              style={{\n                width: radius,\n                height: 1,\n                left: center,\n                top: center,\n                transform: `rotate(${angle}deg)`,\n                background:\n                  'linear-gradient(90deg, rgba(255,255,255,0.2), rgba(255,255,255,0))',\n              }}\n            />\n          );\n        })}\n\n      {/* Dots */}\n      {dots.map((_, i) => {\n        const angle = (i * 360) / count;\n        const x = radius * Math.cos((angle * Math.PI) / 180);\n        const y = radius * Math.sin((angle * Math.PI) / 180);\n\n        return (\n          <motion.span\n            aria-hidden\n            key={`dot-${i}`}\n            className='absolute rounded-full'\n            style={{\n              width: dotSize,\n              height: dotSize,\n              top: center - dotSize / 2 + y,\n              left: center - dotSize / 2 + x,\n              backgroundColor: color,\n            }}\n            initial={{ opacity: 0.2, scale: 0.9 }}\n            animate={{ opacity: [0.2, 1, 0.2], scale: [0.9, 1.15, 0.9] }}\n            transition={{\n              duration: speed,\n              repeat: Infinity,\n              ease: 'easeInOut',\n              // sequential delay\n              delay: (i * speed) / count,\n            }}\n          />\n        );\n      })}\n    </div>\n  );\n}\n",
      "type": "registry:ui"
    }
  ]
}