@tsparticles/ribbons 4.0.5

package/esm/ribbons.js

@@ -0,0 +1,79 @@
+import { isString, tsParticles } from "@tsparticles/engine";
+import { loadBasic } from "@tsparticles/basic";
+import { loadEmittersPluginSimple } from "@tsparticles/plugin-emitters/plugin";
+import { loadEmittersShapeSquare } from "@tsparticles/plugin-emitters-shape-square";
+import { loadLifeUpdater } from "@tsparticles/updater-life";
+import { loadMotionPlugin } from "@tsparticles/plugin-motion";
+import { loadRibbonShape } from "@tsparticles/shape-ribbon";
+import { setRibbons } from "./utils.js";
+let initPromise = null;
+async function doInitPlugins(engine) {
+    engine.checkVersion("4.0.5");
+    await engine.pluginManager.register(async (e) => {
+        const emittersRegister = async (engine) => {
+            await loadEmittersPluginSimple(engine);
+            await loadEmittersShapeSquare(engine);
+        };
+        await Promise.all([
+            loadBasic(e),
+            loadMotionPlugin(e),
+            emittersRegister(e),
+            loadRibbonShape(e),
+            loadLifeUpdater(e),
+        ]);
+    });
+}
+async function initPlugins(engine) {
+    if (initPromise) {
+        return initPromise;
+    }
+    initPromise = doInitPlugins(engine);
+    return initPromise;
+}
+export async function ribbons(idOrOptions, ribbonsOptions) {
+    await initPlugins(tsParticles);
+    let options, id;
+    if (isString(idOrOptions)) {
+        id = idOrOptions;
+        options = ribbonsOptions ?? {};
+    }
+    else {
+        id = "ribbons";
+        options = idOrOptions ?? {};
+    }
+    return setRibbons(tsParticles, {
+        id,
+        options,
+    });
+}
+ribbons.create = async (canvas, options = {}) => {
+    await initPlugins(tsParticles);
+    const id = canvas?.getAttribute("id") ?? "ribbons";
+    canvas?.setAttribute("id", id);
+    await setRibbons(tsParticles, {
+        id,
+        canvas: canvas ?? undefined,
+        options,
+    });
+    return async (idOrOptions, subRibbonsOptions) => {
+        let subOptions, subId;
+        if (isString(idOrOptions)) {
+            subId = idOrOptions;
+            subOptions = subRibbonsOptions ?? options;
+        }
+        else {
+            subId = id;
+            subOptions = idOrOptions ?? {};
+        }
+        return setRibbons(tsParticles, {
+            id: subId,
+            canvas: canvas ?? undefined,
+            options: subOptions,
+        });
+    };
+};
+ribbons.init = async () => {
+    await initPlugins(tsParticles);
+};
+ribbons.version = "4.0.5";
+globalThis.ribbons = ribbons;

package/esm/ribbons.lazy.js

