feat: add tsParticles configs for fire, rain, embers

client/src/lib/particleConfigs.ts

@@ -0,0 +1,90 @@
+import type { ISourceOptions } from "@tsparticles/engine";
+
+/** Intensity 0–100 → fire particle count 20–200, speed 2–8 */
+export function getFireConfig(intensity: number): ISourceOptions {
+  const count = Math.round(20 + (intensity / 100) * 180);
+  const speed = 2 + (intensity / 100) * 6;
+  return {
+    fullScreen: { enable: false },
+    background: { opacity: 0 },
+    particles: {
+      number: { value: count, density: { enable: false } },
+      color: { value: ["#ff4400", "#ff8800", "#ffcc00", "#ff2200"] },
+      shape: { type: "circle" },
+      opacity: {
+        value: { min: 0.1, max: 0.8 },
+        animation: { enable: true, speed: 2, startValue: "max", destroy: "min" },
+      },
+      size: { value: { min: 1, max: 4 } },
+      move: {
+        enable: true,
+        speed: { min: speed * 0.5, max: speed },
+        direction: "top",
+        random: true,
+        straight: false,
+        outModes: { default: "destroy", top: "destroy" },
+      },
+      life: { duration: { sync: false, value: 3 }, count: 1 },
+    },
+    emitters: {
+      direction: "top",
+      life: { count: 0, duration: 0.1, delay: 0.1 },
+      rate: { delay: 0.05, quantity: Math.max(1, Math.round(count / 20)) },
+      size: { width: 100, height: 0 },
+      position: { x: 50, y: 100 },
+    },
+  };
+}
+
+/** Intensity 0–100 → rain particle count 50–500, speed 5–20 */
+export function getRainConfig(intensity: number): ISourceOptions {
+  const count = Math.round(50 + (intensity / 100) * 450);
+  const speed = 5 + (intensity / 100) * 15;
+  return {
+    fullScreen: { enable: false },
+    background: { opacity: 0 },
+    particles: {
+      number: { value: count, density: { enable: false } },
+      color: { value: "#7aaad8" },
+      shape: { type: "circle" },
+      opacity: { value: { min: 0.2, max: 0.45 } },
+      size: { value: { min: 0.5, max: 1.5 } },
+      move: {
+        enable: true,
+        speed: speed,
+        direction: "bottom",
+        straight: true,
+        angle: { value: 15, offset: 0 },
+        outModes: { default: "out" },
+      },
+    },
+  };
+}
+
+/** Intensity 0–100 → embers particle count 5–80, speed 0.2–1.5 */
+export function getEmbersConfig(intensity: number): ISourceOptions {
+  const count = Math.round(5 + (intensity / 100) * 75);
+  const speed = 0.2 + (intensity / 100) * 1.3;
+  return {
+    fullScreen: { enable: false },
+    background: { opacity: 0 },
+    particles: {
+      number: { value: count, density: { enable: false } },
+      color: { value: ["#ff8800", "#ffaa00", "#ffcc44", "#ff6600"] },
+      shape: { type: "circle" },
+      opacity: {
+        value: { min: 0.3, max: 0.9 },
+        animation: { enable: true, speed: 0.5, sync: false },
+      },
+      size: { value: { min: 1, max: 3 } },
+      move: {
+        enable: true,
+        speed: speed,
+        direction: "top",
+        random: true,
+        straight: false,
+        outModes: { default: "out" },
+      },
+    },
+  };
+}