tsparticles | Easily create highly customizable JavaScript particles | Frontend Framework library

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

I wanted the Particles.js to be served as background. However, it only shows inside the Card Component. And also how can I make the particles.js not pass through the card. As of now, the card is like a transparent one where you could just see the lines passing through it. I just wanted the Particles.js to stay behind the Card. How can I do this? Thank you.

I recreated it here: https://codesandbox.io/s/basiccard-material-demo-forked-p644e?file=/Form.js

Card Component

I am currently stuck and unable to locate the error. After building my react application containing the react-tsParticles package, I noticed a immense worse performance after publishing it on my nginx-based webserver. While in local development performance is fine, but the performance when visiting the live page is bad and not comparable to other examples on the internet.

I am not interested in advertising my page, but this is the link to it. The Code can be found here on Github.

Any advice is appreciated :)

How to change color and background in react-tsparticles ? This is my particle-config.js

This is my first time deploying onto GH Pages and it seemed like everything was right. It states "Your site is published at https://shayanvalaie.github.io/portfolio/" but after going to the address it gives me a getting started with react page.

After doing some research I found that it might be due to the fact that it is taking my master branch and the solution was to change to the gh-pages branch but after checking it seems I don't have a gh-pages branch.

This is my package.json

I have to build my first react project that uses react-router-dom

Yes, it's a multi-page project.

After, running the build command I have successfully tested my build file using Static Server - https://create-react-app.dev/docs/deployment/

Note: I have checked these links to deploy React application to the server

1. How to deploy a react app on cPanel? ( Followed this ).

2. https://dev.to/crishanks/deploy-host-your-react-app-with-cpanel-in-under-5-minutes-4mf6

3. https://ridbay.medium.com/simple-steps-on-how-to-deploy-or-host-your-reactjs-app-in-cpanel-31cfbcad444e

But, when I upload the project to my CPanel it opens the main pages successfully ( https://test.com/react-project/ ) but did not serve other routing pages ( https://test.com/react-project/page2 --- shows 404).

App.js code

Ive been combing through stackoverflow and netlify forums to find a solution to this, but so far it's a no go. Ive tried adding build: "CI= npm run build" to the package.json file :

I have been trying to implement Particles.js on my portfolio website but have been rather unsuccessful. These are the following lines of code I have run in my library to get it running:

npm install tsparticles

npm install react-particles-js

I have referred to https://www.geeksforgeeks.org/how-to-use-particles-js-in-react-project/ and https://www.npmjs.com/package/react-particles-js and went about including their code as they went about it but nothing seems to appear on my page.

Here's an image of my page right now: How my page looks right now

This is my code for the page:

I am trying to have the particles.js in the home screen component. I have installed "npm install ng-particles" and "npm install tsparticles." After serving and restarting and comparing to other projects I cant seem to figure it out. Below is the error I receive, although it does still run on localhost when I ng-serve. I am pretty new to typescript and angular so I really don't understand the error.