@tsparticles/confetti 3.0.0-beta.3 → 3.0.0-beta.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (19) hide show
  1. package/README.md +14 -9
  2. package/browser/ConfettiOptions.js +4 -0
  3. package/browser/confetti.js +16 -12
  4. package/cjs/ConfettiOptions.js +4 -0
  5. package/cjs/confetti.js +16 -12
  6. package/esm/ConfettiOptions.js +4 -0
  7. package/esm/confetti.js +16 -12
  8. package/package.json +17 -17
  9. package/report.html +4 -22
  10. package/tsparticles.confetti.bundle.js +672 -526
  11. package/tsparticles.confetti.bundle.min.js +1 -1
  12. package/tsparticles.confetti.bundle.min.js.LICENSE.txt +1 -1
  13. package/tsparticles.confetti.js +30 -231
  14. package/tsparticles.confetti.min.js +1 -1
  15. package/tsparticles.confetti.min.js.LICENSE.txt +1 -1
  16. package/types/ConfettiOptions.d.ts +1 -0
  17. package/types/IConfettiOptions.d.ts +1 -0
  18. package/umd/ConfettiOptions.js +4 -0
  19. package/umd/confetti.js +16 -12
package/README.md CHANGED
@@ -4,7 +4,8 @@
4
4
 
