Puntos que respiran

import { motion } from "framer-motion";

interface BreathingDotsProps {
  color?: string;
  size?: number;
  /** Duración de una respiración en segundos. */
  speed?: number;
}

export default function BreathingDots({
  color = "#6e6e73",
  size = 15,
  speed = 1.5,
}: BreathingDotsProps) {
  return (
    <div role="status" aria-label="Cargando" className="flex gap-3">
      {[0, 1, 2].map((i) => (
        <motion.span
          key={i}
          className="rounded-full"
          style={{ width: size, height: size, backgroundColor: color }}
          animate={{ scale: [0.72, 1, 0.72], opacity: [0.35, 1, 0.35] }}
          transition={{ duration: speed, delay: i * 0.18, repeat: Infinity }}
        />
      ))}
    </div>
  );
}