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.

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
    • Hosting / CDN
      • jsDelivr
      • cdnjs
      • unpkg
    • npm
    • yarn
    • pnpm
      • Import and require
    • Usage
  • Official components for some of the most used frameworks
    • Angular
      • @tsparticles/angular
    • Astro
      • astro-particles
    • Ember.js
      • ember-tsparticles
    • Inferno
      • inferno-particles
    • jQuery
      • jquery-particles
    • Preact
      • preact-particles
    • ReactJS
      • @tsparticles/react
    • RiotJS
      • riot-particles
    • SolidJS
      • solid-particles
    • Svelte
      • @tsparticles/svelte
    • VueJS 2.x
      • @tsparticles/vue2
    • VueJS 3.x
      • @tsparticles/vue3
    • Web Components
      • web-particles
    • WordPress
      • @tsparticles/wordpress
    • Elementor
  • Presets
    • Big Circles
    • Bubbles
    • Confetti
    • Fire
    • Firefly
    • Fireworks
    • Fountain
    • Links
    • Sea Anemone
    • Snow
    • Stars
    • Triangles
  • Templates and Resources
  • Demo / Generator
  • Video Tutorials
    • Characters as particles
    • Polygon mask
    • Animated stars
    • Nyan cat flying on scrolling stars
    • Snow particles
    • Background Mask particles
  • …

View on GitHub

Comments

[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

[Matteo Bruni]

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

[Ateev Duggal]

Thanks, I will definitely make this one as well

[Ateev Duggal]

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

[Matteo Bruni]

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.

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)

[Ateev Duggal]

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

[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

[Matteo Bruni]

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

This file contains all the default values in Options

[Ateev Duggal]

Thanks, I will update my blog right now

[Ateev Duggal]

Thanks for reading my blog and giving me an honest feedback