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

View on GitHub

Top comments (0)

Read next

mike_andreuzza profile image

How to create a image gallery with Tailwind CSS and Alpinejs

Michael Andreuzza -

thejoernal profile image

How to reset an HTML form on submit using JavaScript

Joseph Ochego -

nikhil6076 profile image

Upgrading Your Angular Application to it's latest

Nikhil Sai -

bytehide profile image

How to Use Intellicode in Visual Studio

ByteHide -