LED Dot Matrix

<!-- LED Dot Matrix — a wave of light travels across staggered LEDs -->
<div class="nuda-ne2-dotmatrix" role="img" aria-label="Animated LED dot indicator">
  <span class="nuda-ne2-dotmatrix__dot" style="--d:0s"></span>
  <span class="nuda-ne2-dotmatrix__dot" style="--d:.13s"></span>
  <span class="nuda-ne2-dotmatrix__dot" style="--d:.26s"></span>
  <span class="nuda-ne2-dotmatrix__dot" style="--d:.39s"></span>
  <span class="nuda-ne2-dotmatrix__dot" style="--d:.52s"></span>
  <span class="nuda-ne2-dotmatrix__dot" style="--d:.65s"></span>
  <span class="nuda-ne2-dotmatrix__dot" style="--d:.78s"></span>
  <span class="nuda-ne2-dotmatrix__dot" style="--d:.91s"></span>
</div>

.nuda-ne2-dotmatrix {
  display: flex;
  gap: 6px;
  padding: 16px;
  background: #09090b;
  border-radius: 10px;
}

.nuda-ne2-dotmatrix__dot {
  position: relative;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: rgba(228,255,84,.15);
}

.nuda-ne2-dotmatrix__dot::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: #e4ff54;
  box-shadow: 0 0 6px #e4ff54,0 0 14px rgba(228,255,84,.7);
  opacity: 0;
  animation: _nuda-ne2dotmatrix 1.6s ease-in-out infinite;
  animation-delay: var(--d,0s);
}

@keyframes _nuda-ne2dotmatrix {
  0%,100% {
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
}

@media (prefers-reduced-motion:reduce) {
  .nuda-ne2-dotmatrix__dot::after {
    animation: none;
    opacity: .7;
  }
}