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

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

    banner

    tsParticles CosmicRadiation Palette

    jsDelivr npmjs npmjs GitHub Sponsors

    tsParticles palette for colored smoke amber.

    Discord Telegram

    tsParticles Product Hunt

    demo


    #FF4444

    #4444FF

    #44FF44

    #FFFF44

    #FF44FF

    #44FFFF

    #FFFFFF

    Background
    #020204
    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 loadCosmicRadiationPalette 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-cosmicRadiation@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 loadCosmicRadiationPalette(engine);

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

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

    Modules

    browser
    index
    index.lazy
    options