From e4402c08d5aad2eca732269b93fa36d4540c4a3e Mon Sep 17 00:00:00 2001
From: Frank Tovar <mail@franktovar.de>
Date: Tue, 3 Feb 2026 01:42:01 +0100
Subject: [PATCH] Confetti fx

---
 wwwroot/app.js     | 35 +++++++++++++++++++----------------
 wwwroot/styles.css |  2 +-
 2 files changed, 20 insertions(+), 17 deletions(-)

diff --git a/wwwroot/app.js b/wwwroot/app.js
index cd018f7..a6ecac9 100644
--- a/wwwroot/app.js
+++ b/wwwroot/app.js
@@ -840,9 +840,9 @@ function setupCardVisualHover(el, url) {
 
 function setupBackgroundPan(config = {}) {
     const root = document.documentElement;
-    const maxOffset = config.maxOffsetPx ?? 10;
+    const maxOffset = config.maxOffsetPx ?? 5;
     const ease = config.ease ?? 0.03;
-    const scaleFactor = config.scaleFactor ?? 1.05;
+    const scaleFactor = config.scaleFactor ?? 1.02;
     if (scaleFactor) {
         root.style.setProperty("--bg-scale", scaleFactor);
     }
@@ -914,16 +914,17 @@ function triggerCelebration(button) {
 
 function spawnConfetti(x, y, count) {
     for (let i = 0; i < count; i++) {
+        const speed = 0.5;
         fxParticles.push({
-            x,
-            y,
-            vx: (Math.random() - 0.5) * 6,
-            vy: Math.random() * -6 - 2,
+            x: x + (Math.random() - 0.5) * 20,
+            y: y + (Math.random() - 0.5) * 200,
+            vx: (Math.random() - 0.5) * 10 * speed,
+            vy: (Math.random() * -6 - 2) * speed,
             size: 6 + Math.random() * 4,
-            life: 60 + Math.random() * 20,
+            life: 600 + Math.random() * 200,
             color: randomColor(),
             type: "confetti",
-            wobble: Math.random() * Math.PI * 2,
+            wobble: Math.random(),
         });
     }
 }
@@ -931,14 +932,14 @@ function spawnConfetti(x, y, count) {
 function spawnFirework(x, y, count) {
     for (let i = 0; i < count; i++) {
         const angle = (Math.PI * 2 * i) / count + Math.random() * 0.3;
-        const speed = 3 + Math.random() * 3;
+        const speed = (3 + Math.random() * 3) * 0.1;
         fxParticles.push({
             x,
             y,
             vx: Math.cos(angle) * speed,
-            vy: Math.sin(angle) * speed,
+            vy: (Math.sin(angle) - 1) * speed,
             size: 4 + Math.random() * 3,
-            life: 50 + Math.random() * 20,
+            life: 500 + Math.random() * 200,
             color: randomColor(),
             type: "spark",
         });
@@ -949,16 +950,18 @@ function fxStep() {
     if (!fxCtx || !fxCanvas) return;
     fxCtx.clearRect(0, 0, fxCanvas.width, fxCanvas.height);
     fxParticles = fxParticles.filter((p) => p.life > 0);
+    let i = 0;
     for (const p of fxParticles) {
+        i += 1;
         if (p.type === "confetti") {
-            p.vy += 0.18;
-            p.vx *= 0.99;
+            p.vy += 0.018;
+            p.vx *= 0.999;
             p.wobble += 0.2;
-            p.x += p.vx + Math.cos(p.wobble) * 0.8;
+            p.x += p.vx + Math.cos(p.wobble + i) * 0.5;
             p.y += p.vy;
         } else {
-            p.vy += 0.08;
-            p.vx *= 0.995;
+            p.vy += 0.008;
+            p.vx *= 0.9995;
             p.x += p.vx;
             p.y += p.vy;
         }
diff --git a/wwwroot/styles.css b/wwwroot/styles.css
index 5d7d586..36c9f89 100644
--- a/wwwroot/styles.css
+++ b/wwwroot/styles.css
@@ -7,7 +7,7 @@
         -apple-system,
         sans-serif;
     color: #2c1c0d;
-    --bg-scale: 1.12;
+    --bg-scale: 1.0;
     --bg-x: 0px;
     --bg-y: 0px;
 }