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,