✨ add launchSpeed prop

example/src/App.tsx

@@ -13,6 +13,7 @@ const DEFAULT_OPTIONS = {
   x: 0.5,
   y: 0.5,
   colors: ['#ff577f', '#ff884b', '#ffd384', '#fff9b0'],
+  launchSpeed: 1,
 };
 
 function App() {
@@ -57,6 +58,9 @@ function App() {
       .onChange((v) => handleChangeOption('spreadDeg', v));
     confetti.add(target, 'x', 0, 1).onChange((v) => handleChangeOption('x', v));
     confetti.add(target, 'y', 0, 1).onChange((v) => handleChangeOption('y', v));
+    confetti
+      .add(target, 'launchSpeed', 0, 3)
+      .onChange((v) => handleChangeOption('launchSpeed', v));
 
     const colors = gui.addFolder('Colors');
     colors.open();
@@ -84,6 +88,7 @@ function App() {
         x={options.x}
         y={options.y}
         colors={options.colors}
+        launchSpeed={options.launchSpeed}
       />
     </div>
   );

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-confetti-boom",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "A customizable React confetti explosion component for celebrations and special events",
   "author": "almond-bongbong <bal.dongdongdong@gmail.com>",
   "homepage": "https://github.com/almond-bongbong/react-confetti-boom",

src/js/Particle.ts

@@ -40,7 +40,7 @@ class Particle {
     this.width = shapeSize;
     this.height = shapeSize;
     this.theta = (Math.PI / 180) * randomNumBetween(deg - spread, deg + spread);
-    this.radius = randomNumBetween(20, 70);
+    this.radius = randomNumBetween(20 * launchSpeed, 70 * launchSpeed);
     this.vx = this.radius * Math.cos(this.theta);
     this.vy = this.radius * Math.sin(this.theta);
     this.friction = 0.87;
@@ -55,19 +55,19 @@ class Particle {
       this.colors[Math.floor(randomNumBetween(0, this.colors.length))],
     );
     this.shapes = shapes;
-    this.shape = this.shapes[Math.floor(randomNumBetween(0, this.shapes.length))];
+    this.shape =
+      this.shapes[Math.floor(randomNumBetween(0, this.shapes.length))];
     this.swingOffset = randomNumBetween(0, Math.PI * 2);
     this.swingSpeed = Math.random() * 0.05 + 0.01;
     this.swingAmplitude = randomNumBetween(0, 0.4);
-
-    console.log(launchSpeed);
   }
 
   update() {
     this.vx *= this.friction;
     this.vy *= this.friction;
     this.vy += this.gravity;
-    if (this.vy > 0) this.vx += Math.sin(this.swingOffset) * this.swingAmplitude;
+    if (this.vy > 0)
+      this.vx += Math.sin(this.swingOffset) * this.swingAmplitude;
     this.x += this.vx;
     this.y += this.vy;
     this.opacity -= 0.004;