bcf118093b
- 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>
94 lines
3 KiB
TypeScript
94 lines
3 KiB
TypeScript
import type { ISourceOptions } from "@tsparticles/engine";
|
||
|
||
/**
|
||
* 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(60 + (intensity / 100) * 140);
|
||
const speed = 4 + (intensity / 100) * 6;
|
||
return {
|
||
fullScreen: { enable: false },
|
||
background: { opacity: 0 },
|
||
particles: {
|
||
number: { value: count, density: { enable: false } },
|
||
color: { value: ["#ff2200", "#ff5500", "#ff8800", "#ffbb00", "#ffee00"] },
|
||
shape: { type: "circle" },
|
||
opacity: {
|
||
value: { min: 0.6, max: 1 },
|
||
animation: { enable: true, speed: 3, sync: false, startValue: "random" },
|
||
},
|
||
size: { value: { min: 1, max: 5 } },
|
||
move: {
|
||
enable: true,
|
||
speed: { min: speed * 0.6, max: speed },
|
||
direction: "top",
|
||
random: true,
|
||
straight: false,
|
||
outModes: { default: "out" },
|
||
},
|
||
},
|
||
};
|
||
}
|
||
|
||
/**
|
||
* 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(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: "#aad4f5" },
|
||
shape: { type: "circle" },
|
||
opacity: { value: { min: 0.4, max: 0.75 } },
|
||
size: { value: { min: 1, max: 2.5 } },
|
||
move: {
|
||
enable: true,
|
||
speed: speed,
|
||
direction: "bottom",
|
||
straight: true,
|
||
outModes: { default: "out" },
|
||
},
|
||
},
|
||
};
|
||
}
|
||
|
||
/**
|
||
* 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(20 + (intensity / 100) * 60);
|
||
const speed = 0.5 + (intensity / 100) * 1.5;
|
||
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.15, max: 0.9 },
|
||
animation: { enable: true, speed: 0.6, sync: false, startValue: "random" },
|
||
},
|
||
size: { value: { min: 1.5, max: 4 } },
|
||
move: {
|
||
enable: true,
|
||
speed: speed,
|
||
direction: "top",
|
||
random: true,
|
||
straight: false,
|
||
outModes: { default: "out" },
|
||
},
|
||
},
|
||
};
|
||
}
|