5
5
  [![jsDelivr](https://data.jsdelivr.com/v1/package/npm/@tsparticles/confetti/badge)](https://www.jsdelivr.com/package/npm/@tsparticles/confetti) [![npmjs](https://badge.fury.io/js/@tsparticles/confetti.svg)](https://www.npmjs.com/package/@tsparticles/confetti) [![npmjs](https://img.shields.io/npm/dt/@tsparticles/confetti)](https://www.npmjs.com/package/@tsparticles/confetti) [![GitHub Sponsors](https://img.shields.io/github/sponsors/matteobruni)](https://github.com/sponsors/matteobruni)
6
6
 
7
- [tsParticles](https://github.com/tsparticles/tsparticles) confetti bundle loads all the features necessary to create beautiful confetti effects with ease.
7
+ [tsParticles](https://github.com/tsparticles/tsparticles) confetti bundle loads all the features necessary to create
8
+ beautiful confetti effects with ease.
8
9
 
9
10
  **Included Packages**
10
11
 
@@ -37,7 +38,8 @@
37
38
  The CDN/Vanilla version JS has two different files:
38
39
 
39
40
  - One is a bundle file with all the scripts included in a single file
40
- - One is a file including just the `confetti` function to load the tsParticles confetti bunddle, all dependencies must be
41
+ - One is a file including just the `confetti` function to load the tsParticles confetti bunddle, all dependencies must
42
+ be
41
43
  included manually
42
44
 
43
45
  #### Bundle
@@ -57,13 +59,11 @@ specified in the **Included Packages** section.
57
59
 
58
60
  Once the scripts are loaded you can set up `tsParticles` like the following examples:
59
61
 
60
- ````javascript
61
-
62
62
  ** Easiest Way **
63
63
 
64
64
  ```javascript
65
- confetti()
66
- ````
65
+ confetti();
66
+ ```
67
67
 
68
68
  ** Async Way, best practice **
69
69
 
@@ -111,7 +111,8 @@ confetti("tsparticles", {
111
111
 
112
112
  #### Options
113
113
 
114
- The `confetti` first parameter can be an id and the second parameter a single `options` object, or just the single options object without the id, which will be `confetti` by default. The `options` object has the following properties:
114
+ The `confetti` first parameter can be an id and the second parameter a single `options` object, or just the single
115
+ options object without the id, which will be `confetti` by default. The `options` object has the following properties:
115
116
 
116
117
  - `count` _Integer (default: 50)_: The number of confetti to launch. More is always fun... but be cool, there's a lot of
117
118
  math involved. (`particleCount` can be used too, but it's deprecated)
@@ -121,6 +122,8 @@ The `confetti` first parameter can be an id and the second parameter a single `o
121
122
  - `startVelocity` _Number (default: 45)_: How fast the confetti will start going, in pixels.
122
123
  - `decay` _Number (default: 0.9)_: How quickly the confetti will lose speed. Keep this number between 0 and 1, otherwise
123
124
  the confetti will gain speed. Better yet, just never change it.
125
+ - `flat` _Boolean (default: false)_: Optionally turns off the tilt and wobble that three dimensional confetti would have
126
+ in the real world. Yeah, they look a little sad, but y'all asked for them, so don't blame me.
124
127
  - `gravity` _Number (default: 1)_: How quickly the particles are pulled down: 1 is full gravity, 0.5 is half gravity,
125
128
  etc., but there are no limits. You can even make particles go up if you'd like.
126
129
  - `drift` _Number (default: 0)_: How much to the side the confetti will drift. The default is 0, meaning that they will
@@ -129,7 +132,8 @@ The `confetti` first parameter can be an id and the second parameter a single `o
129
132
  confetti disappear too quickly for you.
130
133
  - `position` _Object_: Where to start firing confetti from. Feel free to launch off-screen if you'd like. (`origin` can
131
134
  be used too, but it's deprecated)
132
- - `position.x` _Number (default: 50)_: The `x` position on the page, with `0` being the left edge and `100` being the
135
+ - `position.x` _Number (default: 50)_: The `x` position on the page, with `0` being the left edge and `100` being
136
+ the
133
137
  right edge.
134
138
  - `position.y` _Number (default: 50)_: The `y` position on the page, with `0` being the top edge and `100` being the
135
139
  bottom edge.
@@ -155,4 +159,5 @@ The `confetti` first parameter can be an id and the second parameter a single `o
155
159
  - `disableForReducedMotion` _Boolean (default: true)_: Disables confetti entirely for users
156
160
  that [prefer reduced motion](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion).
157
161
 
158
- And for those asking, yes you can paste your canvas-confetti code and migrate to tsParticles Confetti without changing a thing
162
+ And for those asking, yes you can paste your canvas-confetti code and migrate to tsParticles Confetti without changing a
163
+ thing
package/browser/ConfettiOptions.js CHANGED
@@ -18,6 +18,7 @@ export class ConfettiOptions {
18
18
  this.scalar = 1;
19
19
  this.zIndex = 100;
20
20
  this.disableForReducedMotion = true;
21
+ this.flat = false;
21
22
  this.shapeOptions = {};
22
23
  }
23
24
  get origin() {
@@ -56,6 +57,9 @@ export class ConfettiOptions {
56
57
  if (data.decay !== undefined) {
57
58
  this.decay = data.decay;
58
59
  }
60
+ if (data.flat !== undefined) {
61
+ this.flat = data.flat;
62
+ }
59
63
  if (data.gravity !== undefined) {
60
64
  this.gravity = data.gravity;
61
65
  }
package/browser/confetti.js CHANGED
@@ -184,23 +184,27 @@ async function setConfetti(params) {
184
184
  },
185
185
  },
186
186
  rotate: {
187
- value: {
188
- min: 0,
189
- max: 360,
190
- },
187
+ value: actualOptions.flat
188
+ ? 0
189
+ : {
190
+ min: 0,
191
+ max: 360,
192
+ },
191
193
  direction: "random",
192
194
  animation: {
193
- enable: true,
195
+ enable: actualOptions.flat,
194
196
  speed: 60,
195
197
  },
196
198
  },
197
199
  tilt: {
198
200
  direction: "random",
199
- enable: true,
200
- value: {
201
- min: 0,
202
- max: 360,
203
- },
201
+ enable: actualOptions.flat,
202
+ value: actualOptions.flat
203
+ ? 0
204
+ : {
205
+ min: 0,
206
+ max: 360,
207
+ },
204
208
  animation: {
205
209
  enable: true,
206
210
  speed: 60,
@@ -211,7 +215,7 @@ async function setConfetti(params) {
211
215
  enable: true,
212
216
  value: 25,
213
217
  },
214
- enable: true,
218
+ enable: actualOptions.flat,
215
219
  speed: {
216
220
  min: 15,
217
221
  max: 25,
@@ -219,7 +223,7 @@ async function setConfetti(params) {
219
223
  },
220
224
  wobble: {
221
225
  distance: 30,
222
- enable: true,
226
+ enable: actualOptions.flat,
223
227
  speed: {
224
228
  min: -15,
225
229
  max: 15,
package/cjs/ConfettiOptions.js CHANGED
@@ -21,6 +21,7 @@ class ConfettiOptions {
21
21
  this.scalar = 1;
22
22
  this.zIndex = 100;
23
23
  this.disableForReducedMotion = true;
24
+ this.flat = false;
24
25
  this.shapeOptions = {};
25
26
  }
26
27
  get origin() {
@@ -59,6 +60,9 @@ class ConfettiOptions {
59
60
  if (data.decay !== undefined) {
60
61
  this.decay = data.decay;
61
62
  }
63
+ if (data.flat !== undefined) {
64
+ this.flat = data.flat;
65
+ }
62
66
  if (data.gravity !== undefined) {
63
67
  this.gravity = data.gravity;
64
68
  }
package/cjs/confetti.js CHANGED
@@ -187,23 +187,27 @@ async function setConfetti(params) {
187
187
  },
188
188
  },
189
189
  rotate: {
190
- value: {
191
- min: 0,
192
- max: 360,
193
- },
190
+ value: actualOptions.flat
191
+ ? 0
192
+ : {
193
+ min: 0,
194
+ max: 360,
195
+ },
194
196
  direction: "random",
195
197
  animation: {
196
- enable: true,
198
+ enable: actualOptions.flat,
197
199
  speed: 60,
198
200
  },
199
201
  },
200
202
  tilt: {
201
203
  direction: "random",
202
- enable: true,
203
- value: {
204
- min: 0,
205
- max: 360,
206
- },
204
+ enable: actualOptions.flat,
205
+ value: actualOptions.flat
206
+ ? 0
207
+ : {
208
+ min: 0,
209
+ max: 360,
210
+ },
207
211
  animation: {
208
212
  enable: true,
209
213
  speed: 60,
@@ -214,7 +218,7 @@ async function setConfetti(params) {
214
218
  enable: true,
215
219
  value: 25,
216
220
  },
217
- enable: true,
221
+ enable: actualOptions.flat,
218
222
  speed: {
219
223
  min: 15,
220
224
  max: 25,
@@ -222,7 +226,7 @@ async function setConfetti(params) {
222
226
  },
223
227
  wobble: {
224
228
  distance: 30,
225
- enable: true,
229
+ enable: actualOptions.flat,
226
230
  speed: {
227
231
  min: -15,
228
232
  max: 15,
package/esm/ConfettiOptions.js CHANGED
@@ -18,6 +18,7 @@ export class ConfettiOptions {
18
18
  this.scalar = 1;
19
19
  this.zIndex = 100;
20
20
  this.disableForReducedMotion = true;
21
+ this.flat = false;
21
22
  this.shapeOptions = {};
22
23
  }
23
24
  get origin() {
@@ -56,6 +57,9 @@ export class ConfettiOptions {
56
57
  if (data.decay !== undefined) {
57
58
  this.decay = data.decay;
58
59
  }
60
+ if (data.flat !== undefined) {
61
+ this.flat = data.flat;
62
+ }
59
63
  if (data.gravity !== undefined) {
60
64
  this.gravity = data.gravity;
61
65
  }
package/esm/confetti.js CHANGED
@@ -184,23 +184,27 @@ async function setConfetti(params) {
184
184
  },
185
185
  },
186
186
  rotate: {
187
- value: {
188
- min: 0,
189
- max: 360,
190
- },
187
+ value: actualOptions.flat
188
+ ? 0
189
+ : {
190
+ min: 0,
191
+ max: 360,
192
+ },
191
193
  direction: "random",
192
194
  animation: {
193
- enable: true,
195
+ enable: actualOptions.flat,
194
196
  speed: 60,
195
197
  },
196
198
  },
197
199
  tilt: {
198
200
  direction: "random",
199
- enable: true,
200
- value: {
201
- min: 0,
202
- max: 360,
203
- },
201
+ enable: actualOptions.flat,
202
+ value: actualOptions.flat
203
+ ? 0
204
+ : {
205
+ min: 0,
206
+ max: 360,
207
+ },
204
208
  animation: {
205
209
  enable: true,
206
210
  speed: 60,
@@ -211,7 +215,7 @@ async function setConfetti(params) {
211
215
  enable: true,
212
216
  value: 25,
213
217
  },
214
- enable: true,
218
+ enable: actualOptions.flat,
215
219
  speed: {
216
220
  min: 15,
217
221
  max: 25,
@@ -219,7 +223,7 @@ async function setConfetti(params) {
219
223
  },
220
224
  wobble: {
221
225
  distance: 30,
222
- enable: true,
226
+ enable: actualOptions.flat,
223
227
  speed: {
224
228
  min: -15,
225
229
  max: 15,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tsparticles/confetti",
3
- "version": "3.0.0-beta.3",
3
+ "version": "3.0.0-beta.5",
4
4
  "description": "Easily create highly customizable particle 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, Inferno.",
5
5
  "homepage": "https://particles.js.org",
6
6
  "repository": {
@@ -99,22 +99,22 @@
99
99
  "./package.json": "./package.json"
100
100
  },
101
101
  "dependencies": {
102
- "@tsparticles/basic": "^3.0.0-beta.3",
103
- "@tsparticles/engine": "^3.0.0-beta.3",
104
- "@tsparticles/plugin-emitters": "^3.0.0-beta.3",
105
- "@tsparticles/plugin-motion": "^3.0.0-beta.3",
106
- "@tsparticles/shape-cards": "^3.0.0-beta.3",
107
- "@tsparticles/shape-heart": "^3.0.0-beta.3",
108
- "@tsparticles/shape-image": "^3.0.0-beta.3",
109
- "@tsparticles/shape-polygon": "^3.0.0-beta.3",
110
- "@tsparticles/shape-square": "^3.0.0-beta.3",
111
- "@tsparticles/shape-star": "^3.0.0-beta.3",
112
- "@tsparticles/shape-text": "^3.0.0-beta.3",
113
- "@tsparticles/updater-life": "^3.0.0-beta.3",
114
- "@tsparticles/updater-roll": "^3.0.0-beta.3",
115
- "@tsparticles/updater-rotate": "^3.0.0-beta.3",
116
- "@tsparticles/updater-tilt": "^3.0.0-beta.3",
117
- "@tsparticles/updater-wobble": "^3.0.0-beta.3"
102
+ "@tsparticles/basic": "^3.0.0-beta.5",
103
+ "@tsparticles/engine": "^3.0.0-beta.5",
104
+ "@tsparticles/plugin-emitters": "^3.0.0-beta.5",
105
+ "@tsparticles/plugin-motion": "^3.0.0-beta.5",
106
+ "@tsparticles/shape-cards": "^3.0.0-beta.5",
107
+ "@tsparticles/shape-heart": "^3.0.0-beta.5",
108
+ "@tsparticles/shape-image": "^3.0.0-beta.5",
109
+ "@tsparticles/shape-polygon": "^3.0.0-beta.5",
110
+ "@tsparticles/shape-square": "^3.0.0-beta.5",
111
+ "@tsparticles/shape-star": "^3.0.0-beta.5",
112
+ "@tsparticles/shape-text": "^3.0.0-beta.5",
113
+ "@tsparticles/updater-life": "^3.0.0-beta.5",
114
+ "@tsparticles/updater-roll": "^3.0.0-beta.5",
115
+ "@tsparticles/updater-rotate": "^3.0.0-beta.5",
116
+ "@tsparticles/updater-tilt": "^3.0.0-beta.5",
117
+ "@tsparticles/updater-wobble": "^3.0.0-beta.5"
118
118
  },
119
119
  "publishConfig": {
120
120
  "access": "public"