DEV Community 👩‍💻👨‍💻

Cover image for tsParticles Fireworks Effect 2.0
Matteo Bruni for tsParticles

Posted on • Updated on

tsParticles Fireworks Effect 2.0

Here's a CodePen sample for tsParticles for creating a fireworks effect, soon available in a NPM preset package.

This configuration will work in any component and not only in Vanilla JavaScript, you can use this config also in React, Vue (2.x and 3.x), Angular, Svelte, Riot, Solid, jQuery, Web Components, Inferno and Preact.

GitHub logo matteobruni / tsparticles

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.

banner

tsParticles - TypeScript Particles

A lightweight TypeScript library for creating particles. Dependency free (*), browser ready and compatible with React.js, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno, Riot.js, Solid.js, and Web Components

GitHub Sponsors Rate on Openbase jsDelivr Cdnjs npmjs npm lerna CodeFactor Codacy Badge Gitpod Ready-to-Code Run on Repl.it

Discord Slack Telegram Reddit

tsParticles Product Hunt


Table of Contents

⚠️⚠️ This readme refers to upcoming v2 version, read here for v1 documentation ⚠️⚠️


Do you want to use it on your website?

Documentation and Development references here 📖

This library is…

Top comments (10)

Collapse
 
ateevduggal profile image
Ateev Duggal

Hey man, Thanks
I am converting this into a React Project and will be explaining everything your code is doing in the form of a blog.
Do check that out

Collapse
 
matteobruni profile image
Matteo Bruni Author

There's a new article about fireworks with tsParticles dev.to/tsparticles/javascript-crea...

Collapse
 
ateevduggal profile image
Ateev Duggal

Thanks, I will definitely make this one as well

Thread Thread
 
ateevduggal profile image
Ateev Duggal

Hey man
Here is the link to the blog - tekolio.com/how-to-make-fireworks-...

Thread Thread
 
matteobruni profile image
Matteo Bruni Author

Thanks, Can you replace react-tsparticles with react-particles, I prefer the new name.

This statement is not true:

By default the value of full screen and detectRatina are false and both are boolean values, while the default value of fps is 60 and as for the background, it s white.
Enter fullscreen mode Exit fullscreen mode

The default values are true for both values and fpsLimit is set to 120.

In the FAQs the tutorial on how to use particles in HTML are using particles.js instead of tsparticles, but only this library supports fireworks or emitters.
Also in the FAQs there are instructions about react-particles-js which was deprecated in favor of react-particles (or react-tsparticles)

Thread Thread
 
ateevduggal profile image
Ateev Duggal

Thanks for the feedback
I will update the blog write now after doing some more research

Thread Thread
 
ateevduggal profile image
Ateev Duggal

I found that default value for background is transparent and that of full screen is true.
But I couldn't find the default value of fpsLimit and DetectRatine
Can you share some links where I can get it
Thanks again

Thread Thread
 
matteobruni profile image
Matteo Bruni Author • Edited on

github.com/matteobruni/tsparticles...
github.com/matteobruni/tsparticles...

This file contains all the default values in Options

Thread Thread
 
ateevduggal profile image
Ateev Duggal

Thanks, I will update my blog right now

Thread Thread
 
ateevduggal profile image
Ateev Duggal

Thanks for reading my blog and giving me an honest feedback

🌚 Browsing with dark mode makes you a better developer by a factor of exactly 40.

It's a scientific fact.