DEV Community

Matteo Bruni for tsParticles

Posted on • Updated on

5 reasons to use tsParticles and not Particles.js

Hello,

I'm the author of tsParticles (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

    <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 for latest version

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

    npm install tsparticles
    

    npmjs

    or

    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

    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.

Top comments (6)

Collapse
 
anon987654321 profile image
anon987654321

I can't wait for this project to gain more traction. You have my full support!

Collapse
 
chiaralyn profile image
ChiaraLyn • Edited

Hi Matteo! Can I link your articles into mine (it was that one about Particle.js...) to advice others to switch to your wonderful tsParticle? Can i have your permission to cite you in my article?

Collapse
 
matteobruni profile image
Matteo Bruni

Yes, sure. Feel free to link to every article you need.

Collapse
 
goshrow profile image
GOSHROW

I came across this in a GitHub Issue as well. And with its second mention, I am sold. Just replaced the CDN address and it works fine. Looking forward to experiment more on this.

Collapse
 
lorenzofay profile image
lorenzofay

This project is great!
Is there any way to change lineLinked -> opacity as an hover effect?
I have seen this effect but i can't achieve it without the modes connect or grab.

Collapse
 
matteobruni profile image
Matteo Bruni

Thank you very much!
Actually, that feature is not possible, you can open an issue on GH so it can be scheduled in a future release