JSFiddle - React, Tailwind, and code Playground

by BurpmanJunior

HTML

<canvas id="snow-canvas"></canvas>

SCSS

html,
body{
    background-color: #6b427f;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

JavaScript

/**
 * PARTICLE DROP
 */

var snowBackground = {
    W: window.innerWidth,
    H: window.innerHeight,
    mp: 25,
    particles: [],
    ctx: null,
    pushOffsetX: 0.5,
    defaultSpeedY: 1,
    yCont: false,
    init: function (e) {
        snowBackground.speedY = snowBackground.defaultSpeedY;
        canvas = document.getElementById(e);
        snowBackground.ctx = canvas.getContext("2d");
        canvas.width = snowBackground.W;
        canvas.height = snowBackground.H;
        for (var i = 0; i < snowBackground.mp; i++) {
            var xtmp = Math.random() * snowBackground.W;
            var rtmp = Math.random() * 4 + 1;
            snowBackground.particles.push({
                ox: xtmp, //original x-coordinate
                x: xtmp, //x-coordinate
                //y: Math.random()*snowBackground.H, //y-coordinate
                y: Math.random() * snowBackground.H + snowBackground.H, //y-coordinate
                r: rtmp, //radius
                d: rtmp //density
            });
        }
        window.addEventListener('mousemove', function (e) {
            snowBackground.pushOffsetX = e.offsetX / snowBackground.W;
        });
        window.addEventListener('resize', function (e) {
            snowBackground.W = window.innerWidth;
            snowBackground.H = window.innerHeight;
            canvas.height = snowBackground.H;
            canvas.width = snowBackground.W;
        });
        canvas.addEventListener('mouseup', function (e) {
            e.preventDefault();
            if (!snowBackground.boosting) {
                snowBackground.boostOut(30);
            } else {
                snowBackground.resetBoost();
            }
        });
        var loopSnow = window.setInterval(snowBackground.draw, 33);
    },
    draw: function () {
        snowBackground.ctx.clearRect(0, 0, snowBackground.W, snowBackground.H);
        snowBackground.ctx.fillStyle = "rgba(137, 104, 153, 1)";
        snowBackground.ctx.beginPath();
        for (var i...