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.
tsparticles
/
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.
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
Table of Contents
-
tsParticles - TypeScript Particles
- Table of Contents
- Do you want to use it on your website?
- Library installation
- Official components for some of the most used frameworks
- Presets
- Templates and Resources
- Demo / Generator
- Video Tutorials
- …
Top comments (10)
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
There's a new article about fireworks with tsParticles dev.to/tsparticles/javascript-crea...
Thanks, I will definitely make this one as well
Hey man
Here is the link to the blog - tekolio.com/how-to-make-fireworks-...
Thanks, Can you replace
react-tsparticleswithreact-particles, I prefer the new name.This statement is not true:
The default values are
truefor both values andfpsLimitis set to120.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-jswhich was deprecated in favor ofreact-particles(orreact-tsparticles)Thanks for the feedback
I will update the blog write now after doing some more research
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
github.com/matteobruni/tsparticles...
github.com/matteobruni/tsparticles...
This file contains all the default values in Options
Thanks, I will update my blog right now
Thanks for reading my blog and giving me an honest feedback