@tsparticles/ribbons 4.1.2 → 4.2.0

package/README.md

@@ -38,8 +38,7 @@ import { ribbons } from "@tsparticles/ribbons";
 
 await ribbons({
   count: 5,
-  spread: 0,
-  position: { x: 50, y: 0 },
+  positionX: 50,
 });
 ```
 
@@ -64,11 +63,10 @@ await ribbons({
 Main options:
 
 - `count` _Integer (default: 5)_
-- `angle` _Number (default: 90)_
-- `spread` _Number (default: 0)_
-- `drift` _Number (default: 0)_
 - `ticks` _Number (default: 200)_
-- `position` _Object_ (`x`/`y`, default 50/0)
+- `positionX` _Number (default: 50, in percent)_
+- `position` _Object_ (`x`/`y`) — **deprecated**, use `positionX` instead; `y` is ignored (emitter always spawns at top-of-canvas)
+- `emitterSize` _Object_ (`width`/`height`, default 100/0, in percent) — spawn width is controlled by `emitterSize.width` (default 100); not always full width
 - `colors` _Array<String>_
 - `ribbonOptions` _Object_ (`particles.shape.options.ribbon`)
   - Includes `darken: { enable: true, value: 30 }` by default
@@ -77,9 +75,10 @@ Main options:
 - `disableForReducedMotion` _Boolean (default: true)_
 
 The `ribbons` bundle disables `roll`, `rotate`, `tilt`, and `wobble` on ribbon particles by default for better shape stability.
-The emitter uses a full-width top strip (`width: 100`, `height: 0`) and downward movement speed range (`4..6`) for a falling-from-top behavior.
+The emitter spawns from `positionX` across a strip whose width is controlled by `emitterSize.width` (default 100%), with downward movement for a falling-from-top effect. The emitter is always positioned at the top of the canvas.
 
 Deprecated aliases still accepted:
 
 - `particleCount` (use `count`)
-- `origin` (use `position`)
+- `position` (use `positionX`)
+- `origin` (use `positionX`)

package/browser/RibbonsOptions.js

@@ -1,31 +1,22 @@
-import { deepExtend, isArray, isNull, percentDenominator, } from "@tsparticles/engine";
+import { deepExtend, isArray, isNull, loadProperty, percentDenominator, } from "@tsparticles/engine";
 export class RibbonsOptions {
-    angle;
     colors;
     count;
     disableForReducedMotion;
-    drift;
     emitterSize;
-    position;
+    positionX;
     ribbonOptions;
     scalar;
-    spread;
     ticks;
     zIndex;
     constructor() {
-        this.angle = 90;
         this.count = 5;
-        this.spread = 0;
-        this.drift = 0;
         this.emitterSize = {
             width: 100,
             height: 0,
         };
+        this.positionX = 50;
         this.ticks = 200;
-        this.position = {
-            x: 50,
-            y: 0,
-        };
         this.colors = ["#FF0055", "#00D1FF", "#FFD23F", "#61FF7E", "#B284FF"];
         this.ribbonOptions = {
             angle: 45,
@@ -56,13 +47,12 @@ export class RibbonsOptions {
     }
     get origin() {
         return {
-            x: this.position.x / percentDenominator,
-            y: this.position.y / percentDenominator,
+            x: this.positionX / percentDenominator,
+            y: 0,
         };
     }
     set origin(value) {
-        this.position.x = value.x * percentDenominator;
-        this.position.y = value.y * percentDenominator;
+        this.positionX = value.x * percentDenominator;
     }
     get particleCount() {
         return this.count;
@@ -70,26 +60,24 @@ export class RibbonsOptions {
     set particleCount(value) {
         this.count = value;
     }
+    get position() {
+        return {
+            x: this.positionX,
+            y: 0,
+        };
+    }
+    set position(value) {
+        this.positionX = value.x;
+    }
     load(data) {
         if (isNull(data)) {
             return;
         }
-        if (data.angle !== undefined) {
-            this.angle = data.angle;
-        }
         const count = data.count ?? data.particleCount;
         if (count !== undefined) {
             this.count = count;
         }
-        if (data.spread !== undefined) {
-            this.spread = data.spread;
-        }
-        if (data.drift !== undefined) {
-            this.drift = data.drift;
-        }
-        if (data.ticks !== undefined) {
-            this.ticks = data.ticks;
-        }
+        loadProperty(this, "ticks", data.ticks);
         if (data.emitterSize) {
             if (data.emitterSize.width !== undefined) {
                 this.emitterSize.width = data.emitterSize.width;
@@ -98,20 +86,20 @@ export class RibbonsOptions {
                 this.emitterSize.height = data.emitterSize.height;
             }
         }
-        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;
+        loadProperty(this, "positionX", data.positionX);
+        if (data.positionX === undefined) {
+            const origin = data.origin;
+            if (origin && !data.position) {
+                data.position = {
+                    x: origin.x === undefined ? undefined : origin.x * percentDenominator,
+                    y: 0,
+                };
             }
-            if (position.y !== undefined) {
-                this.position.y = position.y;
+            const position = data.position;
+            if (position) {
+                if (position.x !== undefined) {
+                    this.positionX = position.x;
+                }
             }
         }
         if (data.colors !== undefined) {
@@ -125,14 +113,8 @@ export class RibbonsOptions {
         if (data.ribbonOptions !== undefined) {
             this.ribbonOptions = deepExtend({}, data.ribbonOptions);
         }
-        if (data.scalar !== undefined) {
-            this.scalar = data.scalar;
-        }
-        if (data.zIndex !== undefined) {
-            this.zIndex = data.zIndex;
-        }
-        if (data.disableForReducedMotion !== undefined) {
-            this.disableForReducedMotion = data.disableForReducedMotion;
-        }
+        loadProperty(this, "scalar", data.scalar);
+        loadProperty(this, "zIndex", data.zIndex);
+        loadProperty(this, "disableForReducedMotion", data.disableForReducedMotion);
     }
 }

package/browser/ribbons.js

@@ -8,7 +8,7 @@ import { loadRibbonShape } from "@tsparticles/shape-ribbon";
 import { setRibbons } from "./utils.js";
 let initPromise = null;
 async function doInitPlugins(engine) {
-    engine.checkVersion("4.1.2");
+    engine.checkVersion("4.2.0");
     await engine.pluginManager.register(async (e) => {
         const emittersRegister = async (engine) => {
             await loadEmittersPluginSimple(engine);
@@ -75,5 +75,5 @@ ribbons.create = async (canvas, options = {}) => {
 ribbons.init = async () => {
     await initPlugins(tsParticles);
 };
-ribbons.version = "4.1.2";
+ribbons.version = "4.2.0";
 globalThis.ribbons = ribbons;

package/browser/ribbons.lazy.js

@@ -2,7 +2,7 @@ import { isString, tsParticles } from "@tsparticles/engine/lazy";
 import { setRibbons } from "./utils.js";
 let initPromise = null;
 async function doInitPlugins(engine) {
-    engine.checkVersion("4.1.2");
+    engine.checkVersion("4.2.0");
     await engine.pluginManager.register(async (e) => {
         const [{ loadBasic }, { loadEmittersPluginSimple }, { loadEmittersShapeSquare }, { loadMotionPlugin }, { loadRibbonShape }, { loadLifeUpdater },] = await Promise.all([
             import("@tsparticles/basic/lazy"),
@@ -76,5 +76,5 @@ ribbons.create = async (canvas, options = {}) => {
 ribbons.init = async () => {
     await initPlugins(tsParticles);
 };
-ribbons.version = "4.1.2";
+ribbons.version = "4.2.0";
 globalThis.ribbons = ribbons;

package/browser/utils.js

@@ -4,7 +4,7 @@ export async function addEmitter(container, actualOptions) {
     await container.addEmitter?.({
         startCount: actualOptions.count,
         position: {
-            x: actualOptions.position.x,
+            x: actualOptions.positionX,
             y: emitterTop,
         },
         shape: {
@@ -144,7 +144,7 @@ export function convertOptions(actualOptions, params) {
             name: "ribbons",
             startCount: actualOptions.count,
             position: {
-                x: actualOptions.position.x,
+                x: actualOptions.positionX,
                 y: emitterTop,
             },
             shape: {

package/cjs/RibbonsOptions.js

@@ -1,31 +1,22 @@
-import { deepExtend, isArray, isNull, percentDenominator, } from "@tsparticles/engine";
+import { deepExtend, isArray, isNull, loadProperty, percentDenominator, } from "@tsparticles/engine";
 export class RibbonsOptions {
-    angle;
     colors;
     count;
     disableForReducedMotion;
-    drift;
     emitterSize;
-    position;
+    positionX;
     ribbonOptions;
     scalar;
-    spread;
     ticks;
     zIndex;
     constructor() {
-        this.angle = 90;
         this.count = 5;
-        this.spread = 0;
-        this.drift = 0;
         this.emitterSize = {
             width: 100,
             height: 0,
         };
+        this.positionX = 50;
         this.ticks = 200;
-        this.position = {
-            x: 50,
-            y: 0,
-        };
         this.colors = ["#FF0055", "#00D1FF", "#FFD23F", "#61FF7E", "#B284FF"];
         this.ribbonOptions = {
             angle: 45,
@@ -56,13 +47,12 @@ export class RibbonsOptions {
     }
     get origin() {
         return {
-            x: this.position.x / percentDenominator,
-            y: this.position.y / percentDenominator,
+            x: this.positionX / percentDenominator,
+            y: 0,
         };
     }
     set origin(value) {
-        this.position.x = value.x * percentDenominator;
-        this.position.y = value.y * percentDenominator;
+        this.positionX = value.x * percentDenominator;
     }
     get particleCount() {
         return this.count;
@@ -70,26 +60,24 @@ export class RibbonsOptions {
     set particleCount(value) {
         this.count = value;
     }
+    get position() {
+        return {
+            x: this.positionX,
+            y: 0,
+        };
+    }
+    set position(value) {
+        this.positionX = value.x;
+    }
     load(data) {
         if (isNull(data)) {
             return;
         }
-        if (data.angle !== undefined) {
-            this.angle = data.angle;
-        }
         const count = data.count ?? data.particleCount;
         if (count !== undefined) {
             this.count = count;
         }
-        if (data.spread !== undefined) {
-            this.spread = data.spread;
-        }
-        if (data.drift !== undefined) {
-            this.drift = data.drift;
-        }
-        if (data.ticks !== undefined) {
-            this.ticks = data.ticks;
-        }
+        loadProperty(this, "ticks", data.ticks);
         if (data.emitterSize) {
             if (data.emitterSize.width !== undefined) {
                 this.emitterSize.width = data.emitterSize.width;
@@ -98,20 +86,20 @@ export class RibbonsOptions {
                 this.emitterSize.height = data.emitterSize.height;
             }
         }
-        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;
+        loadProperty(this, "positionX", data.positionX);
+        if (data.positionX === undefined) {
+            const origin = data.origin;
+            if (origin && !data.position) {
+                data.position = {
+                    x: origin.x === undefined ? undefined : origin.x * percentDenominator,
+                    y: 0,
+                };
             }
-            if (position.y !== undefined) {
-                this.position.y = position.y;
+            const position = data.position;
+            if (position) {
+                if (position.x !== undefined) {
+                    this.positionX = position.x;
+                }
             }
         }
         if (data.colors !== undefined) {
@@ -125,14 +113,8 @@ export class RibbonsOptions {
         if (data.ribbonOptions !== undefined) {
             this.ribbonOptions = deepExtend({}, data.ribbonOptions);
         }
-        if (data.scalar !== undefined) {
-            this.scalar = data.scalar;
-        }
-        if (data.zIndex !== undefined) {
-            this.zIndex = data.zIndex;
-        }
-        if (data.disableForReducedMotion !== undefined) {
-            this.disableForReducedMotion = data.disableForReducedMotion;
-        }
+        loadProperty(this, "scalar", data.scalar);
+        loadProperty(this, "zIndex", data.zIndex);
+        loadProperty(this, "disableForReducedMotion", data.disableForReducedMotion);
     }
 }

package/cjs/ribbons.js

@@ -8,7 +8,7 @@ import { loadRibbonShape } from "@tsparticles/shape-ribbon";
 import { setRibbons } from "./utils.js";
 let initPromise = null;
 async function doInitPlugins(engine) {
-    engine.checkVersion("4.1.2");
+    engine.checkVersion("4.2.0");
     await engine.pluginManager.register(async (e) => {
         const emittersRegister = async (engine) => {
             await loadEmittersPluginSimple(engine);
@@ -75,5 +75,5 @@ ribbons.create = async (canvas, options = {}) => {
 ribbons.init = async () => {
     await initPlugins(tsParticles);
 };
-ribbons.version = "4.1.2";
+ribbons.version = "4.2.0";
 globalThis.ribbons = ribbons;

package/cjs/ribbons.lazy.js

@@ -2,7 +2,7 @@ import { isString, tsParticles } from "@tsparticles/engine/lazy";
 import { setRibbons } from "./utils.js";
 let initPromise = null;
 async function doInitPlugins(engine) {
-    engine.checkVersion("4.1.2");
+    engine.checkVersion("4.2.0");
     await engine.pluginManager.register(async (e) => {
         const [{ loadBasic }, { loadEmittersPluginSimple }, { loadEmittersShapeSquare }, { loadMotionPlugin }, { loadRibbonShape }, { loadLifeUpdater },] = await Promise.all([
             import("@tsparticles/basic/lazy"),
@@ -76,5 +76,5 @@ ribbons.create = async (canvas, options = {}) => {
 ribbons.init = async () => {
     await initPlugins(tsParticles);
 };
-ribbons.version = "4.1.2";
+ribbons.version = "4.2.0";
 globalThis.ribbons = ribbons;

package/cjs/utils.js

@@ -4,7 +4,7 @@ export async function addEmitter(container, actualOptions) {
     await container.addEmitter?.({
         startCount: actualOptions.count,
         position: {
-            x: actualOptions.position.x,
+            x: actualOptions.positionX,
             y: emitterTop,
         },
         shape: {
@@ -144,7 +144,7 @@ export function convertOptions(actualOptions, params) {
             name: "ribbons",
             startCount: actualOptions.count,
             position: {
-                x: actualOptions.position.x,
+                x: actualOptions.positionX,
                 y: emitterTop,
             },
             shape: {

package/esm/RibbonsOptions.js

@@ -1,31 +1,22 @@
-import { deepExtend, isArray, isNull, percentDenominator, } from "@tsparticles/engine";
+import { deepExtend, isArray, isNull, loadProperty, percentDenominator, } from "@tsparticles/engine";
 export class RibbonsOptions {
-    angle;
     colors;
     count;
     disableForReducedMotion;
-    drift;
     emitterSize;
-    position;
+    positionX;
     ribbonOptions;
     scalar;
-    spread;
     ticks;
     zIndex;
     constructor() {
-        this.angle = 90;
         this.count = 5;
-        this.spread = 0;
-        this.drift = 0;
         this.emitterSize = {
             width: 100,
             height: 0,
         };
+        this.positionX = 50;
         this.ticks = 200;
-        this.position = {
-            x: 50,
-            y: 0,
-        };
         this.colors = ["#FF0055", "#00D1FF", "#FFD23F", "#61FF7E", "#B284FF"];
         this.ribbonOptions = {
             angle: 45,
@@ -56,13 +47,12 @@ export class RibbonsOptions {
     }
     get origin() {
         return {
-            x: this.position.x / percentDenominator,
-            y: this.position.y / percentDenominator,
+            x: this.positionX / percentDenominator,
+            y: 0,
         };
     }
     set origin(value) {
-        this.position.x = value.x * percentDenominator;
-        this.position.y = value.y * percentDenominator;
+        this.positionX = value.x * percentDenominator;
     }
     get particleCount() {
         return this.count;
@@ -70,26 +60,24 @@ export class RibbonsOptions {
     set particleCount(value) {
         this.count = value;
     }
+    get position() {
+        return {
+            x: this.positionX,
+            y: 0,
+        };
+    }
+    set position(value) {
+        this.positionX = value.x;
+    }
     load(data) {
         if (isNull(data)) {
             return;
         }
-        if (data.angle !== undefined) {
-            this.angle = data.angle;
-        }
         const count = data.count ?? data.particleCount;
         if (count !== undefined) {
             this.count = count;
         }
-        if (data.spread !== undefined) {
-            this.spread = data.spread;
-        }
-        if (data.drift !== undefined) {
-            this.drift = data.drift;
-        }
-        if (data.ticks !== undefined) {
-            this.ticks = data.ticks;
-        }
+        loadProperty(this, "ticks", data.ticks);
         if (data.emitterSize) {
             if (data.emitterSize.width !== undefined) {
                 this.emitterSize.width = data.emitterSize.width;
@@ -98,20 +86,20 @@ export class RibbonsOptions {
                 this.emitterSize.height = data.emitterSize.height;
             }
         }
-        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;
+        loadProperty(this, "positionX", data.positionX);
+        if (data.positionX === undefined) {
+            const origin = data.origin;
+            if (origin && !data.position) {
+                data.position = {
+                    x: origin.x === undefined ? undefined : origin.x * percentDenominator,
+                    y: 0,
+                };
             }
-            if (position.y !== undefined) {
-                this.position.y = position.y;
+            const position = data.position;
+            if (position) {
+                if (position.x !== undefined) {
+                    this.positionX = position.x;
+                }
             }
         }
         if (data.colors !== undefined) {
@@ -125,14 +113,8 @@ export class RibbonsOptions {
         if (data.ribbonOptions !== undefined) {
             this.ribbonOptions = deepExtend({}, data.ribbonOptions);
         }
-        if (data.scalar !== undefined) {
-            this.scalar = data.scalar;
-        }
-        if (data.zIndex !== undefined) {
-            this.zIndex = data.zIndex;
-        }
-        if (data.disableForReducedMotion !== undefined) {
-            this.disableForReducedMotion = data.disableForReducedMotion;
-        }
+        loadProperty(this, "scalar", data.scalar);
+        loadProperty(this, "zIndex", data.zIndex);
+        loadProperty(this, "disableForReducedMotion", data.disableForReducedMotion);
     }
 }

package/esm/ribbons.js

@@ -8,7 +8,7 @@ import { loadRibbonShape } from "@tsparticles/shape-ribbon";
 import { setRibbons } from "./utils.js";
 let initPromise = null;
 async function doInitPlugins(engine) {
-    engine.checkVersion("4.1.2");
+    engine.checkVersion("4.2.0");
     await engine.pluginManager.register(async (e) => {
         const emittersRegister = async (engine) => {
             await loadEmittersPluginSimple(engine);
@@ -75,5 +75,5 @@ ribbons.create = async (canvas, options = {}) => {
 ribbons.init = async () => {
     await initPlugins(tsParticles);
 };
-ribbons.version = "4.1.2";
+ribbons.version = "4.2.0";
 globalThis.ribbons = ribbons;

package/esm/ribbons.lazy.js

@@ -2,7 +2,7 @@ import { isString, tsParticles } from "@tsparticles/engine/lazy";
 import { setRibbons } from "./utils.js";
 let initPromise = null;
 async function doInitPlugins(engine) {
-    engine.checkVersion("4.1.2");
+    engine.checkVersion("4.2.0");
     await engine.pluginManager.register(async (e) => {
         const [{ loadBasic }, { loadEmittersPluginSimple }, { loadEmittersShapeSquare }, { loadMotionPlugin }, { loadRibbonShape }, { loadLifeUpdater },] = await Promise.all([
             import("@tsparticles/basic/lazy"),
@@ -76,5 +76,5 @@ ribbons.create = async (canvas, options = {}) => {
 ribbons.init = async () => {
     await initPlugins(tsParticles);
 };
-ribbons.version = "4.1.2";
+ribbons.version = "4.2.0";
 globalThis.ribbons = ribbons;

package/esm/utils.js

@@ -4,7 +4,7 @@ export async function addEmitter(container, actualOptions) {
     await container.addEmitter?.({
         startCount: actualOptions.count,
         position: {
-            x: actualOptions.position.x,
+            x: actualOptions.positionX,
             y: emitterTop,
         },
         shape: {
@@ -144,7 +144,7 @@ export function convertOptions(actualOptions, params) {
             name: "ribbons",
             startCount: actualOptions.count,
             position: {
-                x: actualOptions.position.x,
+                x: actualOptions.positionX,
                 y: emitterTop,
             },
             shape: {