@@ -0,0 +1,80 @@
+import { isString, tsParticles } from "@tsparticles/engine/lazy";
+import { setRibbons } from "./utils.js";
+let initPromise = null;
+async function doInitPlugins(engine) {
+    engine.checkVersion("4.0.5");
+    await engine.pluginManager.register(async (e) => {
+        const [{ loadBasic }, { loadEmittersPluginSimple }, { loadEmittersShapeSquare }, { loadMotionPlugin }, { loadRibbonShape }, { loadLifeUpdater },] = await Promise.all([
+            import("@tsparticles/basic/lazy"),
+            import("@tsparticles/plugin-emitters/plugin/lazy"),
+            import("@tsparticles/plugin-emitters-shape-square/lazy"),
+            import("@tsparticles/plugin-motion/lazy"),
+            import("@tsparticles/shape-ribbon/lazy"),
+            import("@tsparticles/updater-life/lazy"),
+        ]), emittersRegister = async (engine) => {
+            await loadEmittersPluginSimple(engine);
+            await loadEmittersShapeSquare(engine);
+        };
+        await Promise.all([
+            loadBasic(e),
+            loadMotionPlugin(e),
+            emittersRegister(e),
+            loadRibbonShape(e),
+            loadLifeUpdater(e),
+        ]);
+    });
+}
+async function initPlugins(engine) {
+    if (initPromise) {
+        return initPromise;
+    }
+    initPromise = doInitPlugins(engine);
+    return initPromise;
+}
+export async function ribbons(idOrOptions, ribbonsOptions) {
+    await initPlugins(tsParticles);
+    let options, id;
+    if (isString(idOrOptions)) {
+        id = idOrOptions;
+        options = ribbonsOptions ?? {};
+    }
+    else {
+        id = "ribbons";
+        options = idOrOptions ?? {};
+    }
+    return setRibbons(tsParticles, {
+        id,
+        options,
+    });
+}
+ribbons.create = async (canvas, options = {}) => {
+    await initPlugins(tsParticles);
+    const id = canvas?.getAttribute("id") ?? "ribbons";
+    canvas?.setAttribute("id", id);
+    await setRibbons(tsParticles, {
+        id,
+        canvas: canvas ?? undefined,
+        options,
+    });
+    return async (idOrOptions, subRibbonsOptions) => {
+        let subOptions, subId;
+        if (isString(idOrOptions)) {
+            subId = idOrOptions;
+            subOptions = subRibbonsOptions ?? options;
+        }
+        else {
+            subId = id;
+            subOptions = idOrOptions ?? {};
+        }
+        return setRibbons(tsParticles, {
+            id: subId,
+            canvas: canvas ?? undefined,
+            options: subOptions,
+        });
+    };
+};
+ribbons.init = async () => {
+    await initPlugins(tsParticles);
+};
+ribbons.version = "4.0.5";
+globalThis.ribbons = ribbons;

package/esm/types.js

@@ -0,0 +1 @@
+export {};

package/esm/utils.js

@@ -0,0 +1,195 @@
+import { RibbonsOptions } from "./RibbonsOptions.js";
+const sizeFactor = 8, emitterTop = 0, ids = new Map();
+export async function addEmitter(container, actualOptions) {
+    await container.addEmitter?.({
+        startCount: actualOptions.count,
+        position: {
+            x: actualOptions.position.x,
+            y: emitterTop,
+        },
+        shape: {
+            type: "square",
+        },
+        size: {
+            width: actualOptions.emitterSize.width,
+            height: actualOptions.emitterSize.height,
+        },
+        rate: {
+            delay: 0,
+            quantity: 0,
+        },
+        life: {
+            duration: 0.1,
+            count: 1,
+        },
+        particles: {
+            paint: {
+                fill: {
+                    color: {
+                        value: actualOptions.colors,
+                    },
+                    enable: true,
+                },
+            },
+            shape: {
+                type: "ribbon",
+                options: {
+                    ribbon: actualOptions.ribbonOptions,
+                },
+            },
+            life: {
+                count: 1,
+            },
+            size: {
+                value: sizeFactor * actualOptions.scalar,
+            },
+            move: {
+                direction: "bottom",
+                enable: true,
+                outModes: {
+                    top: "none",
+                    default: "destroy",
+                },
+                speed: {
+                    min: 4,
+                    max: 6,
+                },
+            },
+            roll: {
+                enable: false,
+            },
+            rotate: {
+                value: 0,
+                move: false,
+                animation: {
+                    enable: false,
+                },
+            },
+            tilt: {
+                enable: false,
+            },
+            wobble: {
+                enable: false,
+            },
+        },
+    });
+}
+export function convertOptions(actualOptions, params) {
+    return {
+        fullScreen: {
+            enable: !params.canvas,
+            zIndex: actualOptions.zIndex,
+        },
+        fpsLimit: 120,
+        particles: {
+            number: {
+                value: 0,
+            },
+            paint: {
+                fill: {
+                    color: {
+                        value: actualOptions.colors,
+                    },
+                    enable: true,
+                },
+            },
+            shape: {
+                type: "ribbon",
+                options: {
+                    ribbon: actualOptions.ribbonOptions,
+                },
+            },
+            size: {
+                value: sizeFactor * actualOptions.scalar,
+            },
+            links: {
+                enable: false,
+            },
+            life: {
+                count: 1,
+            },
+            move: {
+                direction: "bottom",
+                enable: true,
+                outModes: {
+                    top: "none",
+                    default: "destroy",
+                },
+                speed: {
+                    min: 4,
+                    max: 6,
+                },
+            },
+            roll: {
+                enable: false,
+            },
+            rotate: {
+                value: 0,
+                move: false,
+                animation: {
+                    enable: false,
+                },
+            },
+            tilt: {
+                enable: false,
+            },
+            wobble: {
+                enable: false,
+            },
+        },
+        motion: {
+            disable: actualOptions.disableForReducedMotion,
+        },
+        emitters: {
+            name: "ribbons",
+            startCount: actualOptions.count,
+            position: {
+                x: actualOptions.position.x,
+                y: emitterTop,
+            },
+            shape: {
+                type: "square",
+            },
+            size: {
+                width: actualOptions.emitterSize.width,
+                height: actualOptions.emitterSize.height,
+            },
+            rate: {
+                delay: 0,
+                quantity: 0,
+            },
+            life: {
+                duration: 0.1,
+                count: 1,
+            },
+        },
+    };
+}
+export async function setRibbons(engine, params) {
+    const actualOptions = new RibbonsOptions();
+    actualOptions.load(params.options);
+    let containerOrPromise = ids.get(params.id);
+    if (containerOrPromise instanceof Promise) {
+        await containerOrPromise;
+        containerOrPromise = ids.get(params.id);
+    }
+    const container = containerOrPromise;
+    if (container && !container.destroyed) {
+        const alias = container;
+        if ("addEmitter" in alias) {
+            await addEmitter(alias, actualOptions);
+            return container;
+        }
+    }
+    const create = async () => {
+        const particlesOptions = convertOptions(actualOptions, params), newContainer = await engine.load({
+            id: params.id,
+            element: params.canvas,
+            options: particlesOptions,
+        });
+        ids.set(params.id, newContainer);
+        return newContainer;
+    }, createPromise = create();
+    ids.set(params.id, createPromise);
+    return createPromise;
+}

