JSFiddle - React, Tailwind, and code Playground

by Marc Malignan

HTML

<div></div>

SCSS

$n = 40;
$w = 10px;
$m = 2px;
$s = ($w*$n)+($m*$n*2);
$u = 10px;
$t = .3s;

html, body {
  margin: 0;
  height: 100%;
}
body {
  background: #333;
  overflow: hidden;
  -webkit-perspective: 600;
}

div {
  position: absolute;
  top: 50%; left: 50%;
  width: $s;
  height: $s;
  margin: -$s/2 0 0 -$s/2;
  transform: rotateX(50deg) translateY(-$w*$n/5);
  transform-style: preserve-3d;
}
i {
  position: relative;
  float: left;
  width: $w;
  height: $w;
  margin: $m;
  background: #555;
  border-radius: 50%;
  transition: all $t ease-in-out;
  transform-style: preserve-3d;
}
i.up {
  background: #ddd;
  transform: translateZ($u);
}
i:before {
  content: '';
  display: block;
  width: $w;
  height: $w;
  background: #222;
  border-radius: 50%;
  opacity: 0;
  transition: all $t ease-in-out;
}
i.up:before {
  opacity: 1;
  transform: translateZ(-$u);
}

JavaScript

var nb = 1600;
var time = 50;

function timer() {
	return Math.floor(Math.random()*time) + time;
}

function down(i) {
	i.removeClass('up');
}

function up() {
	var r = Math.floor(Math.random()*nb);
  var i = $('i').eq(r);
  if(!i.hasClass('up')) {
    i.addClass('up');
    setTimeout(function() {
      down(i);
    }, timer()*100);
  }
}

function go() {
  up();
  setTimeout(go, timer());
}

function init() {
	for(var i=0; i<nb; i++) {
  	$('div').append('<i></i>');
  }
  go();
}

init();