partycles 1.1.0 → 1.1.4

package/dist/animations/stars.js.map

@@ -1 +1 @@
-{"version":3,"file":"stars.js","sources":["../../src/utils.ts","../../src/animations/stars.tsx"],"sourcesContent":["import { Particle } from './types';\n\nexport const randomInRange = (min: number, max: number): number => {\n  return Math.random() * (max - min) + min;\n};\n\nexport const degreesToRadians = (degrees: number): number => {\n  return (degrees * Math.PI) / 180;\n};\n\nexport const generateId = (): string => {\n  return Math.random().toString(36).substring(2, 9);\n};\n\nexport const getRandomColor = (colors: string[]): string => {\n  return colors[Math.floor(Math.random() * colors.length)] || colors[0] || '#ffffff';\n};\n\nexport const createParticleStyle = (\n  particle: Particle,\n  containerRect: DOMRect\n): React.CSSProperties => {\n  return {\n    position: 'absolute',\n    left: `${particle.x - containerRect.left}px`,\n    top: `${particle.y - containerRect.top}px`,\n    transform: `rotate(${particle.rotation}deg)`,\n    opacity: particle.opacity,\n    pointerEvents: 'none',\n    transition: 'none',\n    willChange: 'transform, opacity',\n  };\n};","import React from 'react';\nimport { AnimationConfig, Particle } from '../types';\nimport { randomInRange, generateId } from '../utils';\n\nconst starColors = ['#FFD700', '#FFA500', '#FF6347', '#FFE4B5'];\n\nexport const createStarParticles = (\n  origin: { x: number; y: number },\n  config: AnimationConfig\n): Particle[] => {\n  const {\n    particleCount = 40,\n    startVelocity = 18,\n    colors = starColors,\n    elementSize = 30\n  } = config;\n\n  const particles: Particle[] = [];\n\n  for (let i = 0; i < particleCount; i++) {\n    const angle = randomInRange(0, 360);\n    const velocity = randomInRange(startVelocity * 0.5, startVelocity);\n\n    particles.push({\n      id: generateId(),\n      x: origin.x,\n      y: origin.y,\n      vx: Math.cos((angle * Math.PI) / 180) * velocity,\n      vy: Math.sin((angle * Math.PI) / 180) * velocity - 15,\n      life: config.lifetime || 150,\n      opacity: 1,\n      size: randomInRange(elementSize * 0.5, elementSize * 1.3),\n      rotation: randomInRange(0, 360),\n      color: colors[Math.floor(Math.random() * colors.length)] || colors[0] || '#ffffff',\n    });\n  }\n\n  return particles;\n};\n\nexport const renderStarParticle = (particle: Particle): React.ReactNode => {\n  return (\n    <svg\n      key={particle.id}\n      width={particle.size}\n      height={particle.size}\n      viewBox=\"0 0 24 24\"\n      fill={particle.color}\n      style={{\n        filter: `drop-shadow(0 0 ${particle.size * 0.2}px ${particle.color})`,\n      }}\n    >\n      <path d=\"M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z\" />\n    </svg>\n  );\n};"],"names":[],"mappings":";;;;AAEO,MAAM,aAAa,GAAG,CAAC,GAAW,EAAE,GAAW,KAAY;AAChE,IAAA,OAAO,IAAI,CAAC,MAAM,EAAE,IAAI,GAAG,GAAG,GAAG,CAAC,GAAG,GAAG;AAC1C,CAAC;AAMM,MAAM,UAAU,GAAG,MAAa;AACrC,IAAA,OAAO,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC;AACnD,CAAC;;ACRD,MAAM,UAAU,GAAG,CAAC,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,CAAC;MAElD,mBAAmB,GAAG,CACjC,MAAgC,EAChC,MAAuB,KACT;AACd,IAAA,MAAM,EACJ,aAAa,GAAG,EAAE,EAClB,aAAa,GAAG,EAAE,EAClB,MAAM,GAAG,UAAU,EACnB,WAAW,GAAG,EAAE,EACjB,GAAG,MAAM;IAEV,MAAM,SAAS,GAAe,EAAE;AAEhC,IAAA,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,aAAa,EAAE,CAAC,EAAE,EAAE;QACtC,MAAM,KAAK,GAAG,aAAa,CAAC,CAAC,EAAE,GAAG,CAAC;QACnC,MAAM,QAAQ,GAAG,aAAa,CAAC,aAAa,GAAG,GAAG,EAAE,aAAa,CAAC;QAElE,SAAS,CAAC,IAAI,CAAC;YACb,EAAE,EAAE,UAAU,EAAE;YAChB,CAAC,EAAE,MAAM,CAAC,CAAC;YACX,CAAC,EAAE,MAAM,CAAC,CAAC;AACX,YAAA,EAAE,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,KAAK,GAAG,IAAI,CAAC,EAAE,IAAI,GAAG,CAAC,GAAG,QAAQ;AAChD,YAAA,EAAE,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,KAAK,GAAG,IAAI,CAAC,EAAE,IAAI,GAAG,CAAC,GAAG,QAAQ,GAAG,EAAE;AACrD,YAAA,IAAI,EAAE,MAAM,CAAC,QAAQ,IAAI,GAAG;AAC5B,YAAA,OAAO,EAAE,CAAC;YACV,IAAI,EAAE,aAAa,CAAC,WAAW,GAAG,GAAG,EAAE,WAAW,GAAG,GAAG,CAAC;AACzD,YAAA,QAAQ,EAAE,aAAa,CAAC,CAAC,EAAE,GAAG,CAAC;YAC/B,KAAK,EAAE,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,IAAI,SAAS;AACnF,SAAA,CAAC;;AAGJ,IAAA,OAAO,SAAS;AAClB;AAEa,MAAA,kBAAkB,GAAG,CAAC,QAAkB,KAAqB;AACxE,IAAA,QACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAE,QAAQ,CAAC,EAAE,EAChB,KAAK,EAAE,QAAQ,CAAC,IAAI,EACpB,MAAM,EAAE,QAAQ,CAAC,IAAI,EACrB,OAAO,EAAC,WAAW,EACnB,IAAI,EAAE,QAAQ,CAAC,KAAK,EACpB,KAAK,EAAE;YACL,MAAM,EAAE,CAAmB,gBAAA,EAAA,QAAQ,CAAC,IAAI,GAAG,GAAG,CAAM,GAAA,EAAA,QAAQ,CAAC,KAAK,CAAG,CAAA,CAAA;AACtE,SAAA,EAAA;AAED,QAAA,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAM,CAAC,EAAC,sGAAsG,EAAG,CAAA,CAC7G;AAEV;;;;;"}
+{"version":3,"file":"stars.js","sources":["../../src/utils.ts","../../src/animations/stars.tsx"],"sourcesContent":["import { Particle } from './types';\n\nexport const randomInRange = (min: number, max: number): number => {\n  return Math.random() * (max - min) + min;\n};\n\nexport const degreesToRadians = (degrees: number): number => {\n  return (degrees * Math.PI) / 180;\n};\n\nexport const generateId = (): string => {\n  return Math.random().toString(36).substring(2, 9);\n};\n\nexport const getRandomColor = (colors: string[]): string => {\n  return (\n    colors[Math.floor(Math.random() * colors.length)] || colors[0] || '#ffffff'\n  );\n};\n\nexport const createParticleStyle = (\n  particle: Particle,\n  containerRect: DOMRect\n): React.CSSProperties => {\n  return {\n    position: 'absolute',\n    left: `${particle.x - containerRect.left}px`,\n    top: `${particle.y - containerRect.top}px`,\n    transform: `rotate(${particle.rotation}deg)`,\n    opacity: particle.opacity,\n    pointerEvents: 'none',\n    transition: 'none',\n    willChange: 'transform, opacity',\n  };\n};\n","import React from 'react';\nimport { AnimationConfig, Particle } from '../types';\nimport { randomInRange, generateId } from '../utils';\n\nconst starColors = ['#FFD700', '#FFA500', '#FF6347', '#FFE4B5'];\n\nexport const createStarParticles = (\n  origin: { x: number; y: number },\n  config: AnimationConfig\n): Particle[] => {\n  const {\n    particleCount = 40,\n    startVelocity = 18,\n    colors = starColors,\n    elementSize = 30,\n  } = config;\n\n  const particles: Particle[] = [];\n\n  for (let i = 0; i < particleCount; i++) {\n    const angle = randomInRange(0, 360);\n    const velocity = randomInRange(startVelocity * 0.5, startVelocity);\n\n    particles.push({\n      id: generateId(),\n      x: origin.x,\n      y: origin.y,\n      vx: Math.cos((angle * Math.PI) / 180) * velocity,\n      vy: Math.sin((angle * Math.PI) / 180) * velocity - 15,\n      life: config.lifetime || 150,\n      opacity: 1,\n      size: randomInRange(elementSize * 0.5, elementSize * 1.3),\n      rotation: randomInRange(0, 360),\n      color:\n        colors[Math.floor(Math.random() * colors.length)] ||\n        colors[0] ||\n        '#ffffff',\n    });\n  }\n\n  return particles;\n};\n\nexport const renderStarParticle = (particle: Particle): React.ReactNode => {\n  return (\n    <svg\n      key={particle.id}\n      width={particle.size}\n      height={particle.size}\n      viewBox=\"0 0 24 24\"\n      fill={particle.color}\n      style={{\n        filter: `drop-shadow(0 0 ${particle.size * 0.2}px ${particle.color})`,\n      }}\n    >\n      <path d=\"M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z\" />\n    </svg>\n  );\n};\n"],"names":[],"mappings":";;;;AAEO,MAAM,aAAa,GAAG,CAAC,GAAW,EAAE,GAAW,KAAY;AAChE,IAAA,OAAO,IAAI,CAAC,MAAM,EAAE,IAAI,GAAG,GAAG,GAAG,CAAC,GAAG,GAAG;AAC1C,CAAC;AAMM,MAAM,UAAU,GAAG,MAAa;AACrC,IAAA,OAAO,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC;AACnD,CAAC;;ACRD,MAAM,UAAU,GAAG,CAAC,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,CAAC;MAElD,mBAAmB,GAAG,CACjC,MAAgC,EAChC,MAAuB,KACT;AACd,IAAA,MAAM,EACJ,aAAa,GAAG,EAAE,EAClB,aAAa,GAAG,EAAE,EAClB,MAAM,GAAG,UAAU,EACnB,WAAW,GAAG,EAAE,GACjB,GAAG,MAAM;IAEV,MAAM,SAAS,GAAe,EAAE;AAEhC,IAAA,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,aAAa,EAAE,CAAC,EAAE,EAAE;QACtC,MAAM,KAAK,GAAG,aAAa,CAAC,CAAC,EAAE,GAAG,CAAC;QACnC,MAAM,QAAQ,GAAG,aAAa,CAAC,aAAa,GAAG,GAAG,EAAE,aAAa,CAAC;QAElE,SAAS,CAAC,IAAI,CAAC;YACb,EAAE,EAAE,UAAU,EAAE;YAChB,CAAC,EAAE,MAAM,CAAC,CAAC;YACX,CAAC,EAAE,MAAM,CAAC,CAAC;AACX,YAAA,EAAE,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,KAAK,GAAG,IAAI,CAAC,EAAE,IAAI,GAAG,CAAC,GAAG,QAAQ;AAChD,YAAA,EAAE,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,KAAK,GAAG,IAAI,CAAC,EAAE,IAAI,GAAG,CAAC,GAAG,QAAQ,GAAG,EAAE;AACrD,YAAA,IAAI,EAAE,MAAM,CAAC,QAAQ,IAAI,GAAG;AAC5B,YAAA,OAAO,EAAE,CAAC;YACV,IAAI,EAAE,aAAa,CAAC,WAAW,GAAG,GAAG,EAAE,WAAW,GAAG,GAAG,CAAC;AACzD,YAAA,QAAQ,EAAE,aAAa,CAAC,CAAC,EAAE,GAAG,CAAC;AAC/B,YAAA,KAAK,EACH,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC;gBACjD,MAAM,CAAC,CAAC,CAAC;gBACT,SAAS;AACZ,SAAA,CAAC;;AAGJ,IAAA,OAAO,SAAS;AAClB;AAEa,MAAA,kBAAkB,GAAG,CAAC,QAAkB,KAAqB;AACxE,IAAA,QACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAE,QAAQ,CAAC,EAAE,EAChB,KAAK,EAAE,QAAQ,CAAC,IAAI,EACpB,MAAM,EAAE,QAAQ,CAAC,IAAI,EACrB,OAAO,EAAC,WAAW,EACnB,IAAI,EAAE,QAAQ,CAAC,KAAK,EACpB,KAAK,EAAE;YACL,MAAM,EAAE,CAAmB,gBAAA,EAAA,QAAQ,CAAC,IAAI,GAAG,GAAG,CAAM,GAAA,EAAA,QAAQ,CAAC,KAAK,CAAG,CAAA,CAAA;AACtE,SAAA,EAAA;AAED,QAAA,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAM,CAAC,EAAC,sGAAsG,EAAG,CAAA,CAC7G;AAEV;;;;;"}

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;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"}
+{"version":3,"file":"useReward.d.ts","sourceRoot":"","sources":["../src/useReward.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,aAAa,EAAE,eAAe,EAAY,MAAM,SAAS,CAAC;AAQnE,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,eAwLF,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAEnC,eAAO,MAAM,aAAa,GAAI,KAAK,MAAM,EAAE,KAAK,MAAM,KAAG,MAExD,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAAI,SAAS,MAAM,KAAG,MAElD,CAAC;AAEF,eAAO,MAAM,UAAU,QAAO,MAE7B,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,QAAQ,MAAM,EAAE,KAAG,MAEjD,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAC9B,UAAU,QAAQ,EAClB,eAAe,OAAO,KACrB,KAAK,CAAC,aAWR,CAAC"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAEnC,eAAO,MAAM,aAAa,GAAI,KAAK,MAAM,EAAE,KAAK,MAAM,KAAG,MAExD,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAAI,SAAS,MAAM,KAAG,MAElD,CAAC;AAEF,eAAO,MAAM,UAAU,QAAO,MAE7B,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,QAAQ,MAAM,EAAE,KAAG,MAIjD,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAC9B,UAAU,QAAQ,EAClB,eAAe,OAAO,KACrB,KAAK,CAAC,aAWR,CAAC"}

package/dist/index.esm.js

@@ -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`,
@@ -1154,7 +1261,10 @@ const isMobileDevice = () => {
     if (typeof window === 'undefined')
         return false;
     // Check user agent
-    const userAgent = navigator.userAgent || navigator.vendor || window.opera;
+    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;
@@ -1217,7 +1327,9 @@ const useReward = (elementId, animationType, config) => {
             return;
         }
         // Apply mobile performance optimizations
-        const optimizedConfig = config ? optimizeConfigForMobile(config) : undefined;
+        const optimizedConfig = config
+            ? optimizeConfigForMobile(config)
+            : undefined;
         // Create particles
         particlesRef.current = animationHandler.createParticles(origin, optimizedConfig || {});
         // Create container
@@ -1236,7 +1348,11 @@ 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;
@@ -1292,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;
                 }
@@ -1317,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;
             }