I have floating particles on the screen already, and have a cursor trail of them, I am wanting the duration of the trail to disappear after a half second, but NOT the particles already on the screen, but do not know where to put it. All of the commented out durations is where I have tried it already.
<Particles
id="tsparticles"
init={particlesInit}
loaded={particlesLoaded}
options={{
// duration: .4,
// makes them all dissappear
fpsLimit: 120,
interactivity: {
//duration: .4,
events: {
//duration: .4,
onHover: {
//duration: .4,
enable: true,
mode: "trail",
},
onClick: {
enable: true,
mode: "push",
},
resize: true,
},
modes: {
push: {
quantity: 4,
},
trail: {
//duration: .4,
delay: .011,
pauseOnStop: true,
quantity: 1,
particles: {
//duration: .4,
size: {
value: { min: 5, max: 10 },
},
},
},
},
},
particles: {
// duration: .4,
rotate: {
value: 0,
direction: "random",
animation: {
speed: 5,
enable: true
}
},
collisions: {
enable: true,
},
move: {
direction: "none",
enable: true,
outModes: {
default: "destroy",
},
random: false,
speed: 2,
straight: false,
},
number: {
density: {
enable: true,
area: 800,
},
value: 10,
},
opacity: {
value: 0.5,
},
// //duration: .4,
shape: {
type: "image",
images: [
{
src: fish
},
{
src: paw
}
],
},
size: {
value: { min: 10, max: 20 },
},
},
detectRetina: true,
}
}
/>
I have tried adding duration to where it is commented out in the code above, but they do not do anything.