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

    Module tsParticles White Palette - v4.0.0-beta.16

    banner

    tsParticles White Palette

    jsDelivr npmjs npmjs GitHub Sponsors

    tsParticles palette for colored smoke amber.

    Discord Telegram

    tsParticles Product Hunt

    demo


    #FFFFFF

    #F5F5F5

    #E0E0E0

    #CCCCCC

    #AAAAAA

    #888888

    Background
    #111111
    Blend mode: source-over | Fill: true
    1. Install @tsparticles/engine (or use the CDN bundle below)
    2. Load a base package (for example @tsparticles/basic) and call loadWhitePalette before tsParticles.load(...)
    3. Apply the palette plus a minimal particles configuration in your options

    A palette defines colors, not complete behavior, so pair it with a runtime package and particle options.

    <script src="https://cdn.jsdelivr.net/npm/@tsparticles/basic@4/tsparticles.basic.bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@tsparticles/palette-white@4/tsparticles.palette-coloredSmokeAmber.min.js"></script>

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

    (async engine => {
    await loadBasic(engine);
    await loadWhitePalette(engine);

    const options = {
    particles: {
    number: { value: 200 },
    shape: { type: "circle" },
    size: { value: { min: 10, max: 15 } },
    move: {
    enable: true,
    speed: 2,
    },
    },
    palette: "white",
    };

    await engine.load({
    id: "tsparticles",
    options,
    });
    })(tsParticles);

    Important ⚠️ You can override all the options defining the properties like in any standard tsParticles installation.

    Checkout the documentation in the component library repository and call the loadWhitePalette function.

    Modules

    browser
    index
    index.lazy
    options