Particle Vortex

<!-- Particle Vortex -->
<div class="nuda-pt2-particle-vortex" role="img" aria-label="Particles spiraling into a vortex">
  <span class="nuda-pt2-particle-vortex__eye" aria-hidden="true"></span>
  <span class="nuda-pt2-particle-vortex__bit" style="--a0:0deg;   --d:0s"></span>
  <span class="nuda-pt2-particle-vortex__bit" style="--a0:36deg;  --d:.3s"></span>
  <span class="nuda-pt2-particle-vortex__bit" style="--a0:72deg;  --d:.6s"></span>
  <span class="nuda-pt2-particle-vortex__bit" style="--a0:108deg; --d:.9s"></span>
  <span class="nuda-pt2-particle-vortex__bit" style="--a0:144deg; --d:1.2s"></span>
  <span class="nuda-pt2-particle-vortex__bit" style="--a0:180deg; --d:1.5s"></span>
  <span class="nuda-pt2-particle-vortex__bit" style="--a0:216deg; --d:1.8s"></span>
  <span class="nuda-pt2-particle-vortex__bit" style="--a0:252deg; --d:2.1s"></span>
  <span class="nuda-pt2-particle-vortex__bit" style="--a0:288deg; --d:2.4s"></span>
  <span class="nuda-pt2-particle-vortex__bit" style="--a0:324deg; --d:2.7s"></span>
</div>

.nuda-pt2-particle-vortex {
  position: relative;
  width: 100%;
  max-width: 220px;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 8px;
  background: radial-gradient(circle at center,rgba(228,255,84,.08),transparent 70%),#0a0a0a;
}

.nuda-pt2-particle-vortex__eye {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #e4ff54;
  box-shadow: 0 0 10px rgba(228,255,84,.8);
  animation: _nuda-pt2particlevortexeye 2s ease-in-out infinite;
}

.nuda-pt2-particle-vortex__bit {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #fafafa;
  left: 50%;
  top: 50%;
  margin: -2.5px 0 0 -2.5px;
  box-shadow: 0 0 4px rgba(228,255,84,.6);
  opacity: 0;
  animation: _nuda-pt2particlevortexspiral 3s cubic-bezier(.5,0,.7,.4) var(--d) infinite;
}

@keyframes _nuda-pt2particlevortexspiral {
  0% {
    transform: rotate(var(--a0)) translateX(70px) scale(1);
    opacity: 0;
  }
  12% {
    opacity: 1;
  }
  90% {
    opacity: .8;
  }
  100% {
    transform: rotate(calc(var(--a0) + 620deg)) translateX(2px) scale(.2);
    opacity: 0;
  }
}

@keyframes _nuda-pt2particlevortexeye {
  0%,100% {
    transform: scale(.8);
  }
  50% {
    transform: scale(1.25);
  }
}

@media (prefers-reduced-motion:reduce) {
  .nuda-pt2-particle-vortex__bit,.nuda-pt2-particle-vortex__eye {
    animation: none !important;
  }
  .nuda-pt2-particle-vortex__bit {
    opacity: .5;
    transform: rotate(var(--a0)) translateX(40px) scale(.6);
  }
}