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

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

    banner

    tsParticles Hologram Palette

    jsDelivr npmjs npmjs GitHub Sponsors

    tsParticles palette for colored smoke amber.

    Discord Telegram

    tsParticles Product Hunt

    demo


    #003344

    #006688

    #00AACC

    #00DDFF

    #44EEFF

    #AAFFFF

    #FFFFFF

    Background
    #000a0d
    Blend mode: screen | Fill: false
    1. Install @tsparticles/engine (or use the CDN bundle below)
    2. Load a base package (for example @tsparticles/basic) and call loadHologramPalette 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-hologram@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 loadHologramPalette(engine);

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

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

    Modules

    browser
    index
    index.lazy
    options