JSFiddle - React, Tailwind, and code Playground

HTML

<img id="star"...

CSS

body {
    background-color:#006699;
}

canvas {
    margin:10px;
    outline:1px solid #004e75;
}

#name,
#star{
    display:none;
}

JavaScript

var SPRITE_WIDTH = 64,
    SPRITE_HEIGHT = 64,
    SPRITE_FRAMES = 6 -1,
    AMOUNT = 10,
    SPEED = 100, //ms
    _p = [],
    _ctx = (document.getElementById('slut')).getContext('2d'),
    _star = document.getElementById('star'),
    _name = document.getElementById('name');

function clear() {

    _ctx.fillStyle = '#006699';
    _ctx.fillRect(0, 0, _ctx.canvas.width, _ctx.canvas.height);
    
    _ctx.drawImage(_name, (_ctx.canvas.width - _name.width) / 2, (_ctx.canvas.height- _name.height) / 2 - 20);
}

function createGrid() {
    
}

function createParticles() {

    for(var i = 0; i < AMOUNT; i++) {
        
        _p.push({
            "i":Math.floor(Math.random() * SPRITE_FRAMES),
            "dir": 1,
            "life":0,
            "x":Math.round(Math.random() * _ctx.canvas.width - 60) + 30,
            "y":Math.round(Math.random() * _ctx.canvas.height - 60) + 30
        });
    }
}

function animate() {

    clear();
    
    for(var i = 0; i < _p.length; i++) {

        //deathstar? krkr
        if((_p[i].i >= SPRITE_FRAMES) || (_p[i].i == 0)) {
            _p[i].dir *= -1;
            _p[i].life++;
            
            if(_p[i].life >= 2) {
                
                _p[i].x = Math.round(Math.random() * _ctx.canvas.width - 60) + 30;
                _p[i].y = Math.round(Math.random() * _ctx.canvas.height - 60) + 30;
                _p[i].life = 0;    
            }
        }

        _p[i].i += _p[i].dir;
                
        draw(_p[i].x, _p[i].y, _p[i].i);
    }
}

function draw(x, y, index) {
    
    _ctx.drawImage(star, index * SPRITE_WIDTH, 0, SPRITE_WIDTH, SPRITE_HEIGHT, x, y, SPRITE_WIDTH, SPRITE_HEIGHT );
}
    
createParticles();
setInterval(animate, SPEED);