JSFiddle - React, Tailwind, and code Playground

by BurpmanJunior

CSS

.debris {
    background-color: rgba(180, 230, 255, 1);
    height: 16px;
    position: fixed;
    width: 16px;
    border-radius: 8px;
    -webkit-animation-name: particle;
    -webkit-animation-duration: 500ms;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-fill-mode: forwards;
    box-shadow: 0 0 16px 8px rgba(180, 230, 255, 1);
    user-select: none;
}

html,body {
    background-color: #464b54;
    overflow: hidden;
    cursor: crosshair;
}

@-webkit-keyframes particle{
    0%{
        transform: scaleX(0.3) scaleY(0.3);
        opacity: 0.5;
    }
    100%{
        transform: scaleX(1) scaleY(1);
        opacity: 0;
    }
}

JavaScript

/**
 * SMOKE PARTICLES
 */
var particleCount = 20;

function Debris(center, angle) {
    var element = document.createElement('div');
    var velocityX = Math.cos((angle * Math.random()) * Math.PI / 180);
    var velocityY = Math.sin((angle * Math.random()) * Math.PI / 180);
    var currentX = center.x;
    var currentY = center.y;
    var animationId;
    var parentElem;
    var runTime = 0;
    var dropFactor = -10;
    
    element.className = 'debris';
    element.style.left = currentX.toString() + 'px';
    element.style.top = currentY.toString() + 'px';
    
    dropFactor = 0.01 * dropFactor;
    
    this.appendTo = function(parentElement) {
        parentElem = parentElement;
        parentElement.appendChild(element);
    };
    
    this.remove = function() {
        if(element.parentNode) {
            element.parentNode.removeChild(element);
        }
    };
    
    this.stopAnimating = function() {
        clearTimeout(animationId);
    };
    
    var _this = this;
    
    animationId = setInterval(function() {
        runTime += 16;
        
        currentX += velocityX * 3;
        currentY += velocityY * 5;
        
        velocityX += 0.05 - 0.1 * Math.random();
        velocityY += (0.05 + dropFactor) - 0.1 * Math.random();
        
        element.style.left = currentX.toString() + 'px';
        element.style.top = currentY.toString() + 'px';
        
        if(
            currentX > window.innerWidth + 10 ||
            currentY > window.innerHeight + 10 ||
            currentY < -10 ||
            currentX < -10 ||
            runTime > 500
        ){
            parentElem.removeChild(element);
            _this.stopAnimating();
        }
        
    }, 16);
}


function throttle(fn, threshhold, scope) {
    // Define default if not;
    threshhold || (threshhold = 250);
    // Setup vars
    var last,
    deferTimer;
    // Main func
    return function () {
        // Applied to
        var context = scope || this;
        // Set...