package/package.json

@@ -0,0 +1,88 @@
+{
+  "name": "@tsparticles/ribbons",
+  "version": "4.0.5",
+  "description": "Easily create ready to use animated ribbons effects.",
+  "homepage": "https://particles.js.org",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/tsparticles/tsparticles.git",
+    "directory": "bundles/ribbons"
+  },
+  "keywords": [
+    "front-end",
+    "frontend",
+    "tsparticles",
+    "particles.js",
+    "particlesjs",
+    "particles",
+    "particle",
+    "canvas",
+    "typescript",
+    "javascript",
+    "animation",
+    "web",
+    "html5",
+    "animated",
+    "background",
+    "ribbon",
+    "ribbons",
+    "confetti",
+    "canvas-confetti"
+  ],
+  "author": "Matteo Bruni <matteo.bruni@me.com>",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/tsparticles/tsparticles/issues"
+  },
+  "funding": [
+    {
+      "type": "github",
+      "url": "https://github.com/sponsors/matteobruni"
+    },
+    {
+      "type": "github",
+      "url": "https://github.com/sponsors/tsparticles"
+    },
+    {
+      "type": "buymeacoffee",
+      "url": "https://www.buymeacoffee.com/matteobruni"
+    }
+  ],
+  "sideEffects": false,
+  "jsdelivr": "tsparticles.ribbons.bundle.min.js",
+  "unpkg": "tsparticles.ribbons.bundle.min.js",
+  "browser": "browser/index.js",
+  "main": "cjs/index.js",
+  "module": "esm/index.js",
+  "types": "types/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./types/index.d.ts",
+      "browser": "./browser/index.js",
+      "import": "./esm/index.js",
+      "require": "./cjs/index.js",
+      "default": "./esm/index.js"
+    },
+    "./lazy": {
+      "types": "./types/index.lazy.d.ts",
+      "browser": "./browser/index.lazy.js",
+      "import": "./esm/index.lazy.js",
+      "require": "./cjs/index.lazy.js",
+      "default": "./esm/index.lazy.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "dependencies": {
+    "@tsparticles/basic": "4.0.5",
+    "@tsparticles/engine": "4.0.5",
+    "@tsparticles/plugin-emitters": "4.0.5",
+    "@tsparticles/plugin-emitters-shape-square": "4.0.5",
+    "@tsparticles/plugin-motion": "4.0.5",
+    "@tsparticles/shape-ribbon": "4.0.5",
+    "@tsparticles/updater-life": "4.0.5"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "type": "module"
+}