Particles Background for React

const particles = Array.from({ length: 36 }, (_, i) => ({
  left: (i * 37) % 100,
  top: (i * 53) % 100,
  delay: (i % 8) * 0.35,
}))

export function ParticlesBackground() {
  return (
    <div className="relative min-h-80 overflow-hidden rounded-3xl bg-slate-950">
      {particles.map((particle, i) => (
        <span key={i} aria-hidden="true"
          className="absolute h-1 w-1 animate-pulse rounded-full bg-violet-300 motion-reduce:animate-none"
          style={{ left: particle.left + '%', top: particle.top + '%', animationDelay: particle.delay + 's' }} />
      ))}
      <div className="relative grid min-h-80 place-items-center text-3xl font-bold text-white">Build among the stars</div>
    </div>
  )
}