partycles 1.0.0 → 1.1.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (157) hide show
  1. package/README.md +27 -1
  2. package/dist/animations/animations/aurora.d.ts.map +1 -1
  3. package/dist/animations/animations/balloons.d.ts.map +1 -1
  4. package/dist/animations/animations/bubbles.d.ts.map +1 -1
  5. package/dist/animations/animations/coins.d.ts.map +1 -1
  6. package/dist/animations/animations/confetti.d.ts.map +1 -1
  7. package/dist/animations/animations/crystals.d.ts.map +1 -1
  8. package/dist/animations/animations/fireflies.d.ts.map +1 -1
  9. package/dist/animations/animations/fireworks.d.ts.map +1 -1
  10. package/dist/animations/animations/galaxy.d.ts.map +1 -1
  11. package/dist/animations/animations/glitch.d.ts.map +1 -1
  12. package/dist/animations/animations/index.d.ts.map +1 -1
  13. package/dist/animations/animations/leaves.d.ts.map +1 -1
  14. package/dist/animations/animations/magicdust.d.ts.map +1 -1
  15. package/dist/animations/animations/paint.d.ts.map +1 -1
  16. package/dist/animations/animations/petals.d.ts.map +1 -1
  17. package/dist/animations/animations/snow.d.ts.map +1 -1
  18. package/dist/animations/animations/sparkles.d.ts.map +1 -1
  19. package/dist/animations/animations/stars.d.ts.map +1 -1
  20. package/dist/animations/aurora.d.ts.map +1 -1
  21. package/dist/animations/balloons.d.ts.map +1 -1
  22. package/dist/animations/bubbles.d.ts.map +1 -1
  23. package/dist/animations/bubbles.esm.js +10 -3
  24. package/dist/animations/bubbles.esm.js.map +1 -1
  25. package/dist/animations/bubbles.js +10 -3
  26. package/dist/animations/bubbles.js.map +1 -1
  27. package/dist/animations/coins.d.ts.map +1 -1
  28. package/dist/animations/confetti.d.ts.map +1 -1
  29. package/dist/animations/confetti.esm.js +20 -3
  30. package/dist/animations/confetti.esm.js.map +1 -1
  31. package/dist/animations/confetti.js +20 -3
  32. package/dist/animations/confetti.js.map +1 -1
  33. package/dist/animations/crystals.d.ts.map +1 -1
  34. package/dist/animations/emoji.esm.js +3 -3
  35. package/dist/animations/emoji.esm.js.map +1 -1
  36. package/dist/animations/emoji.js +3 -3
  37. package/dist/animations/emoji.js.map +1 -1
  38. package/dist/animations/fireflies.d.ts.map +1 -1
  39. package/dist/animations/fireworks.d.ts.map +1 -1
  40. package/dist/animations/fireworks.esm.js +11 -3
  41. package/dist/animations/fireworks.esm.js.map +1 -1
  42. package/dist/animations/fireworks.js +11 -3
  43. package/dist/animations/fireworks.js.map +1 -1
  44. package/dist/animations/galaxy.d.ts.map +1 -1
  45. package/dist/animations/glitch.d.ts.map +1 -1
  46. package/dist/animations/hearts.esm.js +2 -2
  47. package/dist/animations/hearts.esm.js.map +1 -1
  48. package/dist/animations/hearts.js +2 -2
  49. package/dist/animations/hearts.js.map +1 -1
  50. package/dist/animations/index.d.ts +1 -0
  51. package/dist/animations/index.d.ts.map +1 -1
  52. package/dist/animations/leaves.d.ts.map +1 -1
  53. package/dist/animations/magicdust.d.ts.map +1 -1
  54. package/dist/animations/mobileOptimizations.d.ts +6 -0
  55. package/dist/animations/mobileOptimizations.d.ts.map +1 -0
  56. package/dist/animations/paint.d.ts.map +1 -1
  57. package/dist/animations/petals.d.ts.map +1 -1
  58. package/dist/animations/snow.d.ts.map +1 -1
  59. package/dist/animations/snow.esm.js +4 -2
  60. package/dist/animations/snow.esm.js.map +1 -1
  61. package/dist/animations/snow.js +4 -2
  62. package/dist/animations/snow.js.map +1 -1
  63. package/dist/animations/sparkles.d.ts.map +1 -1
  64. package/dist/animations/sparkles.esm.js +4 -2
  65. package/dist/animations/sparkles.esm.js.map +1 -1
  66. package/dist/animations/sparkles.js +4 -2
  67. package/dist/animations/sparkles.js.map +1 -1
  68. package/dist/animations/stars.d.ts.map +1 -1
  69. package/dist/animations/stars.esm.js +4 -2
  70. package/dist/animations/stars.esm.js.map +1 -1
  71. package/dist/animations/stars.js +4 -2
  72. package/dist/animations/stars.js.map +1 -1
  73. package/dist/animations/useReward.d.ts.map +1 -1
  74. package/dist/animations/utils.d.ts.map +1 -1
  75. package/dist/index.d.ts +1 -0
  76. package/dist/index.d.ts.map +1 -1
  77. package/dist/index.esm.js +230 -60
  78. package/dist/index.esm.js.map +1 -1
  79. package/dist/index.js +230 -58
  80. package/dist/index.js.map +1 -1
  81. package/dist/mobileOptimizations.d.ts +6 -0
  82. package/dist/mobileOptimizations.d.ts.map +1 -0
  83. package/dist/useReward.d.ts.map +1 -1
  84. package/dist/utils.d.ts.map +1 -1
  85. package/package.json +13 -2
  86. package/dist/animations/animations/bees.d.ts +0 -8
  87. package/dist/animations/animations/bees.d.ts.map +0 -1
  88. package/dist/animations/animations/butterflies.d.ts +0 -8
  89. package/dist/animations/animations/butterflies.d.ts.map +0 -1
  90. package/dist/animations/animations/candy.d.ts +0 -8
  91. package/dist/animations/animations/candy.d.ts.map +0 -1
  92. package/dist/animations/animations/champagne.d.ts +0 -8
  93. package/dist/animations/animations/champagne.d.ts.map +0 -1
  94. package/dist/animations/animations/dandelion.d.ts +0 -8
  95. package/dist/animations/animations/dandelion.d.ts.map +0 -1
  96. package/dist/animations/animations/dice.d.ts +0 -8
  97. package/dist/animations/animations/dice.d.ts.map +0 -1
  98. package/dist/animations/animations/donuts.d.ts +0 -8
  99. package/dist/animations/animations/donuts.d.ts.map +0 -1
  100. package/dist/animations/animations/dragons.d.ts +0 -8
  101. package/dist/animations/animations/dragons.d.ts.map +0 -1
  102. package/dist/animations/animations/ghosts.d.ts +0 -8
  103. package/dist/animations/animations/ghosts.d.ts.map +0 -1
  104. package/dist/animations/animations/levelup.d.ts +0 -8
  105. package/dist/animations/animations/levelup.d.ts.map +0 -1
  106. package/dist/animations/animations/lightning.d.ts +0 -8
  107. package/dist/animations/animations/lightning.d.ts.map +0 -1
  108. package/dist/animations/animations/matrix.d.ts +0 -8
  109. package/dist/animations/animations/matrix.d.ts.map +0 -1
  110. package/dist/animations/animations/music.d.ts +0 -8
  111. package/dist/animations/animations/music.d.ts.map +0 -1
  112. package/dist/animations/animations/pixels.d.ts +0 -8
  113. package/dist/animations/animations/pixels.d.ts.map +0 -1
  114. package/dist/animations/animations/pizza.d.ts +0 -8
  115. package/dist/animations/animations/pizza.d.ts.map +0 -1
  116. package/dist/animations/animations/popcorn.d.ts +0 -8
  117. package/dist/animations/animations/popcorn.d.ts.map +0 -1
  118. package/dist/animations/animations/rain.d.ts +0 -8
  119. package/dist/animations/animations/rain.d.ts.map +0 -1
  120. package/dist/animations/animations/runes.d.ts +0 -8
  121. package/dist/animations/animations/runes.d.ts.map +0 -1
  122. package/dist/animations/bees.d.ts +0 -8
  123. package/dist/animations/bees.d.ts.map +0 -1
  124. package/dist/animations/butterflies.d.ts +0 -8
  125. package/dist/animations/butterflies.d.ts.map +0 -1
  126. package/dist/animations/candy.d.ts +0 -8
  127. package/dist/animations/candy.d.ts.map +0 -1
  128. package/dist/animations/champagne.d.ts +0 -8
  129. package/dist/animations/champagne.d.ts.map +0 -1
  130. package/dist/animations/dandelion.d.ts +0 -8
  131. package/dist/animations/dandelion.d.ts.map +0 -1
  132. package/dist/animations/dice.d.ts +0 -8
  133. package/dist/animations/dice.d.ts.map +0 -1
  134. package/dist/animations/donuts.d.ts +0 -8
  135. package/dist/animations/donuts.d.ts.map +0 -1
  136. package/dist/animations/dragons.d.ts +0 -8
  137. package/dist/animations/dragons.d.ts.map +0 -1
  138. package/dist/animations/ghosts.d.ts +0 -8
  139. package/dist/animations/ghosts.d.ts.map +0 -1
  140. package/dist/animations/levelup.d.ts +0 -8
  141. package/dist/animations/levelup.d.ts.map +0 -1
  142. package/dist/animations/lightning.d.ts +0 -8
  143. package/dist/animations/lightning.d.ts.map +0 -1
  144. package/dist/animations/matrix.d.ts +0 -8
  145. package/dist/animations/matrix.d.ts.map +0 -1
  146. package/dist/animations/music.d.ts +0 -8
  147. package/dist/animations/music.d.ts.map +0 -1
  148. package/dist/animations/pixels.d.ts +0 -8
  149. package/dist/animations/pixels.d.ts.map +0 -1
  150. package/dist/animations/pizza.d.ts +0 -8
  151. package/dist/animations/pizza.d.ts.map +0 -1
  152. package/dist/animations/popcorn.d.ts +0 -8
  153. package/dist/animations/popcorn.d.ts.map +0 -1
  154. package/dist/animations/rain.d.ts +0 -8
  155. package/dist/animations/rain.d.ts.map +0 -1
  156. package/dist/animations/runes.d.ts +0 -8
  157. package/dist/animations/runes.d.ts.map +0 -1
