Untitled

const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
document.body.appendChild(canvas);
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

const particles = [];
const colors = ["#ff9f1c", "#ff6b6b", "#ff3b3b", "#ff1654", "#ff4500"];

// Particle class
class Particle {
  constructor(x, y) {
    this.x = x;
    this.y = y;
    this.size = Math.random() * 5 + 2;
    this.speedY = Math.random() * -3 - 1;
    this.speedX = (Math.random() - 0.5) * 2;
    this.color = colors[Math.floor(Math.random() * colors.length)];
    this.opacity = 1;
    this.fade = Math.random() * 0.02 + 0.005;
  }

  update() {
    this.y += this.speedY;
    this.x += this.speedX;
    this.size *= 0.98;
    this.opacity -= this.fade;
    if (this.opacity < 0) this.opacity = 0;
  }

  draw() {
    ctx.globalAlpha = this.opacity;
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
    ctx.fillStyle = this.color;
    ctx.fill();
    ctx.globalAlpha = 1;
  }
}

function createParticles() {
  const sourceX = canvas.width / 2;
  const sourceY = canvas.height / 2 + 200;
  for (let i = 0; i < 5; i++) {
    particles.push(new Particle(sourceX + Math.random() * 10 - 5, sourceY));
  }
}

function handleParticles() {
  for (let i = 0; i < particles.length; i++) {
    particles[i].update();
    particles[i].draw();
    if (particles[i].size <= 0.5 || particles[i].opacity <= 0) {
      particles.splice(i, 1);
      i--;
    }
  }
}

function animate() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  createParticles();
  handleParticles();
  requestAnimationFrame(animate);
}

animate();