Fireworks preset
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>
After that just add this JavaScript code for loading it and start the effect
(async () => {
await tsParticles.load("tsparticles", {
preset: "fireworks",
});
})();
React.js
For React.js you have to install these packages:
npm install react-particles tsparticles-preset-fireworks
or
yarn add react-particles tsparticles-preset-fireworks
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;
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" />
const particlesOptions = {
preset: "fireworks",
};
async function particlesInit(engine: Engine): Promise<void> {
await loadFireworksPreset(engine);
}
Vue 2.x
For Vue.js 2.x you have to install these packages:
npm install vue2-particles tsparticles-preset-fireworks
or
yarn add vue2-particles tsparticles-preset-fireworks
and in the app.js
import Particles from "vue2-particles";
Vue.use(Particles);
Vue 3.x
For Vue.js 3.x you have to install these packages:
npm install vue3-particles tsparticles-preset-fireworks
or
yarn add vue3-particles tsparticles-preset-fireworks
and in the app.js
import Particles from "vue3-particles";
createApp(App).use(Particles)
Angular
For Angular you have to install these packages:
npm install ng-particles tsparticles-engine tsparticles-preset-fireworks
or
yarn add ng-particles tsparticles-engine tsparticles-preset-fireworks
And add this tag to the HTML file
<ng-particles [id]="id" [options]="particlesOptions" [particlesInit]="particlesInit"></ng-particles>
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);
}
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 {
}
Svelte
The tag to add to the HTML
<Particles
id="tsparticles"
options={particlesOptions}
particlesInit={particlesInit}
/>
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);
};
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
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 (0)