https://huds0n.us/confetti-banner.js

1(function () {
2  var canvas = document.getElementById('confetti-canvas');
3  var banner = document.getElementById('users-banner');
4  if (!canvas || !banner) return;
5
6  var ctx = canvas.getContext('2d');
7  var colors = ['#f2f2f4', '#d4d4d8', '#a1a1aa', '#71717a', '#ffffff'];
8  var particles = [];
9  var w, h;
10
11  function resize() {
12    w = canvas.width = banner.clientWidth;
13    h = canvas.height = banner.clientHeight;
14  }
15
16  function makeParticle() {
17    return {
18      x: Math.random() * w,
19      y: -10 - Math.random() * h,
20      size: 3 + Math.random() * 4,
21      speedY: 1.5 + Math.random() * 2.5,
22      speedX: (Math.random() - 0.5) * 1.5,
23      rotation: Math.random() * 360,
24      rotationSpeed: (Math.random() - 0.5) * 10,
25      color: colors[Math.floor(Math.random() * colors.length)],
26    };
27  }
28
29  resize();
30  window.addEventListener('resize', resize);
31
32  var count = 60;
33  for (var i = 0; i < count; i++) particles.push(makeParticle());
34
35  var start = Date.now();
36  var duration = 4000;
37
38  function tick() {
39    ctx.clearRect(0, 0, w, h);
40    var elapsed = Date.now() - start;
41
42    particles.forEach(function (p) {
43      p.y += p.speedY;
44      p.x += p.speedX;
45      p.rotation += p.rotationSpeed;
46
47      if (p.y > h + 10) {
48        p.y = -10;
49        p.x = Math.random() * w;
50      }
51
52      ctx.save();
53      ctx.translate(p.x, p.y);
54      ctx.rotate((p.rotation * Math.PI) / 180);
55      ctx.fillStyle = p.color;
56      ctx.fillRect(-p.size / 2, -p.size / 4, p.size, p.size / 2);
57      ctx.restore();
58    });
59
60    if (elapsed < duration) {
61      requestAnimationFrame(tick);
62    } else {
63      ctx.clearRect(0, 0, w, h);
64    }
65  }
66
67  requestAnimationFrame(tick);
68})();