diff --git a/bundles/ribbons/README.md b/bundles/ribbons/README.md index b98e1da653e..b475ab27ce3 100644 --- a/bundles/ribbons/README.md +++ b/bundles/ribbons/README.md @@ -64,7 +64,8 @@ Main options: - `count` _Integer (default: 5)_ - `ticks` _Number (default: 200)_ -- `position` _Object_ (`x`/`y`, default 50/0) +- `position` _Object_ (`x`/`y`, default 50/0, in percent) +- `emitterSize` _Object_ (`width`/`height`, default 100/0, in percent) - `colors` _Array<String>_ - `ribbonOptions` _Object_ (`particles.shape.options.ribbon`) - Includes `darken: { enable: true, value: 30 }` by default @@ -73,7 +74,7 @@ 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 the configured `position` using a full-width strip and downward movement for a falling-from-top effect. Deprecated aliases still accepted: diff --git a/bundles/ribbons/src/IRibbonsOptions.ts b/bundles/ribbons/src/IRibbonsOptions.ts index f3feb96e646..f1473b74b07 100644 --- a/bundles/ribbons/src/IRibbonsOptions.ts +++ b/bundles/ribbons/src/IRibbonsOptions.ts @@ -2,9 +2,6 @@ import type { ICoordinates, IDimension, IShapeValues, SingleOrMultiple } from "@ /** Ribbons options interface */ export interface IRibbonsOptions { - /** Ribbons emission angle */ - angle: number; - /** Ribbon colors */ colors: SingleOrMultiple; @@ -14,9 +11,6 @@ export interface IRibbonsOptions { /** Disables ribbons for users who prefer reduced motion */ disableForReducedMotion: boolean; - /** Ribbons drift */ - drift: number; - /** Emitter size for particle spawn area (in percent). Default: { width: 100, height: 0 } */ emitterSize: IDimension; @@ -39,9 +33,6 @@ export interface IRibbonsOptions { /** Ribbons size scalar */ scalar: number; - /** Ribbons spread */ - spread: number; - /** Number of animation ticks */ ticks: number; diff --git a/bundles/ribbons/src/RibbonsOptions.ts b/bundles/ribbons/src/RibbonsOptions.ts index 9ca9efd5e23..21f9825b0bc 100644 --- a/bundles/ribbons/src/RibbonsOptions.ts +++ b/bundles/ribbons/src/RibbonsOptions.ts @@ -14,9 +14,6 @@ import type { IRibbonsOptions } from "./IRibbonsOptions.js"; /** Ribbons options class */ export class RibbonsOptions implements IRibbonsOptions, IOptionLoader { - /** Ribbons angle */ - angle: number; - /** Ribbon colors */ colors: SingleOrMultiple; @@ -26,9 +23,6 @@ export class RibbonsOptions implements IRibbonsOptions, IOptionLoader { - ribbons({ - count: 2, - spread: 60, - angle: 60, - }); + ribbons(); }, 300); setTimeout(() => { - ribbons({ - count: 2, - spread: 60, - angle: 120, - }); + ribbons(); }, 600); }, }, diff --git a/websites/website/docs/de/demos/recipes/ribbons.md b/websites/website/docs/de/demos/recipes/ribbons.md index e5cd6a78c5a..0b31f3e6d37 100644 --- a/websites/website/docs/de/demos/recipes/ribbons.md +++ b/websites/website/docs/de/demos/recipes/ribbons.md @@ -17,7 +17,6 @@ import { ribbons } from "@tsparticles/ribbons"; await ribbons({ count: 5, - spread: 0, colors: ["#FF0055", "#00D1FF", "#FFD23F", "#61FF7E", "#B284FF"], }); ``` diff --git a/websites/website/docs/demos/recipes/ribbons.md b/websites/website/docs/demos/recipes/ribbons.md index 39a94a51018..4b76f63f0f2 100644 --- a/websites/website/docs/demos/recipes/ribbons.md +++ b/websites/website/docs/demos/recipes/ribbons.md @@ -17,7 +17,6 @@ import { ribbons } from "@tsparticles/ribbons"; await ribbons({ count: 5, - spread: 0, colors: ["#FF0055", "#00D1FF", "#FFD23F", "#61FF7E", "#B284FF"], }); ``` diff --git a/websites/website/docs/es/demos/recipes/ribbons.md b/websites/website/docs/es/demos/recipes/ribbons.md index 2e27bf1de45..344fde984c0 100644 --- a/websites/website/docs/es/demos/recipes/ribbons.md +++ b/websites/website/docs/es/demos/recipes/ribbons.md @@ -17,7 +17,6 @@ import { ribbons } from "@tsparticles/ribbons"; await ribbons({ count: 5, - spread: 0, colors: ["#FF0055", "#00D1FF", "#FFD23F", "#61FF7E", "#B284FF"], }); ``` diff --git a/websites/website/docs/fr/demos/recipes/ribbons.md b/websites/website/docs/fr/demos/recipes/ribbons.md index c67b69e7d36..8dc7815b5a5 100644 --- a/websites/website/docs/fr/demos/recipes/ribbons.md +++ b/websites/website/docs/fr/demos/recipes/ribbons.md @@ -17,7 +17,6 @@ import { ribbons } from "@tsparticles/ribbons"; await ribbons({ count: 5, - spread: 0, colors: ["#FF0055", "#00D1FF", "#FFD23F", "#61FF7E", "#B284FF"], }); ``` diff --git a/websites/website/docs/hi/demos/recipes/ribbons.md b/websites/website/docs/hi/demos/recipes/ribbons.md index 0cebac41e9c..bc63081a08c 100644 --- a/websites/website/docs/hi/demos/recipes/ribbons.md +++ b/websites/website/docs/hi/demos/recipes/ribbons.md @@ -17,7 +17,6 @@ import { ribbons } from "@tsparticles/ribbons"; await ribbons({ count: 5, - spread: 0, colors: ["#FF0055", "#00D1FF", "#FFD23F", "#61FF7E", "#B284FF"], }); ``` diff --git a/websites/website/docs/it/demos/recipes/ribbons.md b/websites/website/docs/it/demos/recipes/ribbons.md index 707525248f4..5b22fb2a927 100644 --- a/websites/website/docs/it/demos/recipes/ribbons.md +++ b/websites/website/docs/it/demos/recipes/ribbons.md @@ -17,7 +17,6 @@ import { ribbons } from "@tsparticles/ribbons"; await ribbons({ count: 5, - spread: 0, colors: ["#FF0055", "#00D1FF", "#FFD23F", "#61FF7E", "#B284FF"], }); ``` diff --git a/websites/website/docs/ja/demos/recipes/ribbons.md b/websites/website/docs/ja/demos/recipes/ribbons.md index 4f3458532fb..5a3b4aac379 100644 --- a/websites/website/docs/ja/demos/recipes/ribbons.md +++ b/websites/website/docs/ja/demos/recipes/ribbons.md @@ -17,7 +17,6 @@ import { ribbons } from "@tsparticles/ribbons"; await ribbons({ count: 5, - spread: 0, colors: ["#FF0055", "#00D1FF", "#FFD23F", "#61FF7E", "#B284FF"], }); ``` diff --git a/websites/website/docs/pt/demos/recipes/ribbons.md b/websites/website/docs/pt/demos/recipes/ribbons.md index d2d2cb47935..6980c654595 100644 --- a/websites/website/docs/pt/demos/recipes/ribbons.md +++ b/websites/website/docs/pt/demos/recipes/ribbons.md @@ -17,7 +17,6 @@ import { ribbons } from "@tsparticles/ribbons"; await ribbons({ count: 5, - spread: 0, colors: ["#FF0055", "#00D1FF", "#FFD23F", "#61FF7E", "#B284FF"], }); ``` diff --git a/websites/website/docs/ru/demos/recipes/ribbons.md b/websites/website/docs/ru/demos/recipes/ribbons.md index bd2e87579c4..e4fb09530b2 100644 --- a/websites/website/docs/ru/demos/recipes/ribbons.md +++ b/websites/website/docs/ru/demos/recipes/ribbons.md @@ -17,7 +17,6 @@ import { ribbons } from "@tsparticles/ribbons"; await ribbons({ count: 5, - spread: 0, colors: ["#FF0055", "#00D1FF", "#FFD23F", "#61FF7E", "#B284FF"], }); ``` diff --git a/websites/website/docs/zh/demos/recipes/ribbons.md b/websites/website/docs/zh/demos/recipes/ribbons.md index 06acb5ac8f9..bd25a885bdf 100644 --- a/websites/website/docs/zh/demos/recipes/ribbons.md +++ b/websites/website/docs/zh/demos/recipes/ribbons.md @@ -17,7 +17,6 @@ import { ribbons } from "@tsparticles/ribbons"; await ribbons({ count: 5, - spread: 0, colors: ["#FF0055", "#00D1FF", "#FFD23F", "#61FF7E", "#B284FF"], }); ``` diff --git a/wrappers/astro/package.dist.json b/wrappers/astro/package.dist.json index a8def028cb9..12eecf44a14 100644 --- a/wrappers/astro/package.dist.json +++ b/wrappers/astro/package.dist.json @@ -1,6 +1,6 @@ { "name": "@tsparticles/astro", - "version": "4.0.5", + "version": "4.1.3", "description": "Official tsParticles Astro Component - Easily create highly customizable particle, confetti and fireworks animations and use them as animated backgrounds for your website. Ready to use components available also for Web Components, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, React.js, Riot.js, Solid.js, Inferno.", "repository": { "url": "git+https://github.com/tsparticles/tsparticles.git", diff --git a/wrappers/ember/package.dist.json b/wrappers/ember/package.dist.json index be6eeef4f89..f81be098684 100644 --- a/wrappers/ember/package.dist.json +++ b/wrappers/ember/package.dist.json @@ -1,6 +1,6 @@ { "name": "@tsparticles/ember", - "version": "4.0.5", + "version": "4.1.3", "description": "Ember.js component for using tsParticles", "repository": { "type": "git", diff --git a/wrappers/inferno/package.dist.json b/wrappers/inferno/package.dist.json index 0936bea8e27..48230ee1ae3 100644 --- a/wrappers/inferno/package.dist.json +++ b/wrappers/inferno/package.dist.json @@ -1,6 +1,6 @@ { "name": "@tsparticles/inferno", - "version": "4.0.5", + "version": "4.1.3", "description": "Official tsParticles Inferno Component - Easily create highly customizable particle, confetti and fireworks animations and use them as animated backgrounds for your website. Ready to use components available also for Web Components, React, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Riot.js, Solid.js.", "homepage": "https://particles.js.org", "repository": { diff --git a/wrappers/jquery/package.dist.json b/wrappers/jquery/package.dist.json index 27bbbd28503..bed0eb72fe9 100644 --- a/wrappers/jquery/package.dist.json +++ b/wrappers/jquery/package.dist.json @@ -1,6 +1,6 @@ { "name": "@tsparticles/jquery", - "version": "4.0.5", + "version": "4.1.3", "description": "Official tsParticles jQuery Plugin - Easily create highly customizable particle, confetti and fireworks animations and use them as animated backgrounds for your website. Ready to use components available also for Web Components, React, Vue.js (2.x and 3.x), Angular, Svelte, Preact, Riot.js, Solid.js, Inferno.", "homepage": "https://particles.js.org", "repository": { diff --git a/wrappers/nextjs/package.dist.json b/wrappers/nextjs/package.dist.json index fe8d8a88e06..e7cd854eb31 100644 --- a/wrappers/nextjs/package.dist.json +++ b/wrappers/nextjs/package.dist.json @@ -1,6 +1,6 @@ { "name": "@tsparticles/nextjs", - "version": "4.0.5", + "version": "4.1.3", "type": "module", "repository": { "type": "git", diff --git a/wrappers/nuxt2/package.dist.json b/wrappers/nuxt2/package.dist.json index 10d75921d84..8dbbb32f3ea 100644 --- a/wrappers/nuxt2/package.dist.json +++ b/wrappers/nuxt2/package.dist.json @@ -1,6 +1,6 @@ { "name": "@tsparticles/nuxt2", - "version": "4.0.5", + "version": "4.1.3", "repository": { "type": "git", "url": "git+https://github.com/tsparticles/tsparticles.git", diff --git a/wrappers/nuxt3/package.dist.json b/wrappers/nuxt3/package.dist.json index 08534409069..670a1c211f4 100644 --- a/wrappers/nuxt3/package.dist.json +++ b/wrappers/nuxt3/package.dist.json @@ -1,6 +1,6 @@ { "name": "@tsparticles/nuxt3", - "version": "4.0.5", + "version": "4.1.3", "repository": { "type": "git", "url": "git+https://github.com/tsparticles/tsparticles.git", diff --git a/wrappers/nuxt4/package.dist.json b/wrappers/nuxt4/package.dist.json index 81e75d2674c..6451d4ed085 100644 --- a/wrappers/nuxt4/package.dist.json +++ b/wrappers/nuxt4/package.dist.json @@ -1,6 +1,6 @@ { "name": "@tsparticles/nuxt4", - "version": "4.0.5", + "version": "4.1.3", "repository": { "type": "git", "url": "git+https://github.com/tsparticles/tsparticles.git", diff --git a/wrappers/react/package.dist.json b/wrappers/react/package.dist.json index 4d9d47877d9..cda06b0f03b 100644 --- a/wrappers/react/package.dist.json +++ b/wrappers/react/package.dist.json @@ -1,6 +1,6 @@ { "name": "@tsparticles/react", - "version": "4.0.5", + "version": "4.1.3", "type": "module", "repository": { "type": "git", diff --git a/wrappers/riot/package.dist.json b/wrappers/riot/package.dist.json index d70292d635f..1ca07c7ec64 100644 --- a/wrappers/riot/package.dist.json +++ b/wrappers/riot/package.dist.json @@ -1,6 +1,6 @@ { "name": "@tsparticles/riot", - "version": "4.0.5", + "version": "4.1.3", "description": "Official tsParticles Riot Component - Easily create highly customizable particle, confetti and fireworks animations and use them as animated backgrounds for your website. Ready to use components available also for Web Components, React, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno.", "repository": { "type": "git", diff --git a/wrappers/solid/package.dist.json b/wrappers/solid/package.dist.json index f8392ad63a3..46d090a8129 100644 --- a/wrappers/solid/package.dist.json +++ b/wrappers/solid/package.dist.json @@ -1,6 +1,6 @@ { "name": "@tsparticles/solid", - "version": "4.0.5", + "version": "4.1.3", "description": "Official tsParticles Solid Component - Easily create highly customizable particle, confetti and fireworks animations and use them as animated backgrounds for your website. Ready to use components available also for React, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno, Riot.js.", "license": "MIT", "author": "Matteo Bruni ", diff --git a/wrappers/stencil/package.dist.json b/wrappers/stencil/package.dist.json index 3ba6aed0c22..0add79518b1 100644 --- a/wrappers/stencil/package.dist.json +++ b/wrappers/stencil/package.dist.json @@ -1,6 +1,6 @@ { "name": "@tsparticles/stencil", - "version": "4.0.5", + "version": "4.1.3", "description": "Official tsParticles Stencil Component - Easily create highly customizable particle, confetti and fireworks animations and use them as animated backgrounds for your website.", "homepage": "https://particles.js.org", "repository": { diff --git a/wrappers/svelte/CHANGELOG.md b/wrappers/svelte/CHANGELOG.md index fd62b03f9ae..ff1e60c6e57 100644 --- a/wrappers/svelte/CHANGELOG.md +++ b/wrappers/svelte/CHANGELOG.md @@ -7,10 +7,6 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline **Note:** Version bump only for package @tsparticles/svelte - - - - ## [4.1.2](https://github.com/tsparticles/tsparticles/compare/v4.1.1...v4.1.2) (2026-06-01) **Note:** Version bump only for package @tsparticles/svelte diff --git a/wrappers/svelte/package.dist.json b/wrappers/svelte/package.dist.json index 1fa7dd96cd4..d540a62a712 100644 --- a/wrappers/svelte/package.dist.json +++ b/wrappers/svelte/package.dist.json @@ -1,80 +1,80 @@ { - "name": "@tsparticles/svelte", - "version": "4.0.5", - "description": "Official tsParticles Svelte Component - Easily create highly customizable particle, confetti and fireworks animations and use them as animated backgrounds for your website. Ready to use components available also for Web Components, React, Vue.js (2.x and 3.x), Angular, jQuery, Preact, Riot.js, Solid.js, Inferno.", - "repository": { - "type": "git", - "url": "git+https://github.com/tsparticles/tsparticles.git", - "directory": "wrappers/svelte" - }, - "keywords": [ - "front-end", - "frontend", - "tsparticles", - "particles.js", - "particlesjs", - "particles", - "particle", - "canvas", - "jsparticles", - "xparticles", - "particles-js", - "particles-bg", - "particles-bg-vue", - "particles-ts", - "particles.ts", - "react-particles-js", - "react-particles.js", - "react-particles", - "react", - "reactjs", - "vue-particles", - "ngx-particles", - "angular-particles", - "particleground", - "vue", - "vuejs", - "preact", - "preactjs", - "jquery", - "angularjs", - "angular", - "typescript", - "javascript", - "animation", - "web", - "html5", - "web-design", - "webdesign", - "css", - "html", - "css3", - "animated", - "background", - "confetti", - "canvas", - "fireworks", - "fireworks-js", - "confetti-js", - "confettijs", - "fireworksjs", - "canvas-confetti" - ], - "author": "Matteo Bruni ", - "license": "MIT", - "type": "module", - "types": "/index.d.ts", - "exports": { - ".": { - "types": "./index.d.ts", - "svelte": "./index.js" - } - }, - "peerDependencies": { - "svelte": "^4.2.17", - "@tsparticles/engine": "__VERSION__" - }, - "publishConfig": { - "access": "public" - } + "name": "@tsparticles/svelte", + "version": "4.1.3", + "description": "Official tsParticles Svelte Component - Easily create highly customizable particle, confetti and fireworks animations and use them as animated backgrounds for your website. Ready to use components available also for Web Components, React, Vue.js (2.x and 3.x), Angular, jQuery, Preact, Riot.js, Solid.js, Inferno.", + "repository": { + "type": "git", + "url": "git+https://github.com/tsparticles/tsparticles.git", + "directory": "wrappers/svelte" + }, + "keywords": [ + "front-end", + "frontend", + "tsparticles", + "particles.js", + "particlesjs", + "particles", + "particle", + "canvas", + "jsparticles", + "xparticles", + "particles-js", + "particles-bg", + "particles-bg-vue", + "particles-ts", + "particles.ts", + "react-particles-js", + "react-particles.js", + "react-particles", + "react", + "reactjs", + "vue-particles", + "ngx-particles", + "angular-particles", + "particleground", + "vue", + "vuejs", + "preact", + "preactjs", + "jquery", + "angularjs", + "angular", + "typescript", + "javascript", + "animation", + "web", + "html5", + "web-design", + "webdesign", + "css", + "html", + "css3", + "animated", + "background", + "confetti", + "canvas", + "fireworks", + "fireworks-js", + "confetti-js", + "confettijs", + "fireworksjs", + "canvas-confetti" + ], + "author": "Matteo Bruni ", + "license": "MIT", + "type": "module", + "types": "/index.d.ts", + "exports": { + ".": { + "types": "./index.d.ts", + "svelte": "./index.js" + } + }, + "peerDependencies": { + "svelte": "^4.2.17", + "@tsparticles/engine": "__VERSION__" + }, + "publishConfig": { + "access": "public" + } } diff --git a/wrappers/vue2/package.dist.json b/wrappers/vue2/package.dist.json index b18ca6d7182..4d5426fc1bc 100644 --- a/wrappers/vue2/package.dist.json +++ b/wrappers/vue2/package.dist.json @@ -1,6 +1,6 @@ { "name": "@tsparticles/vue2", - "version": "4.0.5", + "version": "4.1.3", "description": "Official tsParticles Vue.js 2.x Component - Easily create highly customizable particle, confetti and fireworks animations and use them as animated backgrounds for your website. Ready to use components available also for Web Components, React, Vue.js 3.x, Angular, Svelte, jQuery, Preact, Riot.js, Solid.js, Inferno.", "homepage": "https://particles.js.org", "repository": { diff --git a/wrappers/vue3/package.dist.json b/wrappers/vue3/package.dist.json index 2bb4887e54f..f3406deeca5 100644 --- a/wrappers/vue3/package.dist.json +++ b/wrappers/vue3/package.dist.json @@ -1,6 +1,6 @@ { "name": "@tsparticles/vue3", - "version": "4.0.5", + "version": "4.1.3", "description": "Official tsParticles Vue.js 3.x Component - Easily create highly customizable particle, confetti and fireworks animations and use them as animated backgrounds for your website. Ready to use components available also for Web Components, React, Vue.js 2.x, Angular, Svelte, jQuery, Preact, Riot.js, Solid.js, Inferno.", "homepage": "https://particles.js.org", "repository": { diff --git a/wrappers/webcomponents/package.dist.json b/wrappers/webcomponents/package.dist.json index ca5db23e184..f9307f08ea6 100644 --- a/wrappers/webcomponents/package.dist.json +++ b/wrappers/webcomponents/package.dist.json @@ -1,6 +1,6 @@ { "name": "@tsparticles/webcomponents", - "version": "4.0.5", + "version": "4.1.3", "description": "Official tsParticles Web Component - Easily create highly customizable particle, confetti and fireworks animations and use them as animated backgrounds for your website. Ready to use components available also for React, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Riot.js, Solid.js, Inferno.", "homepage": "https://particles.js.org", "repository": {