partycles 1.0.0 → 1.1.3

package/dist/index.esm.js

@@ -1,4 +1,4 @@
-import React, { useState, useRef, useCallback, useEffect } from 'react';
+import React, { useState, useRef, useEffect, useCallback } from 'react';
 import { createRoot } from 'react-dom/client';
 
 const randomInRange = (min, max) => {
@@ -11,7 +11,7 @@ const generateId = () => {
     return Math.random().toString(36).substring(2, 9);
 };
 const getRandomColor = (colors) => {
-    return colors[Math.floor(Math.random() * colors.length)] || colors[0] || '#ffffff';
+    return (colors[Math.floor(Math.random() * colors.length)] || colors[0] || '#ffffff');
 };
 const createParticleStyle = (particle, containerRect) => {
     return {
@@ -26,9 +26,26 @@ const createParticleStyle = (particle, containerRect) => {
     };
 };
 
-const defaultColors$3 = ['#f44336', '#e91e63', '#9c27b0', '#673ab7', '#3f51b5', '#2196f3', '#03a9f4', '#00bcd4', '#009688', '#4caf50', '#8bc34a', '#cddc39', '#ffeb3b', '#ffc107', '#ff9800', '#ff5722'];
+const defaultColors$3 = [
+    '#f44336',
+    '#e91e63',
+    '#9c27b0',
+    '#673ab7',
+    '#3f51b5',
+    '#2196f3',
+    '#03a9f4',
+    '#00bcd4',
+    '#009688',
+    '#4caf50',
+    '#8bc34a',
+    '#cddc39',
+    '#ffeb3b',
+    '#ffc107',
+    '#ff9800',
+    '#ff5722',
+];
 const createConfettiParticles = (origin, config) => {
-    const { particleCount = 50, startVelocity = 20, colors = defaultColors$3, elementSize = 20 } = config;
+    const { particleCount = 50, startVelocity = 20, colors = defaultColors$3, elementSize = 20, } = config;
     const particles = [];
     for (let i = 0; i < particleCount; i++) {
         const angle = randomInRange(0, 360);
@@ -60,7 +77,7 @@ const renderConfettiParticle = (particle) => {
 };
 
 const createSparkleParticles = (origin, config) => {
-    const { particleCount = 35, spread = 120, startVelocity = 15, elementSize = 25, colors = ['#FFD700', '#FFFFFF'] } = config;
+    const { particleCount = 35, spread = 120, startVelocity = 15, elementSize = 25, colors = ['#FFD700', '#FFFFFF'], } = config;
     const particles = [];
     for (let i = 0; i < particleCount; i++) {
         const velocityScale = startVelocity / 45; // Scale based on default
@@ -74,7 +91,9 @@ const createSparkleParticles = (origin, config) => {
             opacity: 0,
             size: randomInRange(elementSize * 0.4, elementSize * 1.2),
             rotation: randomInRange(0, 360),
-            color: colors[Math.floor(Math.random() * colors.length)] || colors[0] || '#ffffff',
+            color: colors[Math.floor(Math.random() * colors.length)] ||
+                colors[0] ||
+                '#ffffff',
         });
     }
     return particles;
@@ -90,7 +109,7 @@ const renderSparkleParticle = (particle) => {
 
 const heartColors = ['#ff1744', '#e91e63', '#ff4569', '#ff6b6b', '#ee5a70'];
 const createHeartParticles = (origin, config) => {
-    const { particleCount = 25, startVelocity = 12, colors = heartColors, elementSize = 30 } = config;
+    const { particleCount = 25, startVelocity = 12, colors = heartColors, elementSize = 30, } = config;
     const particles = [];
     for (let i = 0; i < particleCount; i++) {
         const angle = randomInRange(-45, -135);
@@ -118,9 +137,17 @@ const renderHeartParticle = (particle) => {
         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" })));
 };
 
-const fireworkColors = ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff', '#00ffff', '#ffffff'];
+const fireworkColors = [
+    '#ff0000',
+    '#00ff00',
+    '#0000ff',
+    '#ffff00',
+    '#ff00ff',
+    '#00ffff',
+    '#ffffff',
+];
 const createFireworkParticles = (origin, config) => {
-    const { particleCount = 60, startVelocity = 25, colors = fireworkColors, elementSize = 8 } = config;
+    const { particleCount = 60, startVelocity = 25, colors = fireworkColors, elementSize = 8, } = config;
     const particles = [];
     for (let i = 0; i < particleCount; i++) {
         const angle = (360 / particleCount) * i + randomInRange(-5, 5);
@@ -157,9 +184,14 @@ const renderFireworkParticle = (particle) => {
         } }));
 };
 
-const bubbleColors = ['rgba(66, 165, 245, 0.4)', 'rgba(41, 182, 246, 0.4)', 'rgba(38, 198, 218, 0.4)', 'rgba(129, 212, 250, 0.4)'];
+const bubbleColors = [
+    'rgba(66, 165, 245, 0.4)',
+    'rgba(41, 182, 246, 0.4)',
+    'rgba(38, 198, 218, 0.4)',
+    'rgba(129, 212, 250, 0.4)',
+];
 const createBubbleParticles = (origin, config) => {
-    const { particleCount = 30, spread = 80, startVelocity = 8, colors = bubbleColors, elementSize = 40 } = config;
+    const { particleCount = 30, spread = 80, startVelocity = 8, colors = bubbleColors, elementSize = 40, } = config;
     const particles = [];
     for (let i = 0; i < particleCount; i++) {
         particles.push({
@@ -172,7 +204,9 @@ const createBubbleParticles = (origin, config) => {
             opacity: 0.7,
             size: randomInRange(elementSize * 0.4, elementSize * 1.2),
             rotation: 0,
-            color: colors[Math.floor(Math.random() * colors.length)] || colors[0] || '#ffffff',
+            color: colors[Math.floor(Math.random() * colors.length)] ||
+                colors[0] ||
+                '#ffffff',
         });
     }
     return particles;
@@ -194,7 +228,7 @@ const renderBubbleParticle = (particle) => {
 
 const starColors = ['#FFD700', '#FFA500', '#FF6347', '#FFE4B5'];
 const createStarParticles = (origin, config) => {
-    const { particleCount = 40, startVelocity = 18, colors = starColors, elementSize = 30 } = config;
+    const { particleCount = 40, startVelocity = 18, colors = starColors, elementSize = 30, } = config;
     const particles = [];
     for (let i = 0; i < particleCount; i++) {
         const angle = randomInRange(0, 360);
@@ -209,7 +243,9 @@ const createStarParticles = (origin, config) => {
             opacity: 1,
             size: randomInRange(elementSize * 0.5, elementSize * 1.3),
             rotation: randomInRange(0, 360),
-            color: colors[Math.floor(Math.random() * colors.length)] || colors[0] || '#ffffff',
+            color: colors[Math.floor(Math.random() * colors.length)] ||
+                colors[0] ||
+                '#ffffff',
         });
     }
     return particles;
@@ -223,7 +259,7 @@ const renderStarParticle = (particle) => {
 
 const snowColors = ['#FFFFFF', '#F0F8FF', '#F5F5F5', '#FAFAFA'];
 const createSnowParticles = (origin, config) => {
-    const { particleCount = 50, spread = 200, startVelocity = 3, colors = snowColors, elementSize = 15 } = config;
+    const { particleCount = 50, spread = 200, startVelocity = 3, colors = snowColors, elementSize = 15, } = config;
     const particles = [];
     for (let i = 0; i < particleCount; i++) {
         // Spread particles across the width, starting from above viewport
@@ -239,7 +275,9 @@ const createSnowParticles = (origin, config) => {
             opacity: randomInRange(0.4, 0.9),
             size: randomInRange(elementSize * 0.3, elementSize),
             rotation: randomInRange(0, 360),
-            color: colors[Math.floor(Math.random() * colors.length)] || colors[0] || '#ffffff',
+            color: colors[Math.floor(Math.random() * colors.length)] ||
+                colors[0] ||
+                '#ffffff',
         });
     }
     return particles;
@@ -266,7 +304,7 @@ const happyEmojis = ['😊', '😄', '🥰', '😍', '🤗', '😘', '😁', '
 const natureEmojis = ['🌸', '🌺', '🌻', '🌹', '🌷', '🌼', '🍀', '🌿'];
 const foodEmojis = ['🍕', '🍔', '🍟', '🌮', '🍿', '🍩', '🍪', '🧁'];
 const createEmojiParticles = (origin, config) => {
-    const { particleCount = 30, spread = 100, startVelocity = 15, elementSize = 35, emojis = defaultEmojis } = config;
+    const { particleCount = 30, spread = 100, startVelocity = 15, elementSize = 35, emojis = defaultEmojis, } = config;
     const particles = [];
     for (let i = 0; i < particleCount; i++) {
         const angle = randomInRange(-45, -135);
@@ -282,7 +320,7 @@ const createEmojiParticles = (origin, config) => {
             size: randomInRange(elementSize * 0.7, elementSize * 1.3),
             rotation: randomInRange(-45, 45),
             color: '', // Not used for emojis
-            element: emojis[Math.floor(Math.random() * emojis.length)]
+            element: emojis[Math.floor(Math.random() * emojis.length)],
         });
     }
     return particles;
@@ -302,12 +340,12 @@ const emojiPresets = {
     happy: happyEmojis,
     nature: natureEmojis,
     food: foodEmojis,
-    default: defaultEmojis
+    default: defaultEmojis,
 };
 
 const coinColors = ['#FFD700', '#FFA500', '#FFB300', '#FFC700'];
 const createCoinParticles = (origin, config) => {
-    const { particleCount = 30, spread = 70, startVelocity = 25, colors = coinColors, elementSize = 25 } = config;
+    const { particleCount = 30, spread = 70, startVelocity = 25, colors = coinColors, elementSize = 25, } = config;
     const particles = [];
     for (let i = 0; i < particleCount; i++) {
         const angle = randomInRange(-spread / 2, spread / 2) * (Math.PI / 180);
@@ -322,7 +360,9 @@ const createCoinParticles = (origin, config) => {
             opacity: 1,
             size: randomInRange(elementSize * 0.8, elementSize * 1.2),
             rotation: randomInRange(0, 360),
-            color: colors[Math.floor(Math.random() * colors.length)] || colors[0] || '#ffffff',
+            color: colors[Math.floor(Math.random() * colors.length)] ||
+                colors[0] ||
+                '#ffffff',
         });
     }
     return particles;
@@ -361,7 +401,7 @@ const renderCoinParticle = (particle) => {
 
 const petalColors = ['#FFB6C1', '#FFC0CB', '#FF69B4', '#FF1493', '#FFF0F5'];
 const createPetalParticles = (origin, config) => {
-    const { particleCount = 40, spread = 100, startVelocity = 8, colors = petalColors, elementSize = 20 } = config;
+    const { particleCount = 40, spread = 100, startVelocity = 8, colors = petalColors, elementSize = 20, } = config;
     const particles = [];
     for (let i = 0; i < particleCount; i++) {
         const angle = randomInRange(-spread / 2, spread / 2) * (Math.PI / 180);
@@ -376,7 +416,9 @@ const createPetalParticles = (origin, config) => {
             opacity: randomInRange(0.7, 1),
             size: randomInRange(elementSize * 0.7, elementSize * 1.3),
             rotation: randomInRange(0, 360),
-            color: colors[Math.floor(Math.random() * colors.length)] || colors[0] || '#ffffff',
+            color: colors[Math.floor(Math.random() * colors.length)] ||
+                colors[0] ||
+                '#ffffff',
         });
     }
     return particles;
@@ -417,9 +459,17 @@ const renderPetalParticle = (particle) => {
             } })));
 };
 
-const auroraColors = ['#00ff88', '#00ffaa', '#00ddff', '#0099ff', '#0066ff', '#9933ff', '#ff00ff'];
+const auroraColors = [
+    '#00ff88',
+    '#00ffaa',
+    '#00ddff',
+    '#0099ff',
+    '#0066ff',
+    '#9933ff',
+    '#ff00ff',
+];
 const createAuroraParticles = (origin, config) => {
-    const { particleCount = 15, spread = 200, startVelocity = 3, colors = auroraColors, elementSize = 100 } = config;
+    const { particleCount = 15, spread = 200, startVelocity = 3, colors = auroraColors, elementSize = 100, } = config;
     const particles = [];
     for (let i = 0; i < particleCount; i++) {
         const angle = (i / particleCount) * spread - spread / 2;
@@ -434,7 +484,9 @@ const createAuroraParticles = (origin, config) => {
             opacity: 0,
             size: randomInRange(elementSize * 0.8, elementSize * 1.2),
             rotation: randomInRange(-15, 15),
-            color: colors[Math.floor(Math.random() * colors.length)] || colors[0] || '#ffffff',
+            color: colors[Math.floor(Math.random() * colors.length)] ||
+                colors[0] ||
+                '#ffffff',
         });
     }
     return particles;
@@ -476,7 +528,7 @@ const renderAuroraParticle = (particle) => {
 
 const fireflyColors = ['#FFFF99', '#FFFFCC', '#FFFF66', '#FFFFAA'];
 const createFireflyParticles = (origin, config) => {
-    const { particleCount = 20, spread = 150, startVelocity = 2, colors = fireflyColors, elementSize = 8 } = config;
+    const { particleCount = 20, spread = 150, startVelocity = 2, colors = fireflyColors, elementSize = 8, } = config;
     const particles = [];
     for (let i = 0; i < particleCount; i++) {
         const angle = randomInRange(0, 360) * (Math.PI / 180);
@@ -491,7 +543,9 @@ const createFireflyParticles = (origin, config) => {
             opacity: 0,
             size: randomInRange(elementSize * 0.6, elementSize),
             rotation: randomInRange(0, 360), // Used for blink timing
-            color: colors[Math.floor(Math.random() * colors.length)] || colors[0] || '#ffffff',
+            color: colors[Math.floor(Math.random() * colors.length)] ||
+                colors[0] ||
+                '#ffffff',
         });
     }
     return particles;
@@ -541,9 +595,16 @@ const renderFireflyParticle = (particle) => {
             } })));
 };
 
-const paintColors = ['#FF006E', '#FB5607', '#FFBE0B', '#8338EC', '#3A86FF', '#06FFB4'];
+const paintColors = [
+    '#FF006E',
+    '#FB5607',
+    '#FFBE0B',
+    '#8338EC',
+    '#3A86FF',
+    '#06FFB4',
+];
 const createPaintParticles = (origin, config) => {
-    const { particleCount = 25, spread = 120, startVelocity = 35, colors = paintColors, elementSize = 30 } = config;
+    const { particleCount = 25, spread = 120, startVelocity = 35, colors = paintColors, elementSize = 30, } = config;
     const particles = [];
     for (let i = 0; i < particleCount; i++) {
         const angle = randomInRange(-spread / 2, spread / 2) * (Math.PI / 180);
@@ -561,7 +622,9 @@ const createPaintParticles = (origin, config) => {
                 ? randomInRange(elementSize * 1.5, elementSize * 2.5)
                 : randomInRange(elementSize * 0.3, elementSize),
             rotation: randomInRange(0, 360),
-            color: colors[Math.floor(Math.random() * colors.length)] || colors[0] || '#ffffff',
+            color: colors[Math.floor(Math.random() * colors.length)] ||
+                colors[0] ||
+                '#ffffff',
         });
     }
     return particles;
@@ -580,7 +643,7 @@ const renderPaintParticle = (particle) => {
             transform: `
           scaleX(${stretch}) 
           scaleY(${squish}) 
-          rotate(${Math.atan2(particle.vy, particle.vx) * 180 / Math.PI}deg)
+          rotate(${(Math.atan2(particle.vy, particle.vx) * 180) / Math.PI}deg)
         `,
         } },
         React.createElement("div", { style: {
@@ -624,9 +687,17 @@ const renderPaintParticle = (particle) => {
             } }))));
 };
 
