partycles 1.1.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.
- package/dist/animations/animations/aurora.d.ts.map +1 -1
- package/dist/animations/animations/balloons.d.ts.map +1 -1
- package/dist/animations/animations/bubbles.d.ts.map +1 -1
- package/dist/animations/animations/coins.d.ts.map +1 -1
- package/dist/animations/animations/confetti.d.ts.map +1 -1
- package/dist/animations/animations/crystals.d.ts.map +1 -1
- package/dist/animations/animations/fireflies.d.ts.map +1 -1
- package/dist/animations/animations/fireworks.d.ts.map +1 -1
- package/dist/animations/animations/galaxy.d.ts.map +1 -1
- package/dist/animations/animations/glitch.d.ts.map +1 -1
- package/dist/animations/animations/index.d.ts.map +1 -1
- package/dist/animations/animations/leaves.d.ts.map +1 -1
- package/dist/animations/animations/magicdust.d.ts.map +1 -1
- package/dist/animations/animations/paint.d.ts.map +1 -1
- package/dist/animations/animations/petals.d.ts.map +1 -1
- package/dist/animations/animations/snow.d.ts.map +1 -1
- package/dist/animations/animations/sparkles.d.ts.map +1 -1
- package/dist/animations/animations/stars.d.ts.map +1 -1
- package/dist/animations/aurora.d.ts.map +1 -1
- package/dist/animations/balloons.d.ts.map +1 -1
- package/dist/animations/bubbles.d.ts.map +1 -1
- package/dist/animations/bubbles.esm.js +10 -3
- package/dist/animations/bubbles.esm.js.map +1 -1
- package/dist/animations/bubbles.js +10 -3
- package/dist/animations/bubbles.js.map +1 -1
- package/dist/animations/coins.d.ts.map +1 -1
- package/dist/animations/confetti.d.ts.map +1 -1
- package/dist/animations/confetti.esm.js +20 -3
- package/dist/animations/confetti.esm.js.map +1 -1
- package/dist/animations/confetti.js +20 -3
- package/dist/animations/confetti.js.map +1 -1
- package/dist/animations/crystals.d.ts.map +1 -1
- package/dist/animations/emoji.esm.js +3 -3
- package/dist/animations/emoji.esm.js.map +1 -1
- package/dist/animations/emoji.js +3 -3
- package/dist/animations/emoji.js.map +1 -1
- package/dist/animations/fireflies.d.ts.map +1 -1
- package/dist/animations/fireworks.d.ts.map +1 -1
- package/dist/animations/fireworks.esm.js +11 -3
- package/dist/animations/fireworks.esm.js.map +1 -1
- package/dist/animations/fireworks.js +11 -3
- package/dist/animations/fireworks.js.map +1 -1
- package/dist/animations/galaxy.d.ts.map +1 -1
- package/dist/animations/glitch.d.ts.map +1 -1
- package/dist/animations/hearts.esm.js +2 -2
- package/dist/animations/hearts.esm.js.map +1 -1
- package/dist/animations/hearts.js +2 -2
- package/dist/animations/hearts.js.map +1 -1
- package/dist/animations/leaves.d.ts.map +1 -1
- package/dist/animations/magicdust.d.ts.map +1 -1
- package/dist/animations/mobileOptimizations.d.ts.map +1 -1
- package/dist/animations/paint.d.ts.map +1 -1
- package/dist/animations/petals.d.ts.map +1 -1
- package/dist/animations/snow.d.ts.map +1 -1
- package/dist/animations/snow.esm.js +4 -2
- package/dist/animations/snow.esm.js.map +1 -1
- package/dist/animations/snow.js +4 -2
- package/dist/animations/snow.js.map +1 -1
- package/dist/animations/sparkles.d.ts.map +1 -1
- package/dist/animations/sparkles.esm.js +4 -2
- package/dist/animations/sparkles.esm.js.map +1 -1
- package/dist/animations/sparkles.js +4 -2
- package/dist/animations/sparkles.js.map +1 -1
- package/dist/animations/stars.d.ts.map +1 -1
- package/dist/animations/stars.esm.js +4 -2
- package/dist/animations/stars.esm.js.map +1 -1
- package/dist/animations/stars.js +4 -2
- package/dist/animations/stars.js.map +1 -1
- package/dist/animations/useReward.d.ts.map +1 -1
- package/dist/animations/utils.d.ts.map +1 -1
- package/dist/index.esm.js +174 -56
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +174 -56
- package/dist/index.js.map +1 -1
- package/dist/mobileOptimizations.d.ts.map +1 -1
- package/dist/useReward.d.ts.map +1 -1
- package/dist/utils.d.ts.map +1 -1
- package/package.json +1 -1
- package/dist/animations/animations/bees.d.ts +0 -8
- package/dist/animations/animations/bees.d.ts.map +0 -1
- package/dist/animations/animations/butterflies.d.ts +0 -8
- package/dist/animations/animations/butterflies.d.ts.map +0 -1
- package/dist/animations/animations/candy.d.ts +0 -8
- package/dist/animations/animations/candy.d.ts.map +0 -1
- package/dist/animations/animations/champagne.d.ts +0 -8
- package/dist/animations/animations/champagne.d.ts.map +0 -1
- package/dist/animations/animations/dandelion.d.ts +0 -8
- package/dist/animations/animations/dandelion.d.ts.map +0 -1
- package/dist/animations/animations/dice.d.ts +0 -8
- package/dist/animations/animations/dice.d.ts.map +0 -1
- package/dist/animations/animations/donuts.d.ts +0 -8
- package/dist/animations/animations/donuts.d.ts.map +0 -1
- package/dist/animations/animations/dragons.d.ts +0 -8
- package/dist/animations/animations/dragons.d.ts.map +0 -1
- package/dist/animations/animations/ghosts.d.ts +0 -8
- package/dist/animations/animations/ghosts.d.ts.map +0 -1
- package/dist/animations/animations/levelup.d.ts +0 -8
- package/dist/animations/animations/levelup.d.ts.map +0 -1
- package/dist/animations/animations/lightning.d.ts +0 -8
- package/dist/animations/animations/lightning.d.ts.map +0 -1
- package/dist/animations/animations/matrix.d.ts +0 -8
- package/dist/animations/animations/matrix.d.ts.map +0 -1
- package/dist/animations/animations/music.d.ts +0 -8
- package/dist/animations/animations/music.d.ts.map +0 -1
- package/dist/animations/animations/pixels.d.ts +0 -8
- package/dist/animations/animations/pixels.d.ts.map +0 -1
- package/dist/animations/animations/pizza.d.ts +0 -8
- package/dist/animations/animations/pizza.d.ts.map +0 -1
- package/dist/animations/animations/popcorn.d.ts +0 -8
- package/dist/animations/animations/popcorn.d.ts.map +0 -1
- package/dist/animations/animations/rain.d.ts +0 -8
- package/dist/animations/animations/rain.d.ts.map +0 -1
- package/dist/animations/animations/runes.d.ts +0 -8
- package/dist/animations/animations/runes.d.ts.map +0 -1
- package/dist/animations/bees.d.ts +0 -8
- package/dist/animations/bees.d.ts.map +0 -1
- package/dist/animations/butterflies.d.ts +0 -8
- package/dist/animations/butterflies.d.ts.map +0 -1
- package/dist/animations/candy.d.ts +0 -8
- package/dist/animations/candy.d.ts.map +0 -1
- package/dist/animations/champagne.d.ts +0 -8
- package/dist/animations/champagne.d.ts.map +0 -1
- package/dist/animations/dandelion.d.ts +0 -8
- package/dist/animations/dandelion.d.ts.map +0 -1
- package/dist/animations/dice.d.ts +0 -8
- package/dist/animations/dice.d.ts.map +0 -1
- package/dist/animations/donuts.d.ts +0 -8
- package/dist/animations/donuts.d.ts.map +0 -1
- package/dist/animations/dragons.d.ts +0 -8
- package/dist/animations/dragons.d.ts.map +0 -1
- package/dist/animations/ghosts.d.ts +0 -8
- package/dist/animations/ghosts.d.ts.map +0 -1
- package/dist/animations/levelup.d.ts +0 -8
- package/dist/animations/levelup.d.ts.map +0 -1
- package/dist/animations/lightning.d.ts +0 -8
- package/dist/animations/lightning.d.ts.map +0 -1
- package/dist/animations/matrix.d.ts +0 -8
- package/dist/animations/matrix.d.ts.map +0 -1
- package/dist/animations/music.d.ts +0 -8
- package/dist/animations/music.d.ts.map +0 -1
- package/dist/animations/pixels.d.ts +0 -8
- package/dist/animations/pixels.d.ts.map +0 -1
- package/dist/animations/pizza.d.ts +0 -8
- package/dist/animations/pizza.d.ts.map +0 -1
- package/dist/animations/popcorn.d.ts +0 -8
- package/dist/animations/popcorn.d.ts.map +0 -1
- package/dist/animations/rain.d.ts +0 -8
- package/dist/animations/rain.d.ts.map +0 -1
- package/dist/animations/runes.d.ts +0 -8
- 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 = [
|
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)] ||
|
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 = [
|
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 = [
|
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)] ||
|
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)] ||
|
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)] ||
|
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)] ||
|
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)] ||
|
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 = [
|
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)] ||
|
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)] ||
|
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 = [
|
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)] ||
|
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 = [
|
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)] ||
|
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 = [
|
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)] ||
|
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 = [
|
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 = [
|
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 = [
|
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
|
-
|
1036
|
-
|
1037
|
-
(
|
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 =
|
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`,
|
@@ -1156,7 +1263,10 @@ const isMobileDevice = () => {
|
|
1156
1263
|
if (typeof window === 'undefined')
|
1157
1264
|
return false;
|
1158
1265
|
// Check user agent
|
1159
|
-
const userAgent = navigator.userAgent ||
|
1266
|
+
const userAgent = navigator.userAgent ||
|
1267
|
+
navigator.vendor ||
|
1268
|
+
window.opera ||
|
1269
|
+
'';
|
1160
1270
|
const isMobileUA = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(userAgent);
|
1161
1271
|
// Check viewport width
|
1162
1272
|
const isMobileWidth = window.innerWidth <= 768;
|
@@ -1219,7 +1329,9 @@ const useReward = (elementId, animationType, config) => {
|
|
1219
1329
|
return;
|
1220
1330
|
}
|
1221
1331
|
// Apply mobile performance optimizations
|
1222
|
-
const optimizedConfig = config
|
1332
|
+
const optimizedConfig = config
|
1333
|
+
? optimizeConfigForMobile(config)
|
1334
|
+
: undefined;
|
1223
1335
|
// Create particles
|
1224
1336
|
particlesRef.current = animationHandler.createParticles(origin, optimizedConfig || {});
|
1225
1337
|
// Create container
|
@@ -1238,7 +1350,11 @@ const useReward = (elementId, animationType, config) => {
|
|
1238
1350
|
rootRef.current = root;
|
1239
1351
|
const containerRect = container.getBoundingClientRect();
|
1240
1352
|
// Default gravity varies by animation type
|
1241
|
-
const defaultGravity = animationType === 'bubbles'
|
1353
|
+
const defaultGravity = animationType === 'bubbles'
|
1354
|
+
? -0.1
|
1355
|
+
: animationType === 'snow'
|
1356
|
+
? 0.05
|
1357
|
+
: 0.35;
|
1242
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;
|
1243
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;
|
1244
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;
|
@@ -1294,7 +1410,8 @@ const useReward = (elementId, animationType, config) => {
|
|
1294
1410
|
rootRef.current.unmount();
|
1295
1411
|
rootRef.current = null;
|
1296
1412
|
}
|
1297
|
-
if (containerRef.current &&
|
1413
|
+
if (containerRef.current &&
|
1414
|
+
document.body.contains(containerRef.current)) {
|
1298
1415
|
document.body.removeChild(containerRef.current);
|
1299
1416
|
containerRef.current = null;
|
1300
1417
|
}
|
@@ -1319,7 +1436,8 @@ const useReward = (elementId, animationType, config) => {
|
|
1319
1436
|
rootRef.current.unmount();
|
1320
1437
|
rootRef.current = null;
|
1321
1438
|
}
|
1322
|
-
if (containerRef.current &&
|
1439
|
+
if (containerRef.current &&
|
1440
|
+
document.body.contains(containerRef.current)) {
|
1323
1441
|
document.body.removeChild(containerRef.current);
|
1324
1442
|
containerRef.current = null;
|
1325
1443
|
}
|