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

 by   matteobruni TypeScript Version: 3.0.0-alpha.1 License: MIT

kandi X-RAY | tsparticles Summary

kandi X-RAY | tsparticles Summary

tsparticles is a TypeScript library typically used in User Interface, Frontend Framework, Vue, Angular, React applications. tsparticles has no bugs, it has no vulnerabilities, it has a Permissive License and it has medium support. You can download it from GitHub.

tsParticles - Easily create highly customizable JavaScript particles effects, confetti explosions and fireworks animations and use them as animated backgrounds for your website. Ready to use components available for React.js, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno, Solid, Riot and Web Components.

            kandi-support Support

              tsparticles has a medium active ecosystem.
              It has 5486 star(s) with 662 fork(s). There are 114 watchers for this library.
              There were 5 major release(s) in the last 12 months.
              There are 12 open issues and 366 have been closed. On average issues are closed in 81 days. There are 3 open pull requests and 0 closed requests.
              It has a neutral sentiment in the developer community.
              The latest version of tsparticles is 3.0.0-alpha.1

            kandi-Quality Quality

              tsparticles has no bugs reported.

            kandi-Security Security

              tsparticles has no vulnerabilities reported, and its dependent libraries have no vulnerabilities reported.

            kandi-License License

              tsparticles is licensed under the MIT License. This license is Permissive.
              Permissive licenses have the least restrictions, and you can use them in most projects.

            kandi-Reuse Reuse

              tsparticles releases are available to install and integrate.
              Installation instructions are not available. Examples and code snippets are available.

            Top functions reviewed by kandi - BETA

            kandi's functional review helps you automatically verify the functionalities of the libraries and avoid rework.
            Currently covering the most popular Java, JavaScript and Python libraries. See a Sample of tsparticles
            Get all kandi verified functions for this library.

            tsparticles Key Features

            No Key Features are available at this moment for tsparticles.

            tsparticles Examples and Code Snippets

            No Code Snippets are available at this moment for tsparticles.

            Community Discussions


            Cannot find name 'GlobalCompositeOperation'
            Asked 2022-Apr-10 at 13:59

            While working with ng-lottie for animations. It is suddenly having build issues. Know more .

            Hence, in search of alternatives I am trying ng-particles.

            I have installed it and added the configs as per docs.

            But, now I am getting Cannot find name 'GlobalCompositeOperation'




            Answered 2022-Apr-10 at 13:59

            this an issue with typescript version and for me details you can take a look at here :


            Source https://stackoverflow.com/questions/71796111


            tsparticles : Interruption in particle motion (defect in movement or has stutter and lag) after build in react
            Asked 2022-Feb-06 at 10:00

            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



            Answered 2022-Jan-26 at 18:41

            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

            Source https://stackoverflow.com/questions/70625054


            Particles.js does not cover the entire page but instead it is inside the card component
            Asked 2022-Feb-04 at 07:52

            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



            Answered 2022-Feb-04 at 07:52

            The Form component is currently controlling the stacking context for its children (being positioned relatively), including Particles. In other words, Particles, which is absolutely positioned within Form, is constrained within Form's stacking context.

            One solution is to make

            and siblings in demo.js. For example:

            Source https://stackoverflow.com/questions/70981239


            tsParticles has worse performance on live-server
            Asked 2022-Jan-26 at 18:51

            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 :)



            Answered 2022-Jan-26 at 18:51

            I had this problem too

            there is a problem with the build tool or bundle file that occurs when using the npm run build command.

            also may be solved by changing the browserslist in package.json.

            you can refer to this answer : https://stackoverflow.com/a/70625114/8730051

            Source https://stackoverflow.com/questions/70807653


            How to change color , background and height of the particle background in react-tsparticles?
            Asked 2022-Jan-15 at 12:19

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



            Answered 2022-Jan-15 at 12:19

            To change particle & background colour you need to adjust the below values respectively (with hex code colours) in your config. I also included links (the ones between the dots) as you can also adjust their colour

            Source https://stackoverflow.com/questions/70625151


            Website is not showing on GitHub Pages after deployment
            Asked 2021-Nov-02 at 03:09

            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



            Answered 2021-Nov-02 at 03:09

            I found the solution. I was following a botched tutorial and it missed the step where I need to run "npm run deploy".

            Source https://stackoverflow.com/questions/69776199


            React Router DOM - Not working in sub to subdomain
            Asked 2021-Aug-19 at 13:22

            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



            Answered 2021-Aug-17 at 07:02

            Hello can you remove switch from your component and try like this

            It is working fine on my development and .htaccess rules are:

            Source https://stackoverflow.com/questions/68812648


            Deployed once to Netlify, then nothing. Any Ideas?
            Asked 2021-Aug-14 at 19:46

            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 :



            Answered 2021-Aug-14 at 19:46

            The issue is that the following script is an infinite loop:

            Source https://stackoverflow.com/questions/68786346


            Particle.js not working on ReactJS website
            Asked 2021-Jul-16 at 04:15

            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:



            Answered 2021-Jul-16 at 04:12

            in default Particles stroke color is white therefor i think you can't see partials . So try to change and see wrapping component background color or partial stroke color. you can change particle color with below code 👇

            Source https://stackoverflow.com/questions/68403021


            error TS2322 in Angular with error "Type 'string' is not assignable to type '"canvas"" when using ng-particles
            Asked 2021-Jan-24 at 17:40

            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.



            Answered 2021-Jan-24 at 17:40

            I finally figured out what was the problem.

            There's a property that is not part of the Options object of tsparticles

            You can see it here

            Source https://stackoverflow.com/questions/65803509

            Community Discussions, Code Snippets contain sources that include Stack Exchange Network


            No vulnerabilities reported

            Install tsparticles

            You can download it from GitHub.


            You can find the instructions here.
            Find more information at:

            Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from over 650 million Knowledge Items

            Find more libraries
          • npm

            npm i tsparticles

          • CLONE
          • HTTPS


          • CLI

            gh repo clone matteobruni/tsparticles

          • sshUrl


          • Stay Updated

            Subscribe to our newsletter for trending solutions and developer bootcamps

            Agree to Sign up and Terms & Conditions

            Share this Page

            share link