everything works fine in development mode when I use npm run start, but in production and deployed mode after build (npm run build) there is Interruption in particle motion or it's way slow.
I changed and tested all the tsparticles options but it still did not work properly.
my react version is 17.0.2 , typescript 4.5.4 and tsParticles 1.38.0
import Particles from "react-tsparticles";
export const Header = (props:any) => {
return (
<div>
<Particles
id="tsparticles"
options={
{
"background": {
"color": {
"value": "#00000095"
},
"position": "50% 50%",
"repeat": "no-repeat",
"size": "cover",
"opacity": 1,
"image": "url('/img/bg1.jpg')"
},
"backgroundMask": {
"composite": "destination-out",
"cover": {
"color": {
"value": {
"r": 255,
"g": 255,
"b": 255
}
},
"opacity": 1
},
"enable": true
},
"fullScreen": {
"enable": false,
"zIndex": -10
},
"interactivity": {
"events": {
"onClick": {
"enable": true,
"mode": "push"
},
"onHover": {
"enable": true,
"mode": "bubble",
"parallax": {
"force": 60
}
}
}
},
"particles": {
"color": {
"value": "#ffffff"
},
"move": {
"attract": {
"rotate": {
"x": 600,
"y": 1200
}
},
"enable": true,
"outModes": {
"bottom": "out",
"left": "out",
"right": "out",
"top": "out",
"default": "none"
},
"direction": "right",
"speed": 2
},
"number": {
"density": {
"enable": true,
},
"value": 60
},
"opacity": {
"value": {
"min": 0.1,
"max": 0.5
},
"animation": {
"enable": true,
"speed": 1,
"minimumValue": 0.1
}
},
"shape": {
"options": {
"polygon": {
"sides": 5
},
"star": {
"sides": 5
}
},
"type": "square"
},
"size": {
"random": {
"enable": true,
"minimumValue": 0,
},
"value": {
"min": 5,
"max": 20
},
"animation": {
"speed": 10,
"minimumValue": 0.1
}
}
}
}
}
}
/>
</div>
)
}
I also changed the values of the retina_detect and detectRetina to false but it was not resolved.
I found the reason for this issue, there is a problem with the build tool or bundle file that occurs when using the npm run build command.
now I am building the project with Webpack and there is no interruption but not full fixed.
also may be solved by changing the browserslist in package.json
Following for more details this issue: https://github.com/matteobruni/tsparticles/issues/2809