aaron/darkwatch
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: add tsParticles configs for fire, rain, embers

Browse source
This commit is contained in:
Aaron Wood 2026-04-10 19:22:08 -04:00
parent be14a14708
commit a6e3ca6066
1 changed files with 90 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

90
client/src/lib/particleConfigs.ts Normal file
View file

@ -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" },
},
},
};
}