Spinner Sequential Pulse

1'use client';
2 
3import React from 'react';
4import { motion } from 'motion/react';
5import { cn } from '@/lib/utils';
6 
7export type SpinnerSequentialPulseProps = {
8  /** Outer box size (px) */
9  size?: number;
10  /** Number of dots around the ring */
11  count?: number;
12  /** Dot diameter (px) */
13  dotSize?: number;
14  /** Dot color */
15  color?: string;
16  /** Track (ring) visibility */
17  showTrack?: boolean;
18  /** Track color */
19  trackColor?: string;
20  /** Track thickness (px) */
21  trackWidth?: number;
22  /** Show faint spokes from center to each dot */
23  showSpokes?: boolean;
24  /** Base cycle duration (seconds) */
25  speed?: number;
26  className?: string;
27};
28 
29export function SpinnerSequentialPulse({
30  size = 120,
31  count = 12,
32  dotSize = 8,
33  color = '#fff',
34  showTrack = true,
35  trackColor = 'rgba(255,255,255,0.1)',
36  trackWidth = 2,
37  showSpokes = true,
38  speed = 1.2,
39  className,
40}: SpinnerSequentialPulseProps) {
41  const dots = Array.from({ length: count });
42  const radius = size / 2 - dotSize * 1.25; // leave room for the dot
43  const center = size / 2;
44 
45  return (
46    <div
47      className={cn('relative flex items-center justify-center', className)}
48      style={{ width: size, height: size }}
49      role='status'
50      aria-label='Loading'
51    >
52      {/* Track ring */}
53      {showTrack && (
54        <span
55          aria-hidden
56          className='absolute rounded-full'
57          style={{
58            inset: dotSize,
59            border: `${trackWidth}px solid ${trackColor}`,
60          }}
61        />
62      )}
63 
64      {/* Spokes */}
65      {showSpokes &&
66        dots.map((_, i) => {
67          const angle = (i * 360) / count;
68          return (
69            <span
70              aria-hidden
71              key={`spoke-${i}`}
72              className='absolute origin-[0_50%]'
73              style={{
74                width: radius,
75                height: 1,
76                left: center,
77                top: center,
78                transform: `rotate(${angle}deg)`,
79                background:
80                  'linear-gradient(90deg, rgba(255,255,255,0.2), rgba(255,255,255,0))',
81              }}
82            />
83          );
84        })}
85 
86      {/* Dots */}
87      {dots.map((_, i) => {
88        const angle = (i * 360) / count;
89        const x = radius * Math.cos((angle * Math.PI) / 180);
90        const y = radius * Math.sin((angle * Math.PI) / 180);
91 
92        return (
93          <motion.span
94            aria-hidden
95            key={`dot-${i}`}
96// … truncated