JSFiddle - React, Tailwind, and code Playground

HTML

<canvas></canvas>

JavaScript

var canvas = document.querySelector('canvas');
var c = canvas.getContext('2d'),
particles = {},
particleIndex = 0,
particleNum = 1;


canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

document.body.appendChild(canvas);

c.fillStyle = "black";
c.fillRect(0,0,canvas.width,canvas.height);

function Particle(){
    this.x = Math.random() * window.innerWidth;
    this.y = 0;
    this.vx = Math.random() * 0 - 0;
    this.vy = 3;
    this.gravity = 0;
    particleIndex++;
    particles[particleIndex] = this;
    this.id = particleIndex;
    this.life = 0;
    this.maxLife = Math.random() * 30 + 10;
    
}
Particle.prototype.draw = function(){
    this.x += this.vx;
    this.y += this.vy;
    this.vy += this.gravity;
    
    if (this.y >= window.innerHeight) {
        delete particles[this.id];
    }
    
    /* this.life++;
    if (this.life >= this.maxLife) {
        delete particles[this.id];
    }
    */
    
    c.fillStyle = "rgba(255,255,255,1)";
    c.fillRect(this.x, this.y, 10, 10);
};

setInterval(function(){
    c.fillStyle = "black";
 c.fillRect(0,0,canvas.width,canvas.height);
    
    for (var i = 0; i < particleNum; i++){
    new Particle();
}
    
    for (var i in particles){
        particles[i].draw();
    }
}, 15);