package/dist/index.js CHANGED
@@ -13,7 +13,7 @@ const generateId = () => {
13
13
  return Math.random().toString(36).substring(2, 9);
14
14
  };
15
15
  const getRandomColor = (colors) => {
16
- return colors[Math.floor(Math.random() * colors.length)] || colors[0] || '#ffffff';
16
+ return (colors[Math.floor(Math.random() * colors.length)] || colors[0] || '#ffffff');
17
17
  };
18
18
  const createParticleStyle = (particle, containerRect) => {
19
19
  return {
@@ -28,9 +28,26 @@ const createParticleStyle = (particle, containerRect) => {
28
28
  };
29
29
  };
30
30
 
31
- const defaultColors$3 = ['#f44336', '#e91e63', '#9c27b0', '#673ab7', '#3f51b5', '#2196f3', '#03a9f4', '#00bcd4', '#009688', '#4caf50', '#8bc34a', '#cddc39', '#ffeb3b', '#ffc107', '#ff9800', '#ff5722'];
31
+ const defaultColors$3 = [
32
+ '#f44336',
33
+ '#e91e63',
34
+ '#9c27b0',
35
+ '#673ab7',
36
+ '#3f51b5',
37
+ '#2196f3',
38
+ '#03a9f4',
39
+ '#00bcd4',
40
+ '#009688',
41
+ '#4caf50',
42
+ '#8bc34a',
43
+ '#cddc39',
44
+ '#ffeb3b',
45
+ '#ffc107',
46
+ '#ff9800',
47
+ '#ff5722',
48
+ ];
32
49
  const createConfettiParticles = (origin, config) => {
33
- const { particleCount = 50, startVelocity = 20, colors = defaultColors$3, elementSize = 20 } = config;
50
+ const { particleCount = 50, startVelocity = 20, colors = defaultColors$3, elementSize = 20, } = config;
34
51
  const particles = [];
35
52
  for (let i = 0; i < particleCount; i++) {
36
53
  const angle = randomInRange(0, 360);
@@ -62,7 +79,7 @@ const renderConfettiParticle = (particle) => {
62
79
  };
63
80
 
64
81
  const createSparkleParticles = (origin, config) => {
65
- const { particleCount = 35, spread = 120, startVelocity = 15, elementSize = 25, colors = ['#FFD700', '#FFFFFF'] } = config;
82
+ const { particleCount = 35, spread = 120, startVelocity = 15, elementSize = 25, colors = ['#FFD700', '#FFFFFF'], } = config;
66
83
  const particles = [];
67
84
  for (let i = 0; i < particleCount; i++) {
68
85
  const velocityScale = startVelocity / 45; // Scale based on default
@@ -76,7 +93,9 @@ const createSparkleParticles = (origin, config) => {
76
93
  opacity: 0,
77
94
  size: randomInRange(elementSize * 0.4, elementSize * 1.2),
78
95
  rotation: randomInRange(0, 360),
79
- color: colors[Math.floor(Math.random() * colors.length)] || colors[0] || '#ffffff',
96
+ color: colors[Math.floor(Math.random() * colors.length)] ||
97
+ colors[0] ||
98
+ '#ffffff',
80
99
  });
81
100
  }
82
101
  return particles;
@@ -92,7 +111,7 @@ const renderSparkleParticle = (particle) => {
92
111
 
93
112
  const heartColors = ['#ff1744', '#e91e63', '#ff4569', '#ff6b6b', '#ee5a70'];
94
113
  const createHeartParticles = (origin, config) => {
95
- const { particleCount = 25, startVelocity = 12, colors = heartColors, elementSize = 30 } = config;
114
+ const { particleCount = 25, startVelocity = 12, colors = heartColors, elementSize = 30, } = config;
96
115
  const particles = [];
97
116
  for (let i = 0; i < particleCount; i++) {
98
117
  const angle = randomInRange(-45, -135);
@@ -120,9 +139,17 @@ const renderHeartParticle = (particle) => {
120
139
  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" })));
121
140
  };
122
141
 
123
- const fireworkColors = ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff', '#00ffff', '#ffffff'];
142
+ const fireworkColors = [
143
+ '#ff0000',
144
+ '#00ff00',
145
+ '#0000ff',
146
+ '#ffff00',
147
+ '#ff00ff',
148
+ '#00ffff',
149
+ '#ffffff',
150
+ ];
124
151
  const createFireworkParticles = (origin, config) => {
125
- const { particleCount = 60, startVelocity = 25, colors = fireworkColors, elementSize = 8 } = config;
152
+ const { particleCount = 60, startVelocity = 25, colors = fireworkColors, elementSize = 8, } = config;
126
153
  const particles = [];
127
154
  for (let i = 0; i < particleCount; i++) {
128
155
  const angle = (360 / particleCount) * i + randomInRange(-5, 5);
@@ -159,9 +186,14 @@ const renderFireworkParticle = (particle) => {
159
186
  } }));
160
187
  };
161
188
 
162
- 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)'];
189
+ const bubbleColors = [
190
+ 'rgba(66, 165, 245, 0.4)',
191
+ 'rgba(41, 182, 246, 0.4)',
192
+ 'rgba(38, 198, 218, 0.4)',
193
+ 'rgba(129, 212, 250, 0.4)',
194
+ ];
163
195
  const createBubbleParticles = (origin, config) => {
164
- const { particleCount = 30, spread = 80, startVelocity = 8, colors = bubbleColors, elementSize = 40 } = config;
196
+ const { particleCount = 30, spread = 80, startVelocity = 8, colors = bubbleColors, elementSize = 40, } = config;
165
197
  const particles = [];
166
198
  for (let i = 0; i < particleCount; i++) {
167
199
  particles.push({
@@ -174,7 +206,9 @@ const createBubbleParticles = (origin, config) => {
174
206
  opacity: 0.7,
175
207
  size: randomInRange(elementSize * 0.4, elementSize * 1.2),
176
208
  rotation: 0,
177
- color: colors[Math.floor(Math.random() * colors.length)] || colors[0] || '#ffffff',
209
+ color: colors[Math.floor(Math.random() * colors.length)] ||
210
+ colors[0] ||
211
+ '#ffffff',
178
212
  });
179
213
  }
180
214
  return particles;
@@ -196,7 +230,7 @@ const renderBubbleParticle = (particle) => {
196
230
 
197
231
  const starColors = ['#FFD700', '#FFA500', '#FF6347', '#FFE4B5'];
198
232
  const createStarParticles = (origin, config) => {
199
- const { particleCount = 40, startVelocity = 18, colors = starColors, elementSize = 30 } = config;
233
+ const { particleCount = 40, startVelocity = 18, colors = starColors, elementSize = 30, } = config;
200
234
  const particles = [];
201
235
  for (let i = 0; i < particleCount; i++) {
202
236
  const angle = randomInRange(0, 360);
@@ -211,7 +245,9 @@ const createStarParticles = (origin, config) => {
211
245
  opacity: 1,
212
246
  size: randomInRange(elementSize * 0.5, elementSize * 1.3),
213
247
  rotation: randomInRange(0, 360),
214
- color: colors[Math.floor(Math.random() * colors.length)] || colors[0] || '#ffffff',
248
+ color: colors[Math.floor(Math.random() * colors.length)] ||
249
+ colors[0] ||
250
+ '#ffffff',
215
251
  });
216
252
  }
217
253
  return particles;
@@ -225,7 +261,7 @@ const renderStarParticle = (particle) => {
225
261
 
226
262
  const snowColors = ['#FFFFFF', '#F0F8FF', '#F5F5F5', '#FAFAFA'];
227
263
  const createSnowParticles = (origin, config) => {
228
- const { particleCount = 50, spread = 200, startVelocity = 3, colors = snowColors, elementSize = 15 } = config;
264
+ const { particleCount = 50, spread = 200, startVelocity = 3, colors = snowColors, elementSize = 15, } = config;
229
265
  const particles = [];
230
266
  for (let i = 0; i < particleCount; i++) {
231
267
  // Spread particles across the width, starting from above viewport
@@ -241,7 +277,9 @@ const createSnowParticles = (origin, config) => {
241
277
  opacity: randomInRange(0.4, 0.9),
242
278
  size: randomInRange(elementSize * 0.3, elementSize),
243
279
  rotation: randomInRange(0, 360),
244
- color: colors[Math.floor(Math.random() * colors.length)] || colors[0] || '#ffffff',
280
+ color: colors[Math.floor(Math.random() * colors.length)] ||
281
+ colors[0] ||
282
+ '#ffffff',
245
283
  });
246
284
  }
247
285
  return particles;
@@ -268,7 +306,7 @@ const happyEmojis = ['😊', '😄', '🥰', '😍', '🤗', '😘', '😁', '
268
306
  const natureEmojis = ['🌸', '🌺', '🌻', '🌹', '🌷', '🌼', '🍀', '🌿'];
269
307
  const foodEmojis = ['🍕', '🍔', '🍟', '🌮', '🍿', '🍩', '🍪', '🧁'];
270
308
  const createEmojiParticles = (origin, config) => {
271
- const { particleCount = 30, spread = 100, startVelocity = 15, elementSize = 35, emojis = defaultEmojis } = config;
309
+ const { particleCount = 30, spread = 100, startVelocity = 15, elementSize = 35, emojis = defaultEmojis, } = config;
272
310
  const particles = [];
273
311
  for (let i = 0; i < particleCount; i++) {
274
312
  const angle = randomInRange(-45, -135);
@@ -284,7 +322,7 @@ const createEmojiParticles = (origin, config) => {
284
322
  size: randomInRange(elementSize * 0.7, elementSize * 1.3),
285
323
  rotation: randomInRange(-45, 45),
286
324
  color: '', // Not used for emojis
287
- element: emojis[Math.floor(Math.random() * emojis.length)]
325
+ element: emojis[Math.floor(Math.random() * emojis.length)],
288
326
  });
289
327
  }
290
328
  return particles;
@@ -304,12 +342,12 @@ const emojiPresets = {
304
342
  happy: happyEmojis,
305
343
  nature: natureEmojis,
306
344
  food: foodEmojis,
307
- default: defaultEmojis
345
+ default: defaultEmojis,
308
346
  };
309
347
 
310
348
  const coinColors = ['#FFD700', '#FFA500', '#FFB300', '#FFC700'];
311
349
  const createCoinParticles = (origin, config) => {
312
- const { particleCount = 30, spread = 70, startVelocity = 25, colors = coinColors, elementSize = 25 } = config;
350
+ const { particleCount = 30, spread = 70, startVelocity = 25, colors = coinColors, elementSize = 25, } = config;
313
351
  const particles = [];
314
352
  for (let i = 0; i < particleCount; i++) {
315
353
  const angle = randomInRange(-spread / 2, spread / 2) * (Math.PI / 180);
@@ -324,7 +362,9 @@ const createCoinParticles = (origin, config) => {
324
362
  opacity: 1,
325
363
  size: randomInRange(elementSize * 0.8, elementSize * 1.2),
326
364
  rotation: randomInRange(0, 360),
327
- color: colors[Math.floor(Math.random() * colors.length)] || colors[0] || '#ffffff',
365
+ color: colors[Math.floor(Math.random() * colors.length)] ||
366
+ colors[0] ||
367
+ '#ffffff',
328
368
  });
329
369
  }
330
370
  return particles;
@@ -363,7 +403,7 @@ const renderCoinParticle = (particle) => {
363
403
 
364
404
  const petalColors = ['#FFB6C1', '#FFC0CB', '#FF69B4', '#FF1493', '#FFF0F5'];
365
405
  const createPetalParticles = (origin, config) => {
366
- const { particleCount = 40, spread = 100, startVelocity = 8, colors = petalColors, elementSize = 20 } = config;
406
+ const { particleCount = 40, spread = 100, startVelocity = 8, colors = petalColors, elementSize = 20, } = config;
367
407
  const particles = [];
368
408
  for (let i = 0; i < particleCount; i++) {
369
409
  const angle = randomInRange(-spread / 2, spread / 2) * (Math.PI / 180);
@@ -378,7 +418,9 @@ const createPetalParticles = (origin, config) => {
378
418
  opacity: randomInRange(0.7, 1),
379
419
  size: randomInRange(elementSize * 0.7, elementSize * 1.3),
380
420
  rotation: randomInRange(0, 360),
381
- color: colors[Math.floor(Math.random() * colors.length)] || colors[0] || '#ffffff',
421
+ color: colors[Math.floor(Math.random() * colors.length)] ||
422
+ colors[0] ||
423
+ '#ffffff',
382
424
  });
383
425
  }
384
426
  return particles;
@@ -419,9 +461,17 @@ const renderPetalParticle = (particle) => {
419
461
  } })));
420
462
  };
421
463
 
422
- const auroraColors = ['#00ff88', '#00ffaa', '#00ddff', '#0099ff', '#0066ff', '#9933ff', '#ff00ff'];
464
+ const auroraColors = [
465
+ '#00ff88',
466
+ '#00ffaa',
467
+ '#00ddff',
468
+ '#0099ff',
469
+ '#0066ff',
470
+ '#9933ff',
471
+ '#ff00ff',
472
+ ];
423
473
  const createAuroraParticles = (origin, config) => {
424
- const { particleCount = 15, spread = 200, startVelocity = 3, colors = auroraColors, elementSize = 100 } = config;
474
+ const { particleCount = 15, spread = 200, startVelocity = 3, colors = auroraColors, elementSize = 100, } = config;
425
475
  const particles = [];
426
476
  for (let i = 0; i < particleCount; i++) {
427
477
  const angle = (i / particleCount) * spread - spread / 2;
@@ -436,7 +486,9 @@ const createAuroraParticles = (origin, config) => {
436
486
  opacity: 0,
437
487
  size: randomInRange(elementSize * 0.8, elementSize * 1.2),
438
488
  rotation: randomInRange(-15, 15),
439
- color: colors[Math.floor(Math.random() * colors.length)] || colors[0] || '#ffffff',
489
+ color: colors[Math.floor(Math.random() * colors.length)] ||
490
+ colors[0] ||
491
+ '#ffffff',
440
492
  });
441
493
  }
442
494
  return particles;
@@ -478,7 +530,7 @@ const renderAuroraParticle = (particle) => {
478
530
 
479
531
  const fireflyColors = ['#FFFF99', '#FFFFCC', '#FFFF66', '#FFFFAA'];
480
532
  const createFireflyParticles = (origin, config) => {
481
- const { particleCount = 20, spread = 150, startVelocity = 2, colors = fireflyColors, elementSize = 8 } = config;
533
+ const { particleCount = 20, spread = 150, startVelocity = 2, colors = fireflyColors, elementSize = 8, } = config;
482
534
  const particles = [];
483
535
  for (let i = 0; i < particleCount; i++) {
484
536
  const angle = randomInRange(0, 360) * (Math.PI / 180);
@@ -493,7 +545,9 @@ const createFireflyParticles = (origin, config) => {
493
545
  opacity: 0,
494
546
  size: randomInRange(elementSize * 0.6, elementSize),
495
547
  rotation: randomInRange(0, 360), // Used for blink timing
496
- color: colors[Math.floor(Math.random() * colors.length)] || colors[0] || '#ffffff',
548
+ color: colors[Math.floor(Math.random() * colors.length)] ||
549
+ colors[0] ||
550
+ '#ffffff',
497
551
  });
498
552
  }
499
553
  return particles;
@@ -543,9 +597,16 @@ const renderFireflyParticle = (particle) => {
543
597
  } })));
544
598
  };
