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

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

    banner

    tsParticles HolographicShimmer Palette

    jsDelivr npmjs npmjs GitHub Sponsors

    tsParticles palette for colored smoke amber.

    Discord Telegram

    tsParticles Product Hunt

    demo


    #FF88FF

    #88FFFF

    #FFFF88

    #FF88CC

    #88CCFF

    #FFFFFF

    #CCAAFF

    Background
    #050510
    Blend mode: color-dodge | Fill: true
    1. Install @tsparticles/engine (or use the CDN bundle below)
    2. Load a base package (for example @tsparticles/basic) and call loadHolographicShimmerPalette 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-holographicShimmer@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 loadHolographicShimmerPalette(engine);

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

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

    Modules

    browser
    index
    index.lazy
    options