-const balloonColors = ['#FF006E', '#FB5607', '#FFBE0B', '#8338EC', '#3A86FF', '#06FFB4', '#FF4081'];
+const balloonColors = [
+    '#FF006E',
+    '#FB5607',
+    '#FFBE0B',
+    '#8338EC',
+    '#3A86FF',
+    '#06FFB4',
+    '#FF4081',
+];
 const createBalloonParticles = (origin, config) => {
-    const { particleCount = 15, spread = 80, startVelocity = 10, colors = balloonColors, elementSize = 35 } = config;
+    const { particleCount = 15, spread = 80, startVelocity = 10, colors = balloonColors, elementSize = 35, } = config;
     const particles = [];
     for (let i = 0; i < particleCount; i++) {
         const angle = randomInRange(-spread / 2, spread / 2) * (Math.PI / 180);
@@ -641,7 +712,9 @@ const createBalloonParticles = (origin, config) => {
             opacity: 0.9,
             size: randomInRange(elementSize * 0.8, elementSize * 1.2),
             rotation: randomInRange(-10, 10),
-            color: colors[Math.floor(Math.random() * colors.length)] || colors[0] || '#ffffff',
+            color: colors[Math.floor(Math.random() * colors.length)] ||
+                colors[0] ||
+                '#ffffff',
         });
     }
     return particles;