545
599
 
546
- const paintColors = ['#FF006E', '#FB5607', '#FFBE0B', '#8338EC', '#3A86FF', '#06FFB4'];
600
+ const paintColors = [
601
+ '#FF006E',
602
+ '#FB5607',
603
+ '#FFBE0B',
604
+ '#8338EC',
605
+ '#3A86FF',
606
+ '#06FFB4',
607
+ ];
547
608
  const createPaintParticles = (origin, config) => {
548
- const { particleCount = 25, spread = 120, startVelocity = 35, colors = paintColors, elementSize = 30 } = config;
609
+ const { particleCount = 25, spread = 120, startVelocity = 35, colors = paintColors, elementSize = 30, } = config;
549
610
  const particles = [];
550
611
  for (let i = 0; i < particleCount; i++) {
551
612
  const angle = randomInRange(-spread / 2, spread / 2) * (Math.PI / 180);
@@ -563,7 +624,9 @@ const createPaintParticles = (origin, config) => {
563
624
  ? randomInRange(elementSize * 1.5, elementSize * 2.5)
564
625
  : randomInRange(elementSize * 0.3, elementSize),
565
626
  rotation: randomInRange(0, 360),
566
- color: colors[Math.floor(Math.random() * colors.length)] || colors[0] || '#ffffff',
627
+ color: colors[Math.floor(Math.random() * colors.length)] ||
628
+ colors[0] ||
629
+ '#ffffff',
567
630
  });
568
631
  }
