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

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

    banner

    tsParticles Snowfall Palette

    jsDelivr npmjs npmjs GitHub Sponsors

    tsParticles palette for colored smoke amber.

    Discord Telegram

    tsParticles Product Hunt

    demo


    #FFFFFF

    #EEF4FF

    #D0E4FF

    #AACCFF

    #88AADD

    Background
    #0d1520
    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 loadSnowfallPalette 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-snowfall@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 loadSnowfallPalette(engine);

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

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

    Modules

    browser
    index
    index.lazy
    options