@tsparticles/confetti/browser/ConfettiOptions.js

tsParticles confetti bundle — easily create confetti, confetti cannon, confetti explosions, confetti falling, and confetti parade animations with presets. Ready to use components available for React, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact,

import { deepExtend, isArray, isNull, loadProperty, percentDenominator, } from "@tsparticles/engine";
export class ConfettiOptions {
    angle;
    colors;
    count;
    decay;
    disableForReducedMotion;
    drift;
    flat;
    gravity;
    position;
    scalar;
    shapeOptions;
    shapes;
    spread;
    startVelocity;
    ticks;
    zIndex;
    constructor() {
        this.angle = 90;
        this.count = 50;
        this.spread = 45;
        this.startVelocity = 45;
        this.decay = 0.9;
        this.gravity = 1;
        this.drift = 0;
        this.ticks = 200;
        this.position = {
            x: 50,
            y: 50,
        };
        this.colors = ["#26ccff", "#a25afd", "#ff5e7e", "#88ff5a", "#fcff42", "#ffa62d", "#ff36ff"];
        this.shapes = ["square", "circle"];
        this.scalar = 1;
        this.zIndex = 100;
        this.disableForReducedMotion = true;
        this.flat = false;
        this.shapeOptions = {};
    }
    get origin() {
        return {
            x: this.position.x / percentDenominator,
            y: this.position.y / percentDenominator,
        };
    }
    set origin(value) {
        this.position.x = value.x * percentDenominator;
        this.position.y = value.y * percentDenominator;
    }
    get particleCount() {
        return this.count;
    }
    set particleCount(value) {
        this.count = value;
    }
    load(data) {
        if (isNull(data)) {
            return;
        }
        loadProperty(this, "angle", data.angle);
        const count = data.count ?? data.particleCount;
        if (count !== undefined) {
            this.count = count;
        }
        loadProperty(this, "spread", data.spread);
        loadProperty(this, "startVelocity", data.startVelocity);
        loadProperty(this, "decay", data.decay);
        loadProperty(this, "flat", data.flat);
        loadProperty(this, "gravity", data.gravity);
        loadProperty(this, "drift", data.drift);
        loadProperty(this, "ticks", data.ticks);
        const origin = data.origin;
        if (origin && !data.position) {
            data.position = {
                x: origin.x === undefined ? undefined : origin.x * percentDenominator,
                y: origin.y === undefined ? undefined : origin.y * percentDenominator,
            };
        }
        const position = data.position;
        if (position) {
            if (position.x !== undefined) {
                this.position.x = position.x;
            }
            if (position.y !== undefined) {
                this.position.y = position.y;
            }
        }
        if (data.colors !== undefined) {
            if (isArray(data.colors)) {
                this.colors = [...data.colors];
            }
            else {
                this.colors = data.colors;
            }
        }
        const options = data.shapeOptions;
        if (options !== undefined) {
            for (const shape in options) {
                const item = options[shape];
                if (item) {
                    this.shapeOptions[shape] = deepExtend(this.shapeOptions[shape] ?? {}, item);
                }
            }
        }
        if (data.shapes !== undefined) {
            if (isArray(data.shapes)) {
                this.shapes = [...data.shapes];
            }
            else {
                this.shapes = data.shapes;
            }
        }
        loadProperty(this, "scalar", data.scalar);
        loadProperty(this, "zIndex", data.zIndex);
        loadProperty(this, "disableForReducedMotion", data.disableForReducedMotion);
    }
}