partycles 1.1.3 → 1.1.5

package/dist/index.js

@@ -133,8 +133,14 @@ const createHeartParticles = (origin, config) => {
     return particles;
 };
 const renderHeartParticle = (particle) => {
-    return (React.createElement("svg", { key: particle.id, width: particle.size, height: particle.size, viewBox: "0 0 24 24", fill: particle.color, style: {
+    var _a, _b;
+    // Calculate pulse effect if enabled
+    const pulse = ((_b = (_a = particle.config) === null || _a === void 0 ? void 0 : _a.effects) === null || _b === void 0 ? void 0 : _b.pulse)
+        ? 1 + Math.sin(particle.life * 0.2) * 0.1
+        : 1;
+    return (React.createElement("svg", { key: particle.id, width: particle.size * pulse, height: particle.size * pulse, viewBox: "0 0 24 24", fill: particle.color, style: {
             filter: `drop-shadow(0 0 ${particle.size * 0.15}px ${particle.color})`,
+            transition: 'width 0.1s ease-out, height 0.1s ease-out',
         } },
         React.createElement("path", { d: "M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" })));
 };
@@ -370,14 +376,21 @@ const createCoinParticles = (origin, config) => {
     return particles;
 };
 const renderCoinParticle = (particle) => {
-    const spinSpeed = 8; // Degrees per frame
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    const spinSpeed = ((_b = (_a = particle.config) === null || _a === void 0 ? void 0 : _a.effects) === null || _b === void 0 ? void 0 : _b.spin3D) ? 8 : 2; // Faster spin with 3D effect
     const currentRotation = particle.rotation + (120 - particle.life) * spinSpeed;
+    // 3D effect: scale X based on rotation to simulate perspective
+    const scaleX = ((_d = (_c = particle.config) === null || _c === void 0 ? void 0 : _c.effects) === null || _d === void 0 ? void 0 : _d.spin3D)
+        ? Math.abs(Math.cos((currentRotation * Math.PI) / 180))
+        : 1;
     return (React.createElement("div", { key: particle.id, style: {
             width: `${particle.size}px`,
             height: `${particle.size}px`,
             background: `radial-gradient(ellipse at 30% 30%, ${particle.color}, #B8860B)`,
             borderRadius: '50%',
-            transform: `rotateY(${currentRotation}deg)`,
+            transform: ((_f = (_e = particle.config) === null || _e === void 0 ? void 0 : _e.effects) === null || _f === void 0 ? void 0 : _f.spin3D)
+                ? `rotateY(${currentRotation}deg) scaleX(${scaleX})`
+                : `rotate(${currentRotation}deg)`,
             transformStyle: 'preserve-3d',
             boxShadow: `
           inset -2px -2px 4px rgba(0, 0, 0, 0.3),
@@ -387,6 +400,7 @@ const renderCoinParticle = (particle) => {
             border: `1px solid ${particle.color}`,
             position: 'relative',
             overflow: 'hidden',
+            backfaceVisibility: 'hidden',
         } },
         React.createElement("div", { style: {
                 position: 'absolute',
@@ -398,6 +412,8 @@ const renderCoinParticle = (particle) => {
                 color: '#B8860B',
                 textShadow: '1px 1px 1px rgba(0, 0, 0, 0.3)',
                 fontFamily: 'Arial, sans-serif',
+                opacity: ((_h = (_g = particle.config) === null || _g === void 0 ? void 0 : _g.effects) === null || _h === void 0 ? void 0 : _h.spin3D) && scaleX < 0.3 ? 0 : 1,
+                transition: 'opacity 0.1s',
             } }, "$")));
 };
 
@@ -1333,7 +1349,8 @@ const useReward = (elementId, animationType, config) => {
             ? optimizeConfigForMobile(config)
             : undefined;
         // Create particles
-        particlesRef.current = animationHandler.createParticles(origin, optimizedConfig || {});
+        particlesRef.current = animationHandler.createParticles(origin, optimizedConfig || {}).map(particle => (Object.assign(Object.assign({}, particle), { config: optimizedConfig || config // Store config in particle for render functions
+         })));
         // Create container
         const container = document.createElement('div');
         container.style.position = 'fixed';
@@ -1378,6 +1395,22 @@ const useReward = (elementId, animationType, config) => {
                 particle.vy *= friction;
                 particle.rotation += particle.vx * 2;
                 particle.life -= 1.2;
+                // Apply optional effects
+                const effects = config === null || config === void 0 ? void 0 : config.effects;
+                // Flutter effect for confetti
+                if ((effects === null || effects === void 0 ? void 0 : effects.flutter) && animationType === 'confetti') {
+                    particle.x += Math.sin(particle.life * 0.1) * 0.5;
+                    particle.rotation += Math.sin(particle.life * 0.05) * 2;
+                }
+                // Wind drift for snow/leaves
+                if ((effects === null || effects === void 0 ? void 0 : effects.windDrift) && (animationType === 'snow' || animationType === 'leaves')) {
+                    particle.x += Math.sin(particle.life * 0.05 + particle.id.charCodeAt(0)) * 0.8;
+                }
+                // Wobble effect for bubbles
+                if ((effects === null || effects === void 0 ? void 0 : effects.wobble) && animationType === 'bubbles') {
+                    particle.x += Math.sin(particle.life * 0.08) * 0.3;
+                    particle.y += Math.cos(particle.life * 0.08) * 0.2;
+                }
                 // Special opacity handling for sparkles
                 if (animationType === 'sparkles') {
                     if (particle.life > 70) {
@@ -1386,6 +1419,14 @@ const useReward = (elementId, animationType, config) => {
                     else if (particle.life < 30) {
                         particle.opacity = particle.life / 30;
                     }
+                    // Twinkle effect
+                    if (effects === null || effects === void 0 ? void 0 : effects.twinkle) {
+                        particle.opacity *= 0.5 + Math.sin(particle.life * 0.3) * 0.5;
+                    }
+                }
+                else if (animationType === 'stars' && (effects === null || effects === void 0 ? void 0 : effects.twinkle)) {
+                    // Twinkle effect for stars
+                    particle.opacity = (particle.life / 100) * (0.5 + Math.sin(particle.life * 0.3) * 0.5);
                 }
                 else {
                     particle.opacity = particle.life / 100;