5 reasons to use tsParticles and not Particles.js
Tags: javascript, typescript, showdev, tutorial
Published: 2020-03-13 15:49:00

Hello,

I'm the author of [tsParticles](https://particles.matteobruni.it) (obviously, why anyone would spend time about my little project?) and I'll show you some reasons to replace particles.js with the new tsParticles.

1. tsParticles are fully compatible with the particles.js configuration.

    Seriously, you just need to change the script source *et-voilà* **you're ready**.

    Cool, isn't it?

    If you are too lazy to Google it (*Who isn't) you can replace the actual particles.js script with this

    ```html
    <script src="https://cdn.jsdelivr.net/npm/tsparticles@1.9.2/dist/tsparticles.min.js" integrity="sha256-5kED68Spy7K2CEbfu4CjV92DmZR5ZQFUoIR5qmPzZWg=" crossorigin="anonymous"></script>
    ```

    **Remember to checkout [jsDeliver](https://www.jsdelivr.com/package/npm/tsparticles) for latest version**

    [![](https://data.jsdelivr.com/v1/package/npm/tsparticles/badge)](https://www.jsdelivr.com/package/npm/tsparticles)

    If you have installed with `npm` or `yarn` you can install it from there too

    ```shell
    npm install tsparticles
    ```

    [![npmjs](https://badge.fury.io/js/tsparticles.svg)](https://www.npmjs.com/package/tsparticles)

    or

    ```shell
    yarn add tsparticles
    ```

    

2. tsParticles have a frame per second (fps) limiter, so they don't let the client CPU 🔥 suffer more than necessary.

    By default it's limited at 60fps (*I thought it was enough*). How do you setup it? `fpsLimit: 60` in the config/json root (like `retina_detect`) and boom! 💥 You're done!

3. tsParticles have a lot of new features.
    
    *A lot?* **YES!**
    If you don't believe me checkout these
    
    {% codepen https://codepen.io/matteobruni/pen/yLNvqxG %}

    {% codepen https://codepen.io/matteobruni/pen/gOpepJa %}

    {% codepen https://codepen.io/matteobruni/pen/yLNpgKW %}

    {% codepen https://codepen.io/matteobruni/pen/bGdomGq %}

    {% codepen https://codepen.io/matteobruni/pen/GRJMgBp %}

    {% codepen https://codepen.io/matteobruni/pen/xxGdyjd %}

    {% codepen https://codepen.io/matteobruni/pen/QWbrLoK %}

    Well 7 codepens are not a lot, but you can see more than 6 features here:

    1. Masking background with unveiling particles (**WOW!**)
    2. A line particle (*Who cares about lines?*)
    3. Use a SVG path (for now single) to draw particles (inline, inside or outside) (*OK it's cool but where I use it?*)
    4. Rotating particles (*Imagine a rotating line, like an helicopter*)
    5. Multiple images (*You can use all the images you want as a particle*, **Remember to not use big ones!**)
    6. Random particles color (*Stop using big arrays for having a lot of colors*, **Embrace the CHAOS**)
    7. Mouse hover particles connection (*So you can distract your users for hours*)
    8. Characters and text particles (*You can write the Odyssey and use it as a particle... Ehm... Please don't do that*)
    9. You can use FontAwesome icons as particles (*That's awesome! Yes, like the font*)

4. tsParticles development is active. The other project was abandoned about 5 years ago. You can request new features or report issues and you'll get it done. Well, if it's a reasonably request, I won't make an OS out of particles.

5. If you're not convinced yet, well, give it a try. 
   Replacing a url is not an expensive task and you can revert easily.