orb.scss

// best in chrome
$total: 400; // total particles
$orb-size: 200px;
$particle-size: 4px;
$time: 15s;
$base-hue: 202; // change for diff colors (180 is nice)

body,
html {
    height: 100%;
}

body {
    background: black;
    // overflow: hidden; // no scrollbars.. 
}

.wrap {
    position       : relative;
    top            : 50%;
    left           : 50%;

    width          : 0;
    height         : 0;
    // perspective: 1000px;

    animation      : rotate $time infinite linear; // rotate orb

    transform-style: preserve-3d;
}

@keyframes rotate {
    100% {
        transform: rotateY(360deg) rotateX(360deg);
    }
}

.c {
    position     : absolute;

    width        : $particle-size;
    height       : $particle-size;

    opacity      : 0;
    border-radius: 50%;

    will-change  : transform;
}

@for $i from 1 through $total {
    $z  : (random(360) * 1deg); // random angle to rotateZ
    $y  : (random(360) * 1deg); // random to rotateX
    $hue: ((10/$total * $i) + $base-hue); // set hue

    .c:nth-child(#{$i}) {
        // grab the nth particle
        animation       : orbit#{$i} $time infinite;
        // animation-delay: ($i * .0s); 

        background-color: hsla($hue, 100%, 50%, 1);
    }

    @keyframes orbit#{$i} {
        0% {
            transform: rotateZ(-$z) rotateY($y) translateX($orb-size) rotateZ($z); // form orb

            opacity  : 1; // fade in
        }

        100% {
            transform: rotateZ(-$z) rotateY($y) translateX($orb-size) rotateZ($z); // hold orb state 30-80

            opacity  : 1; // hold opacity 20-80
        }

        100% {
            // transform: rotateZ(-$z) rotateY($y) translateX( ($orb-size * 3) ) rotateZ($z); // translateX * 3
        }
    }
}