tsParticles - v4.0.0-beta.12
    Preparing search index...

    Module tsParticles Particles Effect - v4.0.0-beta.16

    banner

    tsParticles Particles Effect

    jsDelivr npmjs npmjs GitHub Sponsors

    tsParticles additional particles effect.

    1. Install @tsparticles/engine (or use the CDN bundle below)
    2. Call the package loader function(s) before tsParticles.load(...)
    3. Apply the package options in your tsParticles.load(...) config

    The CDN/Vanilla version JS has one required file in vanilla configuration:

    Including the tsparticles.effect.particles.min.js file will export the function to load the effect:

    loadParticlesEffect
    

    Once the scripts are loaded you can set up tsParticles and the effect like this:

    (async () => {
    await loadParticlesEffect(tsParticles);

    await tsParticles.load({
    id: "tsparticles",
    options: {
    /* options */
    /* here you can use particles.effect.type: "particles" */
    },
    });
    })();

    This package is compatible also with ES or CommonJS modules, firstly this needs to be installed, like this:

    $ npm install @tsparticles/effect-particles
    

    or

    $ yarn add @tsparticles/effect-particles
    

    Then you need to import it in the app, like this:

    const { tsParticles } = require("@tsparticles/engine");
    const { loadParticlesEffect } = require("@tsparticles/effect-particles");

    (async () => {
    await loadParticlesEffect(tsParticles);
    })();

    or

    import { tsParticles } from "@tsparticles/engine";
    import { loadParticlesEffect } from "@tsparticles/effect-particles";

    (async () => {
    await loadParticlesEffect(tsParticles);
    })();
    • Effects are usually enabled through dedicated package loaders and effect-specific options.
    • Package scope: particles
    • Start from the usage snippet in this README, then merge with your main options object incrementally.
    • Calling tsParticles.load(...) before loadParticlesEffect(...)
    • Verify required peer packages before enabling advanced options
    • Change one option group at a time to isolate regressions quickly

    Modules

    browser
    index
    index.lazy
    ParticlesDrawer