@@ -707,9 +780,17 @@ const renderBalloonParticle = (particle) => {
             React.createElement("path", { d: `M1 0 Q ${1 + Math.sin(particle.life * 0.1) * 3} ${particle.size} 1 ${particle.size * 2}`, stroke: particle.color, strokeWidth: "1.5", fill: "none", opacity: "0.4" }))));
 };
 
-const galaxyColors = ['#FFFFFF', '#FFF9C4', '#BBDEFB', '#C5CAE9', '#D1C4E9', '#FFE082', '#FFCCBC'];
+const galaxyColors = [
+    '#FFFFFF',
+    '#FFF9C4',
+    '#BBDEFB',
+    '#C5CAE9',
+    '#D1C4E9',
+    '#FFE082',
+    '#FFCCBC',
+];
 const createGalaxyParticles = (origin, config) => {
-    const { particleCount = 60, spread = 200, startVelocity = 15, colors = galaxyColors, elementSize = 8 } = config;
+    const { particleCount = 60, spread = 200, startVelocity = 15, colors = galaxyColors, elementSize = 8, } = config;
     const particles = [];
     for (let i = 0; i < particleCount; i++) {
         // Create spiral distribution
@@ -737,7 +818,9 @@ const createGalaxyParticles = (origin, config) => {
             opacity: 0,
             size: randomInRange(elementSize * 0.3, elementSize) * (1 - progress * 0.5), // Smaller at edges
             rotation: randomInRange(0, 360),
-            color: colors[Math.floor(Math.random() * colors.length)] || colors[0] || '#ffffff',
+            color: colors[Math.floor(Math.random() * colors.length)] ||
+                colors[0] ||
+                '#ffffff',
         });
     }
     return particles;
