From bcf118093b16b97d0bf9756316bfa7e466d05fac Mon Sep 17 00:00:00 2001
From: Aaron Wood <aaron.wood@mac.lan>
Date: Fri, 10 Apr 2026 20:01:40 -0400
Subject: [PATCH] =?UTF-8?q?fix:=20tune=20particle=20configs=20=E2=80=94=20?=
 =?UTF-8?q?smaller=20fire,=20fast=20circles=20for=20rain,=20better=20ember?=
 =?UTF-8?q?s?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Fire: 1-5px (was 4-12, balloons), count 60-200, speed 4-10
- Rain: drop line shape (invisible in slim), use fast circles 200-600 at 15-30
  speed so motion reads as streaks
- Embers: 1.5-4px, count 20-80, speed 0.5-2 — clearly slower/dimmer than fire

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 client/src/lib/particleConfigs.ts | 54 +++++++++++++++----------------
 1 file changed, 27 insertions(+), 27 deletions(-)

diff --git a/client/src/lib/particleConfigs.ts b/client/src/lib/particleConfigs.ts
index 5094845..c9ad284 100644
--- a/client/src/lib/particleConfigs.ts
+++ b/client/src/lib/particleConfigs.ts
@@ -1,13 +1,14 @@
 import type { ISourceOptions } from "@tsparticles/engine";
 
 /**
- * Fire — intensity 0–100 → count 80–300, speed 2–8
- * Big bright particles rising upward. Emitters not used (not in slim bundle)
- * so particles respawn via outModes "out" (wrap from bottom when they exit top).
+ * Fire — intensity 0–100 → count 60–200, speed 4–10
+ * Small-to-medium orange/red/yellow particles rising upward fast.
+ * outModes "out" respawns particles at the bottom when they exit the top.
+ * Noticeably faster and brighter than embers.
  */
 export function getFireConfig(intensity: number): ISourceOptions {
-  const count = Math.round(80 + (intensity / 100) * 220);
-  const speed = 2 + (intensity / 100) * 6;
+  const count = Math.round(60 + (intensity / 100) * 140);
+  const speed = 4 + (intensity / 100) * 6;
   return {
     fullScreen: { enable: false },
     background: { opacity: 0 },
@@ -16,13 +17,13 @@ export function getFireConfig(intensity: number): ISourceOptions {
       color: { value: ["#ff2200", "#ff5500", "#ff8800", "#ffbb00", "#ffee00"] },
       shape: { type: "circle" },
       opacity: {
-        value: { min: 0.5, max: 1 },
-        animation: { enable: true, speed: 2, sync: false, startValue: "random" },
+        value: { min: 0.6, max: 1 },
+        animation: { enable: true, speed: 3, sync: false, startValue: "random" },
       },
-      size: { value: { min: 4, max: 12 } },
+      size: { value: { min: 1, max: 5 } },
       move: {
         enable: true,
-        speed: { min: speed * 0.5, max: speed },
+        speed: { min: speed * 0.6, max: speed },
         direction: "top",
         random: true,
         straight: false,
@@ -33,23 +34,22 @@ export function getFireConfig(intensity: number): ISourceOptions {
 }
 
 /**
- * Rain — intensity 0–100 → count 100–500, speed 10–25
- * Line-shaped particles (included in slim) falling straight down.
- * rotate: 10° gives a slight diagonal angle.
+ * Rain — intensity 0–100 → count 200–600, speed 15–30
+ * Fast-falling blue-white circles. At this speed the motion itself
+ * reads as rain streaks — no elongated shape needed.
  */
 export function getRainConfig(intensity: number): ISourceOptions {
-  const count = Math.round(100 + (intensity / 100) * 400);
-  const speed = 10 + (intensity / 100) * 15;
+  const count = Math.round(200 + (intensity / 100) * 400);
+  const speed = 15 + (intensity / 100) * 15;
   return {
     fullScreen: { enable: false },
     background: { opacity: 0 },
     particles: {
       number: { value: count, density: { enable: false } },
-      color: { value: "#aaccee" },
-      shape: { type: "line" },
-      opacity: { value: { min: 0.4, max: 0.8 } },
-      size: { value: { min: 10, max: 20 } },
-      rotate: { value: 10, animation: { enable: false } },
+      color: { value: "#aad4f5" },
+      shape: { type: "circle" },
+      opacity: { value: { min: 0.4, max: 0.75 } },
+      size: { value: { min: 1, max: 2.5 } },
       move: {
         enable: true,
         speed: speed,
@@ -62,13 +62,13 @@ export function getRainConfig(intensity: number): ISourceOptions {
 }
 
 /**
- * Embers — intensity 0–100 → count 30–120, speed 0.3–2
- * Small glowing dots drifting slowly upward with flickering opacity.
- * Noticeably slower and dimmer than fire to contrast clearly.
+ * Embers — intensity 0–100 → count 20–80, speed 0.5–2
+ * Slow-drifting warm amber dots with flickering opacity.
+ * Clearly slower and dimmer than fire — different mood entirely.
  */
 export function getEmbersConfig(intensity: number): ISourceOptions {
-  const count = Math.round(30 + (intensity / 100) * 90);
-  const speed = 0.3 + (intensity / 100) * 1.7;
+  const count = Math.round(20 + (intensity / 100) * 60);
+  const speed = 0.5 + (intensity / 100) * 1.5;
   return {
     fullScreen: { enable: false },
     background: { opacity: 0 },
@@ -77,10 +77,10 @@ export function getEmbersConfig(intensity: number): ISourceOptions {
       color: { value: ["#ff8800", "#ffaa00", "#ffcc44", "#ff6600"] },
       shape: { type: "circle" },
       opacity: {
-        value: { min: 0.2, max: 1 },
-        animation: { enable: true, speed: 0.7, sync: false, startValue: "random" },
+        value: { min: 0.15, max: 0.9 },
+        animation: { enable: true, speed: 0.6, sync: false, startValue: "random" },
       },
-      size: { value: { min: 2, max: 5 } },
+      size: { value: { min: 1.5, max: 4 } },
       move: {
         enable: true,
         speed: speed,