569
632
  return particles;
@@ -582,7 +645,7 @@ const renderPaintParticle = (particle) => {
582
645
  transform: `
583
646
  scaleX(${stretch})
584
647
  scaleY(${squish})
585
- rotate(${Math.atan2(particle.vy, particle.vx) * 180 / Math.PI}deg)
648
+ rotate(${(Math.atan2(particle.vy, particle.vx) * 180) / Math.PI}deg)
586
649
  `,
587
650
  } },
588
651
  React.createElement("div", { style: {
@@ -626,9 +689,17 @@ const renderPaintParticle = (particle) => {
626
689
  } }))));
627
690
  };
628
691
 
629
- const balloonColors = ['#FF006E', '#FB5607', '#FFBE0B', '#8338EC', '#3A86FF', '#06FFB4', '#FF4081'];
692
+ const balloonColors = [
693
+ '#FF006E',
694
+ '#FB5607',
695
+ '#FFBE0B',
696
+ '#8338EC',
697
+ '#3A86FF',
698
+ '#06FFB4',
699
+ '#FF4081',
700
+ ];
630
701
  const createBalloonParticles = (origin, config) => {
631
- const { particleCount = 15, spread = 80, startVelocity = 10, colors = balloonColors, elementSize = 35 } = config;
702
+ const { particleCount = 15, spread = 80, startVelocity = 10, colors = balloonColors, elementSize = 35, } = config;
632
703
  const particles = [];
633
704
  for (let i = 0; i < particleCount; i++) {
634
705
  const angle = randomInRange(-spread / 2, spread / 2) * (Math.PI / 180);
@@ -643,7 +714,9 @@ const createBalloonParticles = (origin, config) => {
643
714
  opacity: 0.9,
644
715
  size: randomInRange(elementSize * 0.8, elementSize * 1.2),
645
716
  rotation: randomInRange(-10, 10),
646
- color: colors[Math.floor(Math.random() * colors.length)] || colors[0] || '#ffffff',
717
+ color: colors[Math.floor(Math.random() * colors.length)] ||
718
+ colors[0] ||
719
+ '#ffffff',
647
720
  });
648
721
  }
