DEV Community

Cover image for JavaScript - How to create beautiful fireworks effects with tsParticles
tsParticles profile image Matteo Bruni
Matteo Bruni for tsParticles

Posted on

JavaScript - How to create beautiful fireworks effects with tsParticles

#showdev #javascript #typescript #tutorial

Fireworks preset

jsDelivr npmjs npmjs GitHub Sponsors

Starting from v2.2.0 the tsParticles fireworks preset has a new configuration, for a more realistic effect.

A demo can be seen here

Try the preview at 0.5x if the particles are going outside of the canvas, it's better to see it on CodePen.

How to use the fireworks preset

Vanilla JavaScript

There are two ways for installing the fireworks presets, as you can see in the readme of the package, but I'll describe the easier one.



<script src="https://cdn.jsdelivr.net/npm/tsparticles-preset-fireworks@2/tsparticles.preset.fireworks.bundle.min.js"></script>
Enter fullscreen mode Exit fullscreen mode

After that just add this JavaScript code for loading it and start the effect



(async () => {
  await tsParticles.load("tsparticles", {
    preset: "fireworks",
  });
})();
Enter fullscreen mode Exit fullscreen mode

React.js

For React.js you have to install these packages:



npm install react-particles tsparticles-preset-fireworks
Enter fullscreen mode Exit fullscreen mode

or 



yarn add react-particles tsparticles-preset-fireworks
Enter fullscreen mode Exit fullscreen mode

And the script can be loaded like this:



import Particles from "react-particles";
import { loadFireworksPreset } from "tsparticles-preset-fireworks";

function fireworks(props) {
  // this customizes the component tsParticles installation
  const customInit = async (engine) => {
    // this adds the preset to tsParticles, you can safely use the
    await loadFireworksPreset(engine);
  };

  const options = {
    preset: "fireworks"
  };

  return <Particles options={options} init={customInit} />;
}

export default fireworks;
Enter fullscreen mode Exit fullscreen mode

Preact / Inferno

There are also packages for Preact and Inferno, just replace react with preact or inferno in the package name and usage.

Vue.js (2.x and 3.x)

Since Vue.js 2.x and 3.x packages have different instructions, before I'll show the code needed



<Particles id="tsparticles" :particlesInit="particlesInit" :options="particlesOptions" />
Enter fullscreen mode Exit fullscreen mode 


const particlesOptions = {
  preset: "fireworks",
};

async function particlesInit(engine: Engine): Promise<void> {
  await loadFireworksPreset(engine);
}
Enter fullscreen mode Exit fullscreen mode

Vue 2.x

For Vue.js 2.x you have to install these packages:



npm install vue2-particles tsparticles-preset-fireworks
Enter fullscreen mode Exit fullscreen mode

or



yarn add vue2-particles tsparticles-preset-fireworks
Enter fullscreen mode Exit fullscreen mode

and in the app.js



import Particles from "vue2-particles";

Vue.use(Particles);
Enter fullscreen mode Exit fullscreen mode

Vue 3.x

For Vue.js 3.x you have to install these packages:



npm install vue3-particles tsparticles-preset-fireworks
Enter fullscreen mode Exit fullscreen mode

or



yarn add vue3-particles tsparticles-preset-fireworks
Enter fullscreen mode Exit fullscreen mode

and in the app.js



import Particles from "vue3-particles";

createApp(App).use(Particles)
Enter fullscreen mode Exit fullscreen mode

Angular

For Angular you have to install these packages:



npm install ng-particles tsparticles-engine tsparticles-preset-fireworks
Enter fullscreen mode Exit fullscreen mode

or



yarn add ng-particles tsparticles-engine tsparticles-preset-fireworks
Enter fullscreen mode Exit fullscreen mode

And add this tag to the HTML file



<ng-particles [id]="id" [options]="particlesOptions" [particlesInit]="particlesInit"></ng-particles>
Enter fullscreen mode Exit fullscreen mode

and in the relative TypeScript file this code



import { loadFireworksPreset } from "tsparticles-preset-fireworks"; // top of file, with other imports

const particlesOptions = {
  preset: "fireworks",
};

async function particlesInit(engine: Engine): Promise<void> {
  await loadFireworksPreset(engine);
}
Enter fullscreen mode Exit fullscreen mode

and in the app module file add this import and usage



import { NgParticlesModule } from "ng-particles"; // top of the file, with other imports

@NgModule({
  declarations: [
    /* AppComponent */
  ],
  imports: [
    /* other imports */ NgParticlesModule /* NgParticlesModule is required*/
  ],
  providers: [],
  bootstrap: [
    /* AppComponent */
  ]
})
export class AppModule {
}
Enter fullscreen mode Exit fullscreen mode

Svelte

The tag to add to the HTML



<Particles
        id="tsparticles"
        options={particlesOptions}
        particlesInit={particlesInit}
/>
Enter fullscreen mode Exit fullscreen mode

and the properties in the JavaScript code



import Particles from "svelte-particles";
import { loadFireworksPreset } from "tsparticles-preset-fireworks";

let particlesOptions = {
  preset: "fireworks",
};

let particlesInit = async (engine) => {
  await loadFireworksPreset(engine);
};
Enter fullscreen mode Exit fullscreen mode

Other UI frameworks

Packages are available also for: Riot.js, Solid, Web Components and jQuery. You can find more setup instructions here

Social contacts

For any other information or help here are our official social channels

Or you can open an issue or a discussion on GitHub

GitHub logo 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.

View on GitHub

Top comments (0)

Read next

jayaramviswanathr profile image

Choosing Your Tech Stack: A Developer's Journey

Viswanath R -

jeet_dhandha profile image

Building and Comparing Table Data Made Easy with @libs-jd/table-data-kit

Jeet Dhandha -

josh_devquezada profile image

Pattern matching for everyone (Using in video games)

Josh Quezada -

choir241 profile image

Zero to Hero: Building a Full-Stack App with PropelAuth, Vite, Typescript, Express, and MongoDB

Richard Choi -