.vortex-wrap {
  font-size: 100px;
  overflow: hidden;
  perspective: 3000px;
}

$speed: 60s;
$spins: 60; // Hi, try changing this number...

.vortex {
  position: relative;
  transform: rotateX(60deg);
  transform-style: preserve-3d;
}

.ball {
  position: absolute;
  width: 1em; height: 1em;
  border-radius: 50%;
  transform-origin: bottom;
  transform-style: preserve-3d;
  background-image: radial-gradient(circle at top, hsl(var(--hue, 0), 100%, 75%), hsl(var(--hue, 0), 100%, 0%));
  animation: dot $speed var(--delay) infinite;

  @keyframes dot {
    0%   {
      transform: translate(-50%, -50%) rotateZ(var(--angle)) translateX(10em) rotateZ(calc(var(--angle) * -1)) rotateX(-60deg) scale(0);
      animation-timing-function: ease-in;
    }
    80%  {
      transform: translate(-50%, -50%) rotateZ(var(--angle)) translateX(2em)  rotateZ(calc(var(--angle) * -1)) rotateX(-60deg) scale(1);
      animation-timing-function: ease-out;
    }
    100% {
      transform: translate(-50%, -50%) rotateZ(var(--angle)) translateX(0em)  rotateZ(calc(var(--angle) * -1)) rotateX(-60deg) scale(0);
    }
  }

  @for $i from 0 to 256 {
    &:nth-child(#{$i + 1}) {
      --delay: #{$speed / -256 * $i};
      --angle: #{360deg * $spins / -256 * $i};
      --hue: #{360 / -256 * $i};
    }
  }
}