649
722
  return particles;
@@ -709,9 +782,17 @@ const renderBalloonParticle = (particle) => {
709
782
  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" }))));
710
783
  };
711
784
 
712
- const galaxyColors = ['#FFFFFF', '#FFF9C4', '#BBDEFB', '#C5CAE9', '#D1C4E9', '#FFE082', '#FFCCBC'];
785
+ const galaxyColors = [
786
+ '#FFFFFF',
787
+ '#FFF9C4',
788
+ '#BBDEFB',
789
+ '#C5CAE9',
790
+ '#D1C4E9',
791
+ '#FFE082',
792
+ '#FFCCBC',
793
+ ];
713
794
  const createGalaxyParticles = (origin, config) => {
714
- const { particleCount = 60, spread = 200, startVelocity = 15, colors = galaxyColors, elementSize = 8 } = config;
795
+ const { particleCount = 60, spread = 200, startVelocity = 15, colors = galaxyColors, elementSize = 8, } = config;
715
796
  const particles = [];
716
797
  for (let i = 0; i < particleCount; i++) {
717
798
  // Create spiral distribution
@@ -739,7 +820,9 @@ const createGalaxyParticles = (origin, config) => {
739
820
  opacity: 0,
740
821
  size: randomInRange(elementSize * 0.3, elementSize) * (1 - progress * 0.5), // Smaller at edges
741
822
  rotation: randomInRange(0, 360),
742
- color: colors[Math.floor(Math.random() * colors.length)] || colors[0] || '#ffffff',
823
+ color: colors[Math.floor(Math.random() * colors.length)] ||
824
+ colors[0] ||
825
+ '#ffffff',
743
826
  });
744
827
  }
