<canvas id="fireworksCanvas"></canvas>

<style>
#fireworksCanvas {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
pointer-events: none; /* 👈 allows clicking through */
z-index: 9999; /* 👈 stays on top */
}
</style>
<script>
const canvas = document.getElementById('fireworksCanvas');
const ctx = canvas.getContext('2d');

function resizeCanvas() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}
window.addEventListener('resize', resizeCanvas);
resizeCanvas();

const fireworks = [];
const particles = [];

class Firework {
constructor(x) {
this.x = x;
this.y = canvas.height;
this.targetY = Math.random() * canvas.height * 0.4 + canvas.height * 0.1;
this.speed = Math.random() * 4 + 4;
this.hue = Math.random() * 360;
}
update() {
this.y -= this.speed;
if (this.y <= this.targetY) {
explode(this.x, this.y, this.hue);
return false;
}
return true;
}
draw() {
ctx.fillStyle = `hsl(${this.hue}, 100%, 60%)`;
ctx.beginPath();
ctx.arc(this.x, this.y, 3, 0, Math.PI
<script>
const canvas = document.getElementById('fireworksCanvas');
const ctx = canvas.getContext('2d');

function resizeCanvas() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}
window.addEventListener('resize', resizeCanvas);
resizeCanvas();

const fireworks = [];
const particles = [];

class Firework {
constructor(x) {
this.x = x;
this.y = canvas.height;
this.targetY = Math.random() * canvas.height * 0.4 + canvas.height * 0.1;
this.speed = Math.random() * 4 + 4;
this.hue = Math.random() * 360;
}
update() {
this.y -= this.speed;
if (this.y <= this.targetY) {
explode(this.x, this.y, this.hue);
return false;
}
return true;
}
draw() {
ctx.fillStyle = `hsl(${this.hue}, 100%, 60%)`;
ctx.beginPath();
ctx.arc(this.x, this.y, 3, 0, Math.PI * 2);
ctx.fill();
}
}

class Particle {
constructor(x, y, hue) {
this.x = x;
this.y = y;
const angle = Math.random() * Math.PI * 2;
const speed = Math.random() * 5 + 1;
this.vx = Math.cos(angle) * speed;
this.vy = Math.sin(angle) * speed;
this.alpha = 1;
this.hue = hue;
}
update() {
this.x += this.vx;
this.y += this.vy;
this.vy += 0.04;
this.alpha -= 0.015;
return this.alpha > 0;
}
draw() {
ctx.fillStyle = `hsla(${this.hue}, 100%, 60%, ${this.alpha})`;
ctx.beginPath();
ctx.arc(this.x, this.y, 2, 0, Math.PI * 2);
ctx.fill();
}
}

function explode(x, y, hue) {
for (let i = 0; i < 80; i++) {
particles.push(new Particle(x, y, hue));
}
}

function animate() {
// transparent fade for trails
ctx.clearRect(0, 0, canvas.width, canvas.height);

if (Math.random() < 0.05) {
fireworks.push(new Firework(Math.random() * canvas.width));
}

for (let i = fireworks.length - 1; i >= 0; i--) {
if (!fireworks[i].update()) fireworks.splice(i, 1);
}

for (let i = particles.length - 1; i >= 0; i--) {
if (!particles[i].update()) particles.splice(i, 1);
}

fireworks.forEach(f => f.draw());
particles.forEach(p => p.draw());

requestAnimationFrame(animate);
}

animate();
</script>

components/fireworks-animation.js

@@ -0,0 +1,139 @@
+class FireworksAnimation extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+          position: fixed;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+          pointer-events: none;
+          z-index: 9997;
+        }
+        canvas {
+          display: block;
+          background: transparent;
+        }
+      </style>
+      <canvas id="fireworks"></canvas>
+    `;
+
+    const canvas = this.shadowRoot.getElementById('fireworks');
+    const ctx = canvas.getContext('2d');
+
+    function resize() {
+      canvas.width = window.innerWidth;
+      canvas.height = window.innerHeight;
+    }
+    resize();
+    window.addEventListener('resize', resize);
+
+    let rockets = [];
+    let particles = [];
+    let lastLaunch = Date.now();
+
+    class Rocket {
+      constructor() {
+        this.x = Math.random() * canvas.width;
+        this.y = canvas.height;
+        this.vy = -8 - Math.random() * 3;
+        this.exploded = false;
+        this.color = `hsl(${Math.random() * 60 + 0}, 100%, 50%)`;
+      }
+    }
+
+    class Particle {
+      constructor(x, y, color) {
+        this.x = x;
+        this.y = y;
+        const angle = Math.random() * Math.PI * 2;
+        const speed = Math.random() * 5 + 3;
+        this.vx = Math.cos(angle) * speed;
+        this.vy = Math.sin(angle) * speed;
+        this.life = 120;
+        this.alpha = 1;
+        this.color = color;
+      }
+
+      update() {
+        this.x += this.vx;
+        this.y += this.vy;
+        this.vy += 0.04; // gravity
+        this.life--;
+        this.alpha = this.life / 120;
+      }
+
+      draw(ctx) {
+        ctx.beginPath();
+        ctx.arc(this.x, this.y, 2, 0, Math.PI * 2);
+        ctx.fillStyle = `${this.color.replace(')', `, ${this.alpha})`).replace('hsl', 'hsla')}`;
+        ctx.shadowBlur = 10;
+        ctx.shadowColor = this.color;
+        ctx.fill();
+      }
+    }
+
+    function explode(x, y, color) {
+      const count = 180;
+      for (let i = 0; i < count; i++) {
+        const angle = (Math.PI * 2) * (i / count);
+        const speed = Math.random() * 5 + 3;
+        particles.push(new Particle(x, y, color));
+      }
+    }
+
+    function launchRocket() {
+      rockets.push(new Rocket());
+      lastLaunch = Date.now();
+    }
+
+    function animate() {
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+      // Launch new rocket randomly
+      if (Date.now() - lastLaunch > 2000 + Math.random() * 3000) {
+        launchRocket();
+      }
+
+      // Update rockets
+      rockets.forEach((rocket, i) => {
+        rocket.y += rocket.vy;
+
+        // Draw rocket trail
+        ctx.beginPath();
+        ctx.moveTo(rocket.x, rocket.y + 30);
+        ctx.lineTo(rocket.x, rocket.y);
+        ctx.strokeStyle = "rgba(255,255,255,0.8)";
+        ctx.lineWidth = 2;
+        ctx.stroke();
+
+        // Check for explosion
+        if (rocket.y < canvas.height * (0.3 + Math.random() * 0.3)) {
+          explode(rocket.x, rocket.y, rocket.color);
+          rockets.splice(i, 1);
+        }
+      });
+
+      // Update particles
+      particles.forEach((p, i) => {
+        p.update();
+        p.draw(ctx);
+        if (p.life <= 0) particles.splice(i, 1);
+      });
+
+      requestAnimationFrame(animate);
+    }
+    
+    // Initial launch and set timeout to remove element
+    setTimeout(launchRocket, 500);
+    animate();
+    setTimeout(() => {
+        this.remove();
+    }, 6000);
+  }
+}
+
+customElements.define('fireworks-animation', FireworksAnimation);

index.html

@@ -397,14 +397,16 @@ Get Started Now
     <script src="components/fireworks.js"></script>
     <script src="components/amplify-2026.js"></script>
     <script src="components/newsletter.js"></script>
+    <script src="components/fireworks-animation.js"></script>
 <!-- Add i18next libraries -->
 <script src="https://unpkg.com/i18next/dist/umd/i18next.min.js"></script>
     <script src="https://unpkg.com/i18next-browser-languagedetector/i18nextBrowserLanguageDetector.js"></script>
     <script src="https://unpkg.com/i18next-http-backend/i18nextHttpBackend.js"></script>
-
+    <fireworks-animation></fireworks-animation>
+    
     <script>
         // Initialize i18next with translations
-        i18next
+i18next
             .use(i18nextBrowserLanguageDetector)
             .init({
                 fallbackLng: 'en',