JSFiddle - React, Tailwind, and code Playground

CSS

body {
    margin: 0;
    padding: 0;
    background: url('http://www.bungie.net/img/theme/destiny/bgs/event/bg_iron_banner_slice1.jpg') 50% 0 no-repeat;
    background: black;
}

canvas
{
    background: transparent;
}

JavaScript

// Creating the Canvas
var canvas = document.createElement("canvas"),
	c = canvas.getContext("2d"),
	particles = {},
	particleIndex = 0,
	particleNum = Math.floor(window.innerWidth / 400);

canvas.width = document.documentElement.clientWidth;
canvas.height = document.documentElement.clientHeight - 20;
canvas.id = "motion";
document.body.appendChild(canvas);
// Finished Creating Canvas

// Setting color which is just one big square
// Finished Color
var y_fourth = Math.floor(canvas.height / 4);
var y_second_fourth = Math.floor(y_fourth * 2);

function Particle() {
	var random_x = Math.floor(Math.random() * canvas.width) + 100;
	var random_y = y_fourth * 4;
	this.x = random_x;
	this.y = random_y;
	this.vx = Math.random() * 2 - 1;
	this.vy = Math.random() * -10;
	this.gravity = 0;
	particleIndex++;
	particles[particleIndex] = this;
	this.id = particleIndex;
	this.size = Math.random() * 2;
	this.opacity = Math.random();
	this.oldPos = [];
    this.fadeTime = Math.random() * 1000 + 600;
    this.timeCreated = Date.now();
    this.lineDistance = 3;
    
    var bigSparkChance = Math.random() * 100 < 3;
    if(bigSparkChance && false){
        this.fadeTime = 300;
        this.lineDistance = 20;
        this.vy = -20;
    }
    
    for(var i = 0; i < this.lineDistance; i++){
        this.oldPos.push([this.x, this.y]);
    }
}

Particle.prototype.draw = function() {
    var now = Date.now();
    var timeDiff = now - this.timeCreated;
    
	this.x += this.vx;
	this.y += this.vy;
	this.vy += this.gravity;

	var yPercentage = this.y / canvas.height;
    var timePercentage = 1 - (timeDiff / this.fadeTime);
    
	if (this.x > canvas.width || this.y > canvas.height || timePercentage <= 0) {
		delete particles[this.id];
	}

	var startRed = 255;
	var endRed = 255;
	var startYellow = (Math.random() * 50) + 192;
	var endYellow = 80;
	var startBlue = 0;
	var endBlue = 0;

	var red = Math.floor(((startRed - endRed) * timePercentage) + endRed);
	var yellow = Math.floor(((startYellow...