<style>
#wk-container {
  background: #05060a; /* dunkler Hintergrund */
  display: flex;
  justify-content: center;
  padding: 60px 0;
}
 
#wk-canvas {
  display: block;
  border-radius: 4px;
}
</style>
 
<div id="wk-container">
  <canvas id="wk-canvas" width="600" height="300"></canvas>
</div>
 
<script>
(function(){
  const canvas = document.getElementById('wk-canvas');
  const ctx = canvas.getContext('2d');
  const width = canvas.width;
  const height = canvas.height;
 
  const stickHeight = 180;
  const stickWidthTop = 6;   // obere Hälfte
  const stickWidthBottom = 3; // untere Hälfte
  const sticksX = [
    width/5,
    2*width/5,
    3*width/5,
    4*width/5
  ];
 
  const particles = [];
 
  function createParticle(stickX) {
    const angle = Math.random() * 2 * Math.PI;
    const speed = Math.random() * 2 + 1; // langsamer
    const size = Math.random() * 3 + 1.5;
    const life = Math.random() * 60 + 40;
 
    const isExplosion = Math.random() < 0.1;
    particles.push({
      x: stickX,
      y: height - stickHeight,
      vx: Math.cos(angle) * (speed * (isExplosion ? 1.5 : 1)),
      vy: Math.sin(angle) * (speed * (isExplosion ? 1.5 : 1)),
      radius: size * (isExplosion ? 2 : 1),
      life: life * (isExplosion ? 1.5 : 1),
      color: isExplosion ? `rgba(255, 255, 200, 1)` : `rgba(${200 + Math.floor(Math.random()*55)}, ${150 + Math.floor(Math.random()*60)}, 50, 1)`,
      gravity: 0.015 + Math.random()*0.03,
      decay: 0.96 + Math.random()*0.02,
      trail: []
    });
  }
 
  function updateParticles() {
    for (let i = particles.length -1; i>=0; i--) {
      const p = particles[i];
      p.trail.push({x: p.x, y: p.y});
      if(p.trail.length > 6) p.trail.shift();
      p.x += p.vx;
      p.y += p.vy;
      p.vy += p.gravity;
      p.radius *= p.decay;
      p.life--;
      if(p.life <=0 || p.radius < 0.5) particles.splice(i,1);
    }
  }
 
  function drawSticks() {
    sticksX.forEach(x => {
      // obere Hälfte
      ctx.fillStyle = '#555'; // dunkler Teil
      ctx.fillRect(x - stickWidthTop/2, height - stickHeight, stickWidthTop, stickHeight/2);
      // untere Hälfte
      ctx.fillStyle = '#bbb'; // silbergrau
      ctx.fillRect(x - stickWidthBottom/2, height - stickHeight/2, stickWidthBottom, stickHeight/2);
    });
  }
 
  function drawParticles() {
    particles.forEach(p => {
      // Schweif
      ctx.beginPath();
      for(let i=0; i<p.trail.length; i++) {
        const point = p.trail[i];
        if(i===0) ctx.moveTo(point.x, point.y);
        else ctx.lineTo(point.x, point.y);
      }
      ctx.strokeStyle = p.color.replace('1)', '0.4)');
      ctx.lineWidth = p.radius * 0.8;
      ctx.shadowBlur = 0;
      ctx.stroke();
 
      // Funke
      ctx.beginPath();
      ctx.arc(p.x, p.y, p.radius, 0, Math.PI*2);
      ctx.fillStyle = p.color;
      ctx.shadowColor = p.color;
      ctx.shadowBlur = p.radius * 4;
      ctx.fill();
    });
  }
 
  function animate() {
    ctx.clearRect(0,0,width,height);
    drawSticks();
 
    sticksX.forEach(x => {
      for(let i=0; i<4; i++) {
        if(Math.random() < 0.7) createParticle(x);
      }
    });
 
    updateParticles();
    drawParticles();
    requestAnimationFrame(animate);
  }
 
  animate();
})();
</script>