partycles 1.0.0 → 1.1.0

package/README.md

@@ -359,7 +359,7 @@ function Achievement({ unlocked, name }) {
 1. **Unique IDs**: Ensure each animated element has a unique ID
 2. **Performance**: Avoid triggering multiple animations simultaneously
 3. **Accessibility**: Provide alternative feedback for users who prefer reduced motion
-4. **Mobile**: Test animations on mobile devices and adjust particle counts if needed
+4. **Mobile**: Partycles automatically optimizes for mobile devices
 
 ```tsx
 // Respect user preferences
@@ -370,6 +370,32 @@ const { reward } = useReward('buttonId', 'confetti', {
 });
 ```
 
+## 📱 Mobile Optimization
+
+Partycles automatically detects mobile devices and optimizes performance:
+
+- **Reduced particle counts** (60% of desktop)
+- **Smaller particle sizes** (80% of desktop)
+- **Shorter lifetimes** (80% of desktop)
+- **Frame skipping** for smoother performance
+- **Tab visibility detection** to pause when inactive
+
+You can also manually check for mobile devices:
+
+```tsx
+import { isMobileDevice, optimizeConfigForMobile } from 'partycles';
+
+if (isMobileDevice()) {
+  // Custom mobile logic
+}
+
+// Or manually optimize a config
+const mobileConfig = optimizeConfigForMobile({
+  particleCount: 100,
+  elementSize: 30
+});
+```
+
 ## 🔧 Advanced Usage
 
 ### Custom Physics

package/dist/animations/index.d.ts

@@ -1,4 +1,5 @@
 export { useReward } from './useReward';
 export type { AnimationType, AnimationConfig, UseRewardConfig } from './types';
 export { emojiPresets } from './animations/emoji';
+export { isMobileDevice, optimizeConfigForMobile } from './mobileOptimizations';
 //# sourceMappingURL=index.d.ts.map

package/dist/animations/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EAAE,aAAa,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAC/E,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EAAE,aAAa,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAC/E,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,EAAE,cAAc,EAAE,uBAAuB,EAAE,MAAM,uBAAuB,CAAC"}

package/dist/animations/mobileOptimizations.d.ts

@@ -0,0 +1,6 @@
+import { AnimationConfig } from './types';
+export declare const isMobileDevice: () => boolean;
+export declare const optimizeConfigForMobile: (config: AnimationConfig) => AnimationConfig;
+export declare const shouldSkipFrame: (frameCount: number) => boolean;
+export declare const simplifyVisualEffects: (animationType: string) => boolean;
+//# sourceMappingURL=mobileOptimizations.d.ts.map

package/dist/animations/mobileOptimizations.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mobileOptimizations.d.ts","sourceRoot":"","sources":["../src/mobileOptimizations.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE1C,eAAO,MAAM,cAAc,QAAO,OAcjC,CAAC;AAEF,eAAO,MAAM,uBAAuB,GAAI,QAAQ,eAAe,KAAG,eAoBjE,CAAC;AAGF,eAAO,MAAM,eAAe,GAAI,YAAY,MAAM,KAAG,OAIpD,CAAC;AAGF,eAAO,MAAM,qBAAqB,GAAI,eAAe,MAAM,KAAG,OAK7D,CAAC"}

package/dist/animations/useReward.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useReward.d.ts","sourceRoot":"","sources":["../src/useReward.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,aAAa,EAAE,eAAe,EAAY,MAAM,SAAS,CAAC;AAInE,UAAU,eAAe;IACvB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,WAAW,EAAE,OAAO,CAAC;CACtB;AAED,eAAO,MAAM,SAAS,GACpB,WAAW,MAAM,EACjB,eAAe,aAAa,EAC5B,SAAS,eAAe,KACvB,eAkJF,CAAC"}
+{"version":3,"file":"useReward.d.ts","sourceRoot":"","sources":["../src/useReward.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,aAAa,EAAE,eAAe,EAAY,MAAM,SAAS,CAAC;AAKnE,UAAU,eAAe;IACvB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,WAAW,EAAE,OAAO,CAAC;CACtB;AAED,eAAO,MAAM,SAAS,GACpB,WAAW,MAAM,EACjB,eAAe,aAAa,EAC5B,SAAS,eAAe,KACvB,eAuKF,CAAC"}

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 export { useReward } from './useReward';
 export type { AnimationType, AnimationConfig, UseRewardConfig } from './types';
 export { emojiPresets } from './animations/emoji';
+export { isMobileDevice, optimizeConfigForMobile } from './mobileOptimizations';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EAAE,aAAa,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAC/E,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EAAE,aAAa,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAC/E,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,EAAE,cAAc,EAAE,uBAAuB,EAAE,MAAM,uBAAuB,CAAC"}

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) => {
@@ -1150,12 +1150,57 @@ 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 +1216,10 @@ 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';
@@ -1193,8 +1240,13 @@ const useReward = (elementId, animationType, config) => {
         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 +1274,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 {
@@ -1274,5 +1326,5 @@ const useReward = (elementId, animationType, config) => {
     return { reward, isAnimating };
 };
 
-export { emojiPresets, useReward };
+export { emojiPresets, isMobileDevice, optimizeConfigForMobile, useReward };
 //# sourceMappingURL=index.esm.js.map