745
828
  return particles;
@@ -857,8 +940,7 @@ const renderGlitchParticle = (particle) => {
857
940
  g: channel === 'g' ? 255 : 0,
858
941
  b: channel === 'b' ? 255 : 0,
859
942
  };
860
- const mixBlendMode = channel === 'r' ? 'screen' :
861
- channel === 'g' ? 'multiply' : 'difference';
943
+ const mixBlendMode = channel === 'r' ? 'screen' : channel === 'g' ? 'multiply' : 'difference';
862
944
  return (React.createElement("div", { key: particle.id, style: {
863
945
  width: `${width}px`,
864
946
  height: `${height}px`,
@@ -869,9 +951,18 @@ const renderGlitchParticle = (particle) => {
869
951
  } }));
870
952
  };
871
953
 
872
- const defaultColors$2 = ['#9C27B0', '#E91E63', '#FF00FF', '#00FFFF', '#FFD700', '#FF69B4', '#DA70D6', '#9370DB'];
954
+ const defaultColors$2 = [
955
+ '#9C27B0',
956
+ '#E91E63',
957
+ '#FF00FF',
958
+ '#00FFFF',
959
+ '#FFD700',
960
+ '#FF69B4',
961
+ '#DA70D6',
962
+ '#9370DB',
963
+ ];
873
964
  const createMagicDustParticles = (origin, config) => {
874
- const { particleCount = 40, startVelocity = 8, colors = defaultColors$2, elementSize = 12 } = config;
965
+ const { particleCount = 40, startVelocity = 8, colors = defaultColors$2, elementSize = 12, } = config;
875
966
  const particles = [];
876
967
  for (let i = 0; i < particleCount; i++) {
877
968
  // Create particles in a circular pattern with some randomness
@@ -942,9 +1033,18 @@ const renderMagicDustParticle = (particle) => {
942
1033
  } }))));
943
1034
  };
944
1035
 
