const canvas = document.getElementById('mist');
const ctx = canvas.getContext('2d');

window.addEventListener('resize', () => {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight * 0.8;

  ctx.fillStyle = 'white';
  ctx.font = `${canvas.height}px Arial`;
  ctx.fillText('Hi', 10, canvas.height);


  // Make everything faded with a gradient

  ctx.globalCompositeOperation = 'destination-in';

  const gradient = ctx.createLinearGradient(0, 0, 0, canvas.height);
  gradient.addColorStop(0, 'rgba(255, 255, 255, 0)');
  gradient.addColorStop(1, 'rgba(255, 255, 255, 1)');
  ctx.fillStyle = gradient;
  ctx.fillRect(0, 0, canvas.width, canvas.height);
});

window.addEventListener('load', () => window.dispatchEvent(new Event('resize')));

@@ -75,24 +75,686 @@
 ext('2d');%0A%0A
+class Particle %7B%0A  constructor(renderer, x, y, vx, vy) %7B%0A    this.renderer = renderer;%0A    this.x = x;     // X position on canvas%0A    this.y = y;    // Y position on canvas%0A    this.vx = vx;  // X velocity%0A    this.vy = vy;  // Y velocity%0A  %7D%0A%0A  step() %7B%0A    // Bounce particles when they hit the edges of the canvas%0A    if (this.x %3C 0 %7C%7C this.x %3E= this.renderer.width) %7B%0A      this.bounceX();%0A    %7D%0A    if (this.y %3C 0 %7C%7C this.y %3E= this.renderer.height) %7B%0A      this.bounceY();%0A    %7D%0A%0A    this.x += this.vx;%0A    this.y += this.vy;%0A  %7D%0A%0A  bounceX() %7B%0A    this.vx = -1 * this.vx;%0A  %7D%0A%0A  bounceY() %7B%0A    this.vy = -1 * this.vy;%0A  %7D%0A%7D%0A%0Aclass ParticleRenderer %7B%0A%0A%7D%0A%0A
 window.addEv

Create particle class