@@ -855,8 +938,7 @@ const renderGlitchParticle = (particle) => {
         g: channel === 'g' ? 255 : 0,
         b: channel === 'b' ? 255 : 0,
     };
-    const mixBlendMode = channel === 'r' ? 'screen' :
-        channel === 'g' ? 'multiply' : 'difference';
+    const mixBlendMode = channel === 'r' ? 'screen' : channel === 'g' ? 'multiply' : 'difference';
     return (React.createElement("div", { key: particle.id, style: {
             width: `${width}px`,
             height: `${height}px`,
@@ -867,9 +949,18 @@ const renderGlitchParticle = (particle) => {
         } }));
 };
 
-const defaultColors$2 = ['#9C27B0', '#E91E63', '#FF00FF', '#00FFFF', '#FFD700', '#FF69B4', '#DA70D6', '#9370DB'];
+const defaultColors$2 = [
+    '#9C27B0',
+    '#E91E63',
+    '#FF00FF',
+    '#00FFFF',
+    '#FFD700',
+    '#FF69B4',
+    '#DA70D6',
+    '#9370DB',
+];
 const createMagicDustParticles = (origin, config) => {
-    const { particleCount = 40, startVelocity = 8, colors = defaultColors$2, elementSize = 12 } = config;
+    const { particleCount = 40, startVelocity = 8, colors = defaultColors$2, elementSize = 12, } = config;
     const particles = [];
     for (let i = 0; i < particleCount; i++) {
         // Create particles in a circular pattern with some randomness
@@ -940,9 +1031,18 @@ const renderMagicDustParticle = (particle) => {
                 } }))));
 };
 
