From bdd68cc2933bb50f05c85e1ac34c5570607b572a Mon Sep 17 00:00:00 2001
From: Alexander Bocken <alexander@bocken.org>
Date: Tue, 3 Feb 2026 08:00:57 +0100
Subject: [PATCH] streak: replace burst flame with rising particle effect

Rework the burst mode in FireEffect to use 24 data-driven particles
instead of the old scale-and-pop flame. Each particle has unique
position, size, delay, and duration for an organic rising effect.
Latch burst state in StreakAura so the animation plays its full
duration regardless of when the parent resets the prop.
---
 src/lib/components/FireEffect.svelte | 90 ++++++++++++++++++++++------
 src/lib/components/StreakAura.svelte | 14 ++++-
 2 files changed, 85 insertions(+), 19 deletions(-)

diff --git a/src/lib/components/FireEffect.svelte b/src/lib/components/FireEffect.svelte
index 492857eb..90934b00 100644
--- a/src/lib/components/FireEffect.svelte
+++ b/src/lib/components/FireEffect.svelte
@@ -6,9 +6,51 @@
 	}
 
 	let { holy = false, burst = false }: Props = $props();
+
+	const burstParticles = [
+		{ x: 10, y: 0,  size: 8,  delay: 0,    dur: 1.6 },
+		{ x: 25, y: 5,  size: 10, delay: 0.05, dur: 1.8 },
+		{ x: 40, y: 10, size: 12, delay: 0.02, dur: 2.0 },
+		{ x: 55, y: 3,  size: 7,  delay: 0.1,  dur: 1.7 },
+		{ x: 70, y: 8,  size: 9,  delay: 0.08, dur: 1.9 },
+		{ x: 85, y: 2,  size: 11, delay: 0.12, dur: 1.6 },
+		{ x: 15, y: 15, size: 6,  delay: 0.15, dur: 1.5 },
+		{ x: 35, y: 20, size: 10, delay: 0.18, dur: 1.8 },
+		{ x: 50, y: 12, size: 8,  delay: 0.07, dur: 2.0 },
+		{ x: 65, y: 18, size: 7,  delay: 0.22, dur: 1.7 },
+		{ x: 80, y: 25, size: 9,  delay: 0.1,  dur: 1.9 },
+		{ x: 20, y: 30, size: 11, delay: 0.25, dur: 1.6 },
+		{ x: 45, y: 22, size: 6,  delay: 0.03, dur: 1.8 },
+		{ x: 60, y: 28, size: 10, delay: 0.2,  dur: 2.0 },
+		{ x: 75, y: 15, size: 8,  delay: 0.14, dur: 1.5 },
+		{ x: 30, y: 35, size: 12, delay: 0.28, dur: 1.7 },
+		{ x: 5,  y: 10, size: 7,  delay: 0.06, dur: 1.9 },
+		{ x: 90, y: 20, size: 9,  delay: 0.16, dur: 1.6 },
+		{ x: 48, y: 32, size: 8,  delay: 0.3,  dur: 2.0 },
+		{ x: 22, y: 8,  size: 10, delay: 0.11, dur: 1.8 },
+		{ x: 68, y: 35, size: 6,  delay: 0.23, dur: 1.5 },
+		{ x: 38, y: 5,  size: 11, delay: 0.04, dur: 1.7 },
+		{ x: 82, y: 30, size: 7,  delay: 0.26, dur: 1.9 },
+		{ x: 52, y: 18, size: 9,  delay: 0.09, dur: 1.6 },
+	];
 </script>
 
-<div class="fire" class:burst class:holy-fire={holy}>
+{#if burst}
+<div class="burst-particles" class:holy-fire={holy}>
+	{#each burstParticles as p}
+		<div
+			class="bp"
+			style:left="{p.x}%"
+			style:bottom="{p.y}%"
+			style:width="{p.size}px"
+			style:height="{p.size}px"
+			style:animation-delay="{p.delay}s"
+			style:animation-duration="{p.dur}s"
+		></div>
+	{/each}
+</div>
+{:else}
+<div class="fire" class:holy-fire={holy}>
 	<div class="fire-left">
 		<div class="main-fire"></div>
 		<div class="particle-fire"></div>
@@ -28,6 +70,7 @@
 		<div class="main-fire"></div>
 	</div>
 </div>
+{/if}
 
 <style>
 /* =====================
@@ -186,35 +229,46 @@
 }
 
 /* =====================
-   BURST ANIMATION
+   BURST – particles only
 ===================== */
-.fire.burst {
-	animation: flame-burst 600ms ease-out forwards;
+.burst-particles {
+	position: absolute;
+	bottom: 0;
+	left: 50%;
+	transform: translateX(-50%);
+	width: 60px;
+	height: 80px;
+	pointer-events: none;
+	z-index: 6;
 }
 
-.fire.burst .particle-fire {
-	animation: particleBurst 600ms ease-out forwards;
+.burst-particles .bp {
+	position: absolute;
+	background-color: var(--nord13);
+	filter: drop-shadow(0 0 4px var(--nord12));
+	border-radius: 50%;
+	opacity: 0;
+	animation: burstParticleUp 2s ease-out forwards;
 }
 
-@keyframes flame-burst {
+.burst-particles.holy-fire .bp {
+	background-color: #eaf6ff;
+	filter: drop-shadow(0 0 12px rgba(180,220,255,.9));
+}
+
+@keyframes burstParticleUp {
 	0% {
-		transform: translateX(-50%) scale(0.1) translateY(0%);
+		transform: translateY(0) scale(1);
 		opacity: 0;
 	}
-	30% {
+	10% {
 		opacity: 1;
 	}
-	100% {
-		transform: translateX(-50%) scale(2) translateY(-10%);
-		opacity: 0;
+	60% {
+		opacity: 0.8;
 	}
-}
-
-@keyframes particleBurst {
-	0% { opacity: 0; }
-	30% { opacity: 1; }
 	100% {
-		transform: translateY(-120px) scale(0.3);
+		transform: translateY(-80px) scale(0.3);
 		opacity: 0;
 	}
 }
diff --git a/src/lib/components/StreakAura.svelte b/src/lib/components/StreakAura.svelte
index 10cd5194..adeac5e1 100644
--- a/src/lib/components/StreakAura.svelte
+++ b/src/lib/components/StreakAura.svelte
@@ -8,6 +8,18 @@
 
 	let { value = 0, burst = false }: Props = $props();
 
+	// Latch burst so the FireEffect stays mounted for the full animation
+	let showBurst = $state(false);
+	let burstTimer: ReturnType<typeof setTimeout> | undefined;
+
+	$effect(() => {
+		if (burst) {
+			clearTimeout(burstTimer);
+			showBurst = true;
+			burstTimer = setTimeout(() => showBurst = false, 2000);
+		}
+	});
+
 	const phase = $derived(
 		value >= 365 ? 6 :
 		value >= 180 ? 5 :
@@ -45,7 +57,7 @@
 		<FireEffect holy={phase>=4} />
 	{/if}
 
-	{#if burst}
+	{#if showBurst}
 		<FireEffect holy={phase>=4} burst />
 	{/if}