The behaviour of my particles is as follwos : they are being created they bounce with eachother gaining speed(infinitely).
I want the particles to bouce with eachother, but I want them to lose their speed gradually after let's say they reach a speed of 15,then after they reach a speed of 10, slow down the rate at witch they lose speed. I checked the tsparticles documentation and it dosen't seem to have a way to do this without some extra code. I tried somethings but I couldn't get it to work(this is my first time trying to extend the functionalities of a library).
<Particles
id="tsparticles"
init={particlesInit}
loaded={particlesLoaded}
options={{
background: {
color: {
value: `var(--body_background)`,
},
},
fpsLimit: 120,
interactivity: {
events: {
onClick: {
enable: true,
mode: 'push',
},
onHover: {
enable: true,
mode: 'attract',
},
resize: true,
},
modes: {
push: {
quantity: 5,
},
//the attract onHover
attract: {
distance: 200,
speed: 1.3,
},
},
},
particles: {
collisions: { enable: true },
color: {
value: ['#FF3131'],
},
links: {
color: '#E1D9D1',
distance: 165,
enable: true,
opacity: 0.6,
width: 1.3,
},
move: {
direction: 'none',
enable: true,
outModes: {
default: 'bounce',
},
random: true, // Set random to true
speed: { min: 0.2, max: 2.7 }, // Provide a range for speed
wrap: true,
},
number: {
density: {
enable: true,
area: 800,
},
value: 200,
max: 250,
},
opacity: {
value: 0.5,
},
shape: {
type: 'circle',
},
size: {
value: { min: 1, max: 5 },
},
},
detectRetina: true,
}}
/>