945
- const defaultColors$1 = ['#FF1493', '#00CED1', '#FFD700', '#FF69B4', '#7B68EE', '#00FA9A', '#FF6347', '#4169E1'];
1036
+ const defaultColors$1 = [
1037
+ '#FF1493',
1038
+ '#00CED1',
1039
+ '#FFD700',
1040
+ '#FF69B4',
1041
+ '#7B68EE',
1042
+ '#00FA9A',
1043
+ '#FF6347',
1044
+ '#4169E1',
1045
+ ];
946
1046
  const createCrystalParticles = (origin, config) => {
947
- const { particleCount = 15, startVelocity = 15, colors = defaultColors$1, elementSize = 25 } = config;
1047
+ const { particleCount = 15, startVelocity = 15, colors = defaultColors$1, elementSize = 25, } = config;
948
1048
  const particles = [];
949
1049
  for (let i = 0; i < particleCount; i++) {
950
1050
  // Crystals explode outward and fall with gravity
@@ -1016,9 +1116,16 @@ const renderCrystalParticle = (particle) => {
1016
1116
  } })));
1017
1117
  };
1018
1118
 
1019
- const defaultColors = ['#D2691E', '#CD853F', '#8B4513', '#A0522D', '#FF8C00', '#FF6347'];
1119
+ const defaultColors = [
1120
+ '#D2691E',
1121
+ '#CD853F',
1122
+ '#8B4513',
1123
+ '#A0522D',
1124
+ '#FF8C00',
1125
+ '#FF6347',
1126
+ ];
1020
1127
  const createLeafParticles = (origin, config) => {
1021
- const { particleCount = 10, colors = defaultColors, elementSize = 25 } = config;
1128
+ const { particleCount = 10, colors = defaultColors, elementSize = 25, } = config;
1022
1129
  const particles = [];
1023
1130
  for (let i = 0; i < particleCount; i++) {
1024
1131
  particles.push({
@@ -1032,9 +1139,9 @@ const createLeafParticles = (origin, config) => {
1032
1139
  size: randomInRange(elementSize * 0.6, elementSize),
1033
1140
  // Encode tumble phase (0-360), sway phase (0-360), and sway amount (20-40) + rotation speed (-3 to 3)
1034
1141
  rotation: Math.floor(randomInRange(0, 360)) +
1035
- (Math.floor(randomInRange(0, 360)) * 1000) +
1036
- (Math.floor(randomInRange(20, 40)) * 1000000) +
1037
- ((Math.floor(randomInRange(-3, 3)) + 3) * 100000000),
1142
+ Math.floor(randomInRange(0, 360)) * 1000 +
1143
+ Math.floor(randomInRange(20, 40)) * 1000000 +
1144
+ (Math.floor(randomInRange(-3, 3)) + 3) * 100000000,
1038
1145
  color: getRandomColor(colors),
1039
1146
  });
1040
1147
  }
@@ -1045,10 +1152,10 @@ const renderLeafParticle = (particle) => {
1045
1152
  const tumblePhase = particle.rotation % 1000;
1046
1153
  const swayPhase = Math.floor((particle.rotation % 1000000) / 1000);
1047
1154
  const swayAmount = Math.floor((particle.rotation % 100000000) / 1000000);
1048
- const rotationSpeed = (Math.floor(particle.rotation / 100000000) - 3);
1155
+ const rotationSpeed = Math.floor(particle.rotation / 100000000) - 3;
1049
1156
  // Calculate tumbling and swaying
1050
- const tumble = Math.sin((Date.now() * 0.002 + tumblePhase) * Math.PI / 180) * 30;
1051
- const swayX = Math.sin((Date.now() * 0.001 + swayPhase) * Math.PI / 180) * swayAmount;
1157
+ const tumble = Math.sin(((Date.now() * 0.002 + tumblePhase) * Math.PI) / 180) * 30;
1158
+ const swayX = Math.sin(((Date.now() * 0.001 + swayPhase) * Math.PI) / 180) * swayAmount;
1052
1159
  const rotation = (Date.now() * rotationSpeed * 0.01 + tumble) % 360;
1053
1160
  return (React.createElement("div", { key: particle.id, style: {
1054
1161
  width: `${particle.size}px`,
@@ -1152,12 +1259,60 @@ const animations = {
1152
1259
  },
1153
1260
  };
1154
1261
 
1262
+ const isMobileDevice = () => {
1263
+ if (typeof window === 'undefined')
1264
+ return false;
1265
+ // Check user agent
1266
+ const userAgent = navigator.userAgent ||
1267
+ navigator.vendor ||
1268
+ window.opera ||
1269
+ '';
1270
+ const isMobileUA = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(userAgent);
1271
+ // Check viewport width
1272
+ const isMobileWidth = window.innerWidth <= 768;
1273
+ // Check touch support
1274
+ const hasTouch = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
1275
+ return isMobileUA || (isMobileWidth && hasTouch);
1276
+ };
1277
+ const optimizeConfigForMobile = (config) => {
1278
+ var _a, _b, _c;
1279
+ if (!isMobileDevice())
1280
+ return config;
1281
+ return Object.assign(Object.assign({}, config), {
1282
+ // Reduce particle count by 40%
1283
+ particleCount: Math.floor((config.particleCount || 50) * 0.6),
1284
+ // Reduce element size by 20%
1285
+ elementSize: Math.floor((config.elementSize || 20) * 0.8),
1286
+ // Reduce lifetime by 20%
1287
+ lifetime: Math.floor((config.lifetime || 150) * 0.8),
1288
+ // Simplify physics
1289
+ physics: Object.assign(Object.assign({}, config.physics), {
1290
+ // Reduce precision for mobile
1291
+ 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 }) });
1292
+ };
1293
+ // Frame skipping for mobile
1294
+ const shouldSkipFrame = (frameCount) => {
1295
+ if (!isMobileDevice())
1296
+ return false;
1297
+ // Skip every 3rd frame on mobile
1298
+ return frameCount % 3 === 0;
1299
+ };
1300
+
1155
1301
  const useReward = (elementId, animationType, config) => {
1156
1302
  const [isAnimating, setIsAnimating] = React.useState(false);
1157
1303
  const animationFrameRef = React.useRef();
1158
1304
  const particlesRef = React.useRef([]);
1159
1305
  const containerRef = React.useRef(null);
1160
1306
  const rootRef = React.useRef(null);
1307
+ const isTabVisible = React.useRef(true);
1308
+ // Monitor tab visibility
1309
+ React.useEffect(() => {
1310
+ const handleVisibilityChange = () => {
1311
+ isTabVisible.current = !document.hidden;
1312
+ };
1313
+ document.addEventListener('visibilitychange', handleVisibilityChange);
1314
+ return () => document.removeEventListener('visibilitychange', handleVisibilityChange);
1315
+ }, []);
1161
1316
  const animate = React.useCallback(() => {
1162
1317
  var _a, _b, _c, _d, _e, _f;
1163
1318
  const element = document.getElementById(elementId);
@@ -1173,8 +1328,12 @@ const useReward = (elementId, animationType, config) => {
1173
1328
  console.error(`Animation type "${animationType}" not found`);
1174
1329
  return;
1175
1330
  }
1331
+ // Apply mobile performance optimizations
1332
+ const optimizedConfig = config
1333
+ ? optimizeConfigForMobile(config)
1334
+ : undefined;
1176
1335
  // Create particles
1177
- particlesRef.current = animationHandler.createParticles(origin, config || {});
1336
+ particlesRef.current = animationHandler.createParticles(origin, optimizedConfig || {});
1178
1337
  // Create container
1179
1338
  const container = document.createElement('div');
1180
1339
  container.style.position = 'fixed';
@@ -1191,12 +1350,21 @@ const useReward = (elementId, animationType, config) => {
1191
1350
  rootRef.current = root;
1192
1351
  const containerRect = container.getBoundingClientRect();
1193
1352
  // Default gravity varies by animation type
1194
- const defaultGravity = animationType === 'bubbles' ? -0.1 : animationType === 'snow' ? 0.05 : 0.35;
1353
+ const defaultGravity = animationType === 'bubbles'
1354
+ ? -0.1
1355
+ : animationType === 'snow'
1356
+ ? 0.05
1357
+ : 0.35;
1195
1358
  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;
1196
1359
  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;
1197
1360
  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;
1361
+ // Track frame count for mobile optimization
1362
+ let frameCount = 0;
1198
1363
  const updateParticles = () => {
1199
1364
  let activeParticles = 0;
1365
+ frameCount++;
1366
+ // Skip frame rendering on mobile to improve performance
1367
+ const skipFrame = shouldSkipFrame(frameCount);
1200
1368
  particlesRef.current = particlesRef.current.map((particle) => {
1201
1369
  if (particle.life <= 0)
1202
1370
  return particle;
@@ -1224,13 +1392,13 @@ const useReward = (elementId, animationType, config) => {
1224
1392
  }
1225
1393
  return particle;
1226
1394
  });
1227
- // Render particles
1228
- if (rootRef.current) {
1395
+ // Render particles (skip rendering on mobile for some frames)
1396
+ if (rootRef.current && !skipFrame) {
1229
1397
  rootRef.current.render(React.createElement(React.Fragment, null, particlesRef.current
1230
1398
  .filter((p) => p.life > 0)
1231
1399
  .map((particle) => (React.createElement("div", { key: particle.id, style: createParticleStyle(particle, containerRect) }, animationHandler.renderParticle(particle))))));
1232
1400
  }
1233
- if (activeParticles > 0) {
1401
+ if (activeParticles > 0 && isTabVisible.current) {
1234
1402
  animationFrameRef.current = requestAnimationFrame(updateParticles);
1235
1403
  }
1236
1404
  else {
@@ -1242,7 +1410,8 @@ const useReward = (elementId, animationType, config) => {
1242
1410
  rootRef.current.unmount();
1243
1411
  rootRef.current = null;
1244
1412
  }
1245
- if (containerRef.current && document.body.contains(containerRef.current)) {
1413
+ if (containerRef.current &&
1414
+ document.body.contains(containerRef.current)) {
1246
1415
  document.body.removeChild(containerRef.current);
1247
1416
  containerRef.current = null;
1248
1417
  }
@@ -1267,7 +1436,8 @@ const useReward = (elementId, animationType, config) => {
1267
1436
  rootRef.current.unmount();
1268
1437
  rootRef.current = null;
1269
1438
  }
1270
- if (containerRef.current && document.body.contains(containerRef.current)) {
1439
+ if (containerRef.current &&
1440
+ document.body.contains(containerRef.current)) {
1271
1441
  document.body.removeChild(containerRef.current);
1272
1442
  containerRef.current = null;
1273
1443
  }
@@ -1277,5 +1447,7 @@ const useReward = (elementId, animationType, config) => {
1277
1447
  };
1278
1448
 
1279
1449
  exports.emojiPresets = emojiPresets;
1450
+ exports.isMobileDevice = isMobileDevice;
1451
+ exports.optimizeConfigForMobile = optimizeConfigForMobile;
1280
1452
  exports.useReward = useReward;
1281
1453
  //# sourceMappingURL=index.js.map