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

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

npm install react-particles tsparticles-preset-fireworks

yarn add react-particles tsparticles-preset-fireworks

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;

<Particles id="tsparticles" :particlesInit="particlesInit" :options="particlesOptions" />

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

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

npm install vue2-particles tsparticles-preset-fireworks

yarn add vue2-particles tsparticles-preset-fireworks

import Particles from "vue2-particles";

Vue.use(Particles);

npm install vue3-particles tsparticles-preset-fireworks

yarn add vue3-particles tsparticles-preset-fireworks

import Particles from "vue3-particles";

createApp(App).use(Particles)

npm install ng-particles tsparticles-engine tsparticles-preset-fireworks

yarn add ng-particles tsparticles-engine tsparticles-preset-fireworks

<ng-particles [id]="id" [options]="particlesOptions" [particlesInit]="particlesInit"></ng-particles>

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);
}

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 {
}

<Particles
        id="tsparticles"
        options={particlesOptions}
        particlesInit={particlesInit}
/>

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

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

let particlesInit = async (engine) => {
  await loadFireworksPreset(engine);
};

matteobruni / tsparticles

tsParticles — Легко создавайте настраиваемые эффекты частиц JavaScript, взрывы конфетти и анимацию фейерверков и используйте их в качестве анимированных фонов для вашего сайта. Готовые к использованию компоненты доступны для React.js, Vue.js (2.x и 3.x), Angular, Svelte, jQuery, Preact, Inferno, Solid, Riot и Web Components.