From 649bd1928719b1a4aded574e0ba9bf17f2ef9b55 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 492857e..90934b0 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 10cd519..adeac5e 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}