-const defaultColors$1 = ['#FF1493', '#00CED1', '#FFD700', '#FF69B4', '#7B68EE', '#00FA9A', '#FF6347', '#4169E1'];
+const defaultColors$1 = [
+    '#FF1493',
+    '#00CED1',
+    '#FFD700',
+    '#FF69B4',
+    '#7B68EE',
+    '#00FA9A',
+    '#FF6347',
+    '#4169E1',
+];
 const createCrystalParticles = (origin, config) => {
-    const { particleCount = 15, startVelocity = 15, colors = defaultColors$1, elementSize = 25 } = config;
+    const { particleCount = 15, startVelocity = 15, colors = defaultColors$1, elementSize = 25, } = config;
     const particles = [];
     for (let i = 0; i < particleCount; i++) {
         // Crystals explode outward and fall with gravity
@@ -1014,9 +1114,16 @@ const renderCrystalParticle = (particle) => {
             } })));
 };
 
-const defaultColors = ['#D2691E', '#CD853F', '#8B4513', '#A0522D', '#FF8C00', '#FF6347'];
+const defaultColors = [
+    '#D2691E',
+    '#CD853F',
+    '#8B4513',
+    '#A0522D',
+    '#FF8C00',
+    '#FF6347',
+];
 const createLeafParticles = (origin, config) => {
-    const { particleCount = 10, colors = defaultColors, elementSize = 25 } = config;
+    const { particleCount = 10, colors = defaultColors, elementSize = 25, } = config;
     const particles = [];
     for (let i = 0; i < particleCount; i++) {
         particles.push({
@@ -1030,9 +1137,9 @@ const createLeafParticles = (origin, config) => {
             size: randomInRange(elementSize * 0.6, elementSize),
             // Encode tumble phase (0-360), sway phase (0-360), and sway amount (20-40) + rotation speed (-3 to 3)
             rotation: Math.floor(randomInRange(0, 360)) +
-                (Math.floor(randomInRange(0, 360)) * 1000) +
-                (Math.floor(randomInRange(20, 40)) * 1000000) +
-                ((Math.floor(randomInRange(-3, 3)) + 3) * 100000000),
+                Math.floor(randomInRange(0, 360)) * 1000 +
+                Math.floor(randomInRange(20, 40)) * 1000000 +
+                (Math.floor(randomInRange(-3, 3)) + 3) * 100000000,
             color: getRandomColor(colors),
         });
     }
@@ -1043,10 +1150,10 @@ const renderLeafParticle = (particle) => {
     const tumblePhase = particle.rotation % 1000;
     const swayPhase = Math.floor((particle.rotation % 1000000) / 1000);
     const swayAmount = Math.floor((particle.rotation % 100000000) / 1000000);
-    const rotationSpeed = (Math.floor(particle.rotation / 100000000) - 3);
+    const rotationSpeed = Math.floor(particle.rotation / 100000000) - 3;
     // Calculate tumbling and swaying
-    const tumble = Math.sin((Date.now() * 0.002 + tumblePhase) * Math.PI / 180) * 30;
-    const swayX = Math.sin((Date.now() * 0.001 + swayPhase) * Math.PI / 180) * swayAmount;
+    const tumble = Math.sin(((Date.now() * 0.002 + tumblePhase) * Math.PI) / 180) * 30;
+    const swayX = Math.sin(((Date.now() * 0.001 + swayPhase) * Math.PI) / 180) * swayAmount;
     const rotation = (Date.now() * rotationSpeed * 0.01 + tumble) % 360;
     return (React.createElement("div", { key: particle.id, style: {
             width: `${particle.size}px`,
@@ -1150,12 +1257,60 @@ const animations = {
     },
 };
 
+const isMobileDevice = () => {
+    if (typeof window === 'undefined')
+        return false;
+    // Check user agent
+    const userAgent = navigator.userAgent ||
+        navigator.vendor ||
+        window.opera ||
+        '';
+    const isMobileUA = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(userAgent);
+    // Check viewport width
+    const isMobileWidth = window.innerWidth <= 768;
+    // Check touch support
+    const hasTouch = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
+    return isMobileUA || (isMobileWidth && hasTouch);
+};
+const optimizeConfigForMobile = (config) => {
+    var _a, _b, _c;
+    if (!isMobileDevice())
+        return config;
+    return Object.assign(Object.assign({}, config), { 
+        // Reduce particle count by 40%
+        particleCount: Math.floor((config.particleCount || 50) * 0.6), 
+        // Reduce element size by 20%
+        elementSize: Math.floor((config.elementSize || 20) * 0.8), 
+        // Reduce lifetime by 20%
+        lifetime: Math.floor((config.lifetime || 150) * 0.8), 
+        // Simplify physics
+        physics: Object.assign(Object.assign({}, config.physics), { 
+            // Reduce precision for mobile
+            gravity: Math.round((((_a = config.physics) === null || _a === void 0 ? void 0 : _a.gravity) || 0) * 100) / 100, wind: Math.round((((_b = config.physics) === null || _b === void 0 ? void 0 : _b.wind) || 0) * 100) / 100, friction: Math.round((((_c = config.physics) === null || _c === void 0 ? void 0 : _c.friction) || 0.98) * 100) / 100 }) });
+};
+// Frame skipping for mobile
+const shouldSkipFrame = (frameCount) => {
+    if (!isMobileDevice())
+        return false;
+    // Skip every 3rd frame on mobile
+    return frameCount % 3 === 0;
+};
+
 const useReward = (elementId, animationType, config) => {
     const [isAnimating, setIsAnimating] = useState(false);
     const animationFrameRef = useRef();
     const particlesRef = useRef([]);
     const containerRef = useRef(null);
     const rootRef = useRef(null);
+    const isTabVisible = useRef(true);
+    // Monitor tab visibility
+    useEffect(() => {
+        const handleVisibilityChange = () => {
+            isTabVisible.current = !document.hidden;
+        };
+        document.addEventListener('visibilitychange', handleVisibilityChange);
+        return () => document.removeEventListener('visibilitychange', handleVisibilityChange);
+    }, []);
     const animate = useCallback(() => {
         var _a, _b, _c, _d, _e, _f;
         const element = document.getElementById(elementId);
@@ -1171,8 +1326,12 @@ const useReward = (elementId, animationType, config) => {
             console.error(`Animation type "${animationType}" not found`);
             return;
         }
+        // Apply mobile performance optimizations
+        const optimizedConfig = config
+            ? optimizeConfigForMobile(config)
+            : undefined;
         // Create particles
-        particlesRef.current = animationHandler.createParticles(origin, config || {});
+        particlesRef.current = animationHandler.createParticles(origin, optimizedConfig || {});
         // Create container
         const container = document.createElement('div');
         container.style.position = 'fixed';
@@ -1189,12 +1348,21 @@ const useReward = (elementId, animationType, config) => {
         rootRef.current = root;
         const containerRect = container.getBoundingClientRect();
         // Default gravity varies by animation type
-        const defaultGravity = animationType === 'bubbles' ? -0.1 : animationType === 'snow' ? 0.05 : 0.35;
+        const defaultGravity = animationType === 'bubbles'
+            ? -0.1
+            : animationType === 'snow'
+                ? 0.05
+                : 0.35;
         const gravity = (_b = (_a = config === null || config === void 0 ? void 0 : config.physics) === null || _a === void 0 ? void 0 : _a.gravity) !== null && _b !== void 0 ? _b : defaultGravity;
         const friction = (_d = (_c = config === null || config === void 0 ? void 0 : config.physics) === null || _c === void 0 ? void 0 : _c.friction) !== null && _d !== void 0 ? _d : 0.98;
         const wind = (_f = (_e = config === null || config === void 0 ? void 0 : config.physics) === null || _e === void 0 ? void 0 : _e.wind) !== null && _f !== void 0 ? _f : 0;
+        // Track frame count for mobile optimization
+        let frameCount = 0;
         const updateParticles = () => {
             let activeParticles = 0;
+            frameCount++;
+            // Skip frame rendering on mobile to improve performance
+            const skipFrame = shouldSkipFrame(frameCount);
             particlesRef.current = particlesRef.current.map((particle) => {
                 if (particle.life <= 0)
                     return particle;
@@ -1222,13 +1390,13 @@ const useReward = (elementId, animationType, config) => {
                 }
                 return particle;
             });
-            // Render particles
-            if (rootRef.current) {
+            // Render particles (skip rendering on mobile for some frames)
+            if (rootRef.current && !skipFrame) {
                 rootRef.current.render(React.createElement(React.Fragment, null, particlesRef.current
                     .filter((p) => p.life > 0)
                     .map((particle) => (React.createElement("div", { key: particle.id, style: createParticleStyle(particle, containerRect) }, animationHandler.renderParticle(particle))))));
             }
-            if (activeParticles > 0) {
+            if (activeParticles > 0 && isTabVisible.current) {
                 animationFrameRef.current = requestAnimationFrame(updateParticles);
             }
             else {
@@ -1240,7 +1408,8 @@ const useReward = (elementId, animationType, config) => {
                     rootRef.current.unmount();
                     rootRef.current = null;
                 }
-                if (containerRef.current && document.body.contains(containerRef.current)) {
+                if (containerRef.current &&
+                    document.body.contains(containerRef.current)) {
                     document.body.removeChild(containerRef.current);
                     containerRef.current = null;
                 }
@@ -1265,7 +1434,8 @@ const useReward = (elementId, animationType, config) => {
                 rootRef.current.unmount();
                 rootRef.current = null;
             }
-            if (containerRef.current && document.body.contains(containerRef.current)) {
+            if (containerRef.current &&
+                document.body.contains(containerRef.current)) {
                 document.body.removeChild(containerRef.current);
                 containerRef.current = null;
             }
@@ -1274,5 +1444,5 @@ const useReward = (elementId, animationType, config) => {
     return { reward, isAnimating };
 };
 
-export { emojiPresets, useReward };
+export { emojiPresets, isMobileDevice, optimizeConfigForMobile, useReward };
 //# sourceMappingURL=index.esm.js.map