partycles 0.1.0
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/LICENSE +21 -0
- package/README.md +295 -0
- package/dist/animations/animations/bubbles.d.ts +8 -0
- package/dist/animations/animations/bubbles.d.ts.map +1 -0
- package/dist/animations/animations/confetti.d.ts +8 -0
- package/dist/animations/animations/confetti.d.ts.map +1 -0
- package/dist/animations/animations/fireworks.d.ts +8 -0
- package/dist/animations/animations/fireworks.d.ts.map +1 -0
- package/dist/animations/animations/hearts.d.ts +8 -0
- package/dist/animations/animations/hearts.d.ts.map +1 -0
- package/dist/animations/animations/index.d.ts +13 -0
- package/dist/animations/animations/index.d.ts.map +1 -0
- package/dist/animations/animations/sparkles.d.ts +8 -0
- package/dist/animations/animations/sparkles.d.ts.map +1 -0
- package/dist/animations/animations/stars.d.ts +8 -0
- package/dist/animations/animations/stars.d.ts.map +1 -0
- package/dist/animations/bubbles.d.ts +8 -0
- package/dist/animations/bubbles.d.ts.map +1 -0
- package/dist/animations/bubbles.esm.js +46 -0
- package/dist/animations/bubbles.esm.js.map +1 -0
- package/dist/animations/bubbles.js +49 -0
- package/dist/animations/bubbles.js.map +1 -0
- package/dist/animations/confetti.d.ts +8 -0
- package/dist/animations/confetti.d.ts.map +1 -0
- package/dist/animations/confetti.esm.js +50 -0
- package/dist/animations/confetti.esm.js.map +1 -0
- package/dist/animations/confetti.js +53 -0
- package/dist/animations/confetti.js.map +1 -0
- package/dist/animations/fireworks.d.ts +8 -0
- package/dist/animations/fireworks.d.ts.map +1 -0
- package/dist/animations/fireworks.esm.js +56 -0
- package/dist/animations/fireworks.esm.js.map +1 -0
- package/dist/animations/fireworks.js +59 -0
- package/dist/animations/fireworks.js.map +1 -0
- package/dist/animations/hearts.d.ts +8 -0
- package/dist/animations/hearts.d.ts.map +1 -0
- package/dist/animations/hearts.esm.js +44 -0
- package/dist/animations/hearts.esm.js.map +1 -0
- package/dist/animations/hearts.js +47 -0
- package/dist/animations/hearts.js.map +1 -0
- package/dist/animations/index.d.ts +3 -0
- package/dist/animations/index.d.ts.map +1 -0
- package/dist/animations/sparkles.d.ts +8 -0
- package/dist/animations/sparkles.d.ts.map +1 -0
- package/dist/animations/sparkles.esm.js +40 -0
- package/dist/animations/sparkles.esm.js.map +1 -0
- package/dist/animations/sparkles.js +43 -0
- package/dist/animations/sparkles.js.map +1 -0
- package/dist/animations/stars.d.ts +8 -0
- package/dist/animations/stars.d.ts.map +1 -0
- package/dist/animations/stars.esm.js +40 -0
- package/dist/animations/stars.esm.js.map +1 -0
- package/dist/animations/stars.js +43 -0
- package/dist/animations/stars.js.map +1 -0
- package/dist/animations/types.d.ts +33 -0
- package/dist/animations/types.d.ts.map +1 -0
- package/dist/animations/useReward.d.ts +8 -0
- package/dist/animations/useReward.d.ts.map +1 -0
- package/dist/animations/utils.d.ts +7 -0
- package/dist/animations/utils.d.ts.map +1 -0
- package/dist/index.d.ts +3 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/index.esm.js +374 -0
- package/dist/index.esm.js.map +1 -0
- package/dist/index.js +376 -0
- package/dist/index.js.map +1 -0
- package/dist/types.d.ts +33 -0
- package/dist/types.d.ts.map +1 -0
- package/dist/useReward.d.ts +8 -0
- package/dist/useReward.d.ts.map +1 -0
- package/dist/utils.d.ts +7 -0
- package/dist/utils.d.ts.map +1 -0
- package/package.json +76 -0
package/dist/index.js
ADDED
@@ -0,0 +1,376 @@
|
|
1
|
+
'use strict';
|
2
|
+
|
3
|
+
var React = require('react');
|
4
|
+
var client = require('react-dom/client');
|
5
|
+
|
6
|
+
const randomInRange = (min, max) => {
|
7
|
+
return Math.random() * (max - min) + min;
|
8
|
+
};
|
9
|
+
const degreesToRadians = (degrees) => {
|
10
|
+
return (degrees * Math.PI) / 180;
|
11
|
+
};
|
12
|
+
const generateId = () => {
|
13
|
+
return Math.random().toString(36).substring(2, 9);
|
14
|
+
};
|
15
|
+
const getRandomColor = (colors) => {
|
16
|
+
return colors[Math.floor(Math.random() * colors.length)] || colors[0];
|
17
|
+
};
|
18
|
+
const createParticleStyle = (particle, containerRect) => {
|
19
|
+
return {
|
20
|
+
position: 'absolute',
|
21
|
+
left: `${particle.x - containerRect.left}px`,
|
22
|
+
top: `${particle.y - containerRect.top}px`,
|
23
|
+
transform: `rotate(${particle.rotation}deg)`,
|
24
|
+
opacity: particle.opacity,
|
25
|
+
pointerEvents: 'none',
|
26
|
+
transition: 'none',
|
27
|
+
willChange: 'transform, opacity',
|
28
|
+
};
|
29
|
+
};
|
30
|
+
|
31
|
+
const defaultColors = ['#f44336', '#e91e63', '#9c27b0', '#673ab7', '#3f51b5', '#2196f3', '#03a9f4', '#00bcd4', '#009688', '#4caf50', '#8bc34a', '#cddc39', '#ffeb3b', '#ffc107', '#ff9800', '#ff5722'];
|
32
|
+
const createConfettiParticles = (origin, config) => {
|
33
|
+
const { particleCount = 50, startVelocity = 55, colors = defaultColors, elementSize = 20 } = config;
|
34
|
+
const particles = [];
|
35
|
+
for (let i = 0; i < particleCount; i++) {
|
36
|
+
const angle = randomInRange(0, 360);
|
37
|
+
const velocity = randomInRange(startVelocity * 0.5, startVelocity);
|
38
|
+
const color = getRandomColor(colors);
|
39
|
+
particles.push({
|
40
|
+
id: generateId(),
|
41
|
+
x: origin.x,
|
42
|
+
y: origin.y,
|
43
|
+
vx: Math.cos(degreesToRadians(angle)) * velocity,
|
44
|
+
vy: Math.sin(degreesToRadians(angle)) * velocity - 30,
|
45
|
+
life: config.lifetime || 150,
|
46
|
+
opacity: 1,
|
47
|
+
size: randomInRange(elementSize * 0.7, elementSize * 1.5),
|
48
|
+
rotation: randomInRange(0, 360),
|
49
|
+
color,
|
50
|
+
});
|
51
|
+
}
|
52
|
+
return particles;
|
53
|
+
};
|
54
|
+
const renderConfettiParticle = (particle) => {
|
55
|
+
return (React.createElement("div", { key: particle.id, style: {
|
56
|
+
width: `${particle.size}px`,
|
57
|
+
height: `${particle.size * 0.6}px`,
|
58
|
+
backgroundColor: particle.color,
|
59
|
+
borderRadius: '3px',
|
60
|
+
boxShadow: '0 2px 4px rgba(0,0,0,0.2)',
|
61
|
+
} }));
|
62
|
+
};
|
63
|
+
|
64
|
+
const createSparkleParticles = (origin, config) => {
|
65
|
+
const { particleCount = 35, spread = 120, startVelocity = 45, elementSize = 25, colors = ['#FFD700', '#FFFFFF'] } = config;
|
66
|
+
const particles = [];
|
67
|
+
for (let i = 0; i < particleCount; i++) {
|
68
|
+
const velocityScale = startVelocity / 45; // Scale based on default
|
69
|
+
particles.push({
|
70
|
+
id: generateId(),
|
71
|
+
x: origin.x + randomInRange(-spread, spread),
|
72
|
+
y: origin.y + randomInRange(-spread, spread),
|
73
|
+
vx: randomInRange(-3, 3) * velocityScale,
|
74
|
+
vy: randomInRange(-3, 3) * velocityScale,
|
75
|
+
life: config.lifetime || 120,
|
76
|
+
opacity: 0,
|
77
|
+
size: randomInRange(elementSize * 0.4, elementSize * 1.2),
|
78
|
+
rotation: randomInRange(0, 360),
|
79
|
+
color: colors[Math.floor(Math.random() * colors.length)] || colors[0],
|
80
|
+
});
|
81
|
+
}
|
82
|
+
return particles;
|
83
|
+
};
|
84
|
+
const renderSparkleParticle = (particle) => {
|
85
|
+
const scale = particle.opacity;
|
86
|
+
return (React.createElement("svg", { key: particle.id, width: particle.size, height: particle.size, viewBox: "0 0 24 24", style: {
|
87
|
+
transform: `scale(${scale}) rotate(${particle.rotation}deg)`,
|
88
|
+
filter: 'drop-shadow(0 0 6px rgba(255, 215, 0, 0.8))',
|
89
|
+
} },
|
90
|
+
React.createElement("path", { d: "M12 0L14.59 8.41L23 11L14.59 13.59L12 22L9.41 13.59L1 11L9.41 8.41L12 0Z", fill: particle.color })));
|
91
|
+
};
|
92
|
+
|
93
|
+
const heartColors = ['#ff1744', '#e91e63', '#ff4569', '#ff6b6b', '#ee5a70'];
|
94
|
+
const createHeartParticles = (origin, config) => {
|
95
|
+
const { particleCount = 25, startVelocity = 30, colors = heartColors, elementSize = 30 } = config;
|
96
|
+
const particles = [];
|
97
|
+
for (let i = 0; i < particleCount; i++) {
|
98
|
+
const angle = randomInRange(-45, -135);
|
99
|
+
const velocity = randomInRange(startVelocity * 0.7, startVelocity * 1.3);
|
100
|
+
const horizontalDrift = randomInRange(-2, 2);
|
101
|
+
particles.push({
|
102
|
+
id: generateId(),
|
103
|
+
x: origin.x + randomInRange(-10, 10),
|
104
|
+
y: origin.y,
|
105
|
+
vx: Math.cos((angle * Math.PI) / 180) * velocity + horizontalDrift,
|
106
|
+
vy: Math.sin((angle * Math.PI) / 180) * velocity,
|
107
|
+
life: config.lifetime || 180,
|
108
|
+
opacity: 1,
|
109
|
+
size: randomInRange(elementSize * 0.6, elementSize * 1.2),
|
110
|
+
rotation: randomInRange(-20, 20),
|
111
|
+
color: getRandomColor(colors),
|
112
|
+
});
|
113
|
+
}
|
114
|
+
return particles;
|
115
|
+
};
|
116
|
+
const renderHeartParticle = (particle) => {
|
117
|
+
return (React.createElement("svg", { key: particle.id, width: particle.size, height: particle.size, viewBox: "0 0 24 24", fill: particle.color, style: {
|
118
|
+
filter: `drop-shadow(0 0 ${particle.size * 0.15}px ${particle.color})`,
|
119
|
+
} },
|
120
|
+
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
|
+
};
|
122
|
+
|
123
|
+
const fireworkColors = ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff', '#00ffff', '#ffffff'];
|
124
|
+
const createFireworkParticles = (origin, config) => {
|
125
|
+
const { particleCount = 60, startVelocity = 50, colors = fireworkColors, elementSize = 8 } = config;
|
126
|
+
const particles = [];
|
127
|
+
for (let i = 0; i < particleCount; i++) {
|
128
|
+
const angle = (360 / particleCount) * i + randomInRange(-5, 5);
|
129
|
+
const velocity = randomInRange(startVelocity * 0.5, startVelocity * 1.2);
|
130
|
+
const color = getRandomColor(colors);
|
131
|
+
particles.push({
|
132
|
+
id: generateId(),
|
133
|
+
x: origin.x,
|
134
|
+
y: origin.y,
|
135
|
+
vx: Math.cos(degreesToRadians(angle)) * velocity,
|
136
|
+
vy: Math.sin(degreesToRadians(angle)) * velocity - 10,
|
137
|
+
life: config.lifetime || 140,
|
138
|
+
opacity: 1,
|
139
|
+
size: randomInRange(elementSize * 0.6, elementSize * 1.4),
|
140
|
+
rotation: 0,
|
141
|
+
color,
|
142
|
+
});
|
143
|
+
}
|
144
|
+
return particles;
|
145
|
+
};
|
146
|
+
const renderFireworkParticle = (particle) => {
|
147
|
+
return (React.createElement("div", { key: particle.id, style: {
|
148
|
+
width: `${particle.size}px`,
|
149
|
+
height: `${particle.size}px`,
|
150
|
+
backgroundColor: '#ffffff',
|
151
|
+
borderRadius: '50%',
|
152
|
+
boxShadow: `
|
153
|
+
0 0 ${particle.size}px ${particle.color},
|
154
|
+
0 0 ${particle.size * 2}px ${particle.color},
|
155
|
+
0 0 ${particle.size * 3}px ${particle.color},
|
156
|
+
0 0 ${particle.size * 4}px ${particle.color}
|
157
|
+
`,
|
158
|
+
background: `radial-gradient(circle, #ffffff 0%, ${particle.color} 40%, transparent 70%)`,
|
159
|
+
} }));
|
160
|
+
};
|
161
|
+
|
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)'];
|
163
|
+
const createBubbleParticles = (origin, config) => {
|
164
|
+
const { particleCount = 30, spread = 80, startVelocity = 30, colors = bubbleColors, elementSize = 40 } = config;
|
165
|
+
const particles = [];
|
166
|
+
for (let i = 0; i < particleCount; i++) {
|
167
|
+
particles.push({
|
168
|
+
id: generateId(),
|
169
|
+
x: origin.x + randomInRange(-spread, spread),
|
170
|
+
y: origin.y,
|
171
|
+
vx: randomInRange(-3, 3),
|
172
|
+
vy: -randomInRange(startVelocity * 0.7, startVelocity * 1.2),
|
173
|
+
life: config.lifetime || 160,
|
174
|
+
opacity: 0.7,
|
175
|
+
size: randomInRange(elementSize * 0.4, elementSize * 1.2),
|
176
|
+
rotation: 0,
|
177
|
+
color: colors[Math.floor(Math.random() * colors.length)] || colors[0],
|
178
|
+
});
|
179
|
+
}
|
180
|
+
return particles;
|
181
|
+
};
|
182
|
+
const renderBubbleParticle = (particle) => {
|
183
|
+
return (React.createElement("div", { key: particle.id, style: {
|
184
|
+
width: `${particle.size}px`,
|
185
|
+
height: `${particle.size}px`,
|
186
|
+
backgroundColor: particle.color,
|
187
|
+
borderRadius: '50%',
|
188
|
+
border: '2px solid rgba(255, 255, 255, 0.6)',
|
189
|
+
backgroundImage: 'radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.8), transparent)',
|
190
|
+
boxShadow: `
|
191
|
+
inset 0 0 ${particle.size * 0.3}px rgba(255, 255, 255, 0.4),
|
192
|
+
0 0 ${particle.size * 0.5}px ${particle.color}
|
193
|
+
`,
|
194
|
+
} }));
|
195
|
+
};
|
196
|
+
|
197
|
+
const starColors = ['#FFD700', '#FFA500', '#FF6347', '#FFE4B5'];
|
198
|
+
const createStarParticles = (origin, config) => {
|
199
|
+
const { particleCount = 40, startVelocity = 35, colors = starColors, elementSize = 30 } = config;
|
200
|
+
const particles = [];
|
201
|
+
for (let i = 0; i < particleCount; i++) {
|
202
|
+
const angle = randomInRange(0, 360);
|
203
|
+
const velocity = randomInRange(startVelocity * 0.5, startVelocity);
|
204
|
+
particles.push({
|
205
|
+
id: generateId(),
|
206
|
+
x: origin.x,
|
207
|
+
y: origin.y,
|
208
|
+
vx: Math.cos((angle * Math.PI) / 180) * velocity,
|
209
|
+
vy: Math.sin((angle * Math.PI) / 180) * velocity - 15,
|
210
|
+
life: config.lifetime || 150,
|
211
|
+
opacity: 1,
|
212
|
+
size: randomInRange(elementSize * 0.5, elementSize * 1.3),
|
213
|
+
rotation: randomInRange(0, 360),
|
214
|
+
color: colors[Math.floor(Math.random() * colors.length)] || colors[0],
|
215
|
+
});
|
216
|
+
}
|
217
|
+
return particles;
|
218
|
+
};
|
219
|
+
const renderStarParticle = (particle) => {
|
220
|
+
return (React.createElement("svg", { key: particle.id, width: particle.size, height: particle.size, viewBox: "0 0 24 24", fill: particle.color, style: {
|
221
|
+
filter: `drop-shadow(0 0 ${particle.size * 0.2}px ${particle.color})`,
|
222
|
+
} },
|
223
|
+
React.createElement("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" })));
|
224
|
+
};
|
225
|
+
|
226
|
+
const animations = {
|
227
|
+
confetti: {
|
228
|
+
createParticles: createConfettiParticles,
|
229
|
+
renderParticle: renderConfettiParticle,
|
230
|
+
},
|
231
|
+
sparkles: {
|
232
|
+
createParticles: createSparkleParticles,
|
233
|
+
renderParticle: renderSparkleParticle,
|
234
|
+
},
|
235
|
+
hearts: {
|
236
|
+
createParticles: createHeartParticles,
|
237
|
+
renderParticle: renderHeartParticle,
|
238
|
+
},
|
239
|
+
fireworks: {
|
240
|
+
createParticles: createFireworkParticles,
|
241
|
+
renderParticle: renderFireworkParticle,
|
242
|
+
},
|
243
|
+
bubbles: {
|
244
|
+
createParticles: createBubbleParticles,
|
245
|
+
renderParticle: renderBubbleParticle,
|
246
|
+
},
|
247
|
+
stars: {
|
248
|
+
createParticles: createStarParticles,
|
249
|
+
renderParticle: renderStarParticle,
|
250
|
+
},
|
251
|
+
};
|
252
|
+
|
253
|
+
const useReward = (elementId, animationType, config) => {
|
254
|
+
const [isAnimating, setIsAnimating] = React.useState(false);
|
255
|
+
const animationFrameRef = React.useRef();
|
256
|
+
const particlesRef = React.useRef([]);
|
257
|
+
const containerRef = React.useRef(null);
|
258
|
+
const rootRef = React.useRef(null);
|
259
|
+
const animate = React.useCallback(() => {
|
260
|
+
var _a, _b, _c, _d, _e, _f;
|
261
|
+
const element = document.getElementById(elementId);
|
262
|
+
if (!element)
|
263
|
+
return;
|
264
|
+
const rect = element.getBoundingClientRect();
|
265
|
+
const origin = {
|
266
|
+
x: rect.left + rect.width / 2,
|
267
|
+
y: rect.top + rect.height / 2,
|
268
|
+
};
|
269
|
+
const animationHandler = animations[animationType];
|
270
|
+
if (!animationHandler) {
|
271
|
+
console.error(`Animation type "${animationType}" not found`);
|
272
|
+
return;
|
273
|
+
}
|
274
|
+
// Create particles
|
275
|
+
particlesRef.current = animationHandler.createParticles(origin, config || {});
|
276
|
+
// Create container
|
277
|
+
const container = document.createElement('div');
|
278
|
+
container.style.position = 'fixed';
|
279
|
+
container.style.top = '0';
|
280
|
+
container.style.left = '0';
|
281
|
+
container.style.width = '100%';
|
282
|
+
container.style.height = '100%';
|
283
|
+
container.style.pointerEvents = 'none';
|
284
|
+
container.style.zIndex = '9999';
|
285
|
+
document.body.appendChild(container);
|
286
|
+
containerRef.current = container;
|
287
|
+
// Create React root
|
288
|
+
const root = client.createRoot(container);
|
289
|
+
rootRef.current = root;
|
290
|
+
const containerRect = container.getBoundingClientRect();
|
291
|
+
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 : 0.35;
|
292
|
+
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;
|
293
|
+
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;
|
294
|
+
const updateParticles = () => {
|
295
|
+
let activeParticles = 0;
|
296
|
+
particlesRef.current = particlesRef.current.map((particle) => {
|
297
|
+
if (particle.life <= 0)
|
298
|
+
return particle;
|
299
|
+
activeParticles++;
|
300
|
+
// Update physics
|
301
|
+
particle.x += particle.vx;
|
302
|
+
particle.y += particle.vy;
|
303
|
+
particle.vy += gravity;
|
304
|
+
particle.vx += wind;
|
305
|
+
particle.vx *= friction;
|
306
|
+
particle.vy *= friction;
|
307
|
+
particle.rotation += particle.vx * 2;
|
308
|
+
particle.life -= 1.2;
|
309
|
+
// Special opacity handling for sparkles
|
310
|
+
if (animationType === 'sparkles') {
|
311
|
+
if (particle.life > 70) {
|
312
|
+
particle.opacity = (100 - particle.life) / 30;
|
313
|
+
}
|
314
|
+
else if (particle.life < 30) {
|
315
|
+
particle.opacity = particle.life / 30;
|
316
|
+
}
|
317
|
+
}
|
318
|
+
else {
|
319
|
+
particle.opacity = particle.life / 100;
|
320
|
+
}
|
321
|
+
return particle;
|
322
|
+
});
|
323
|
+
// Render particles
|
324
|
+
if (rootRef.current) {
|
325
|
+
rootRef.current.render(React.createElement(React.Fragment, null, particlesRef.current
|
326
|
+
.filter((p) => p.life > 0)
|
327
|
+
.map((particle) => (React.createElement("div", { key: particle.id, style: createParticleStyle(particle, containerRect) }, animationHandler.renderParticle(particle))))));
|
328
|
+
}
|
329
|
+
if (activeParticles > 0) {
|
330
|
+
animationFrameRef.current = requestAnimationFrame(updateParticles);
|
331
|
+
}
|
332
|
+
else {
|
333
|
+
// Cleanup
|
334
|
+
if (animationFrameRef.current) {
|
335
|
+
cancelAnimationFrame(animationFrameRef.current);
|
336
|
+
}
|
337
|
+
if (rootRef.current) {
|
338
|
+
rootRef.current.unmount();
|
339
|
+
rootRef.current = null;
|
340
|
+
}
|
341
|
+
if (containerRef.current && document.body.contains(containerRef.current)) {
|
342
|
+
document.body.removeChild(containerRef.current);
|
343
|
+
containerRef.current = null;
|
344
|
+
}
|
345
|
+
setIsAnimating(false);
|
346
|
+
}
|
347
|
+
};
|
348
|
+
setIsAnimating(true);
|
349
|
+
updateParticles();
|
350
|
+
}, [elementId, animationType, config]);
|
351
|
+
const reward = React.useCallback(() => {
|
352
|
+
if (!isAnimating) {
|
353
|
+
animate();
|
354
|
+
}
|
355
|
+
}, [animate, isAnimating]);
|
356
|
+
// Cleanup on unmount
|
357
|
+
React.useEffect(() => {
|
358
|
+
return () => {
|
359
|
+
if (animationFrameRef.current) {
|
360
|
+
cancelAnimationFrame(animationFrameRef.current);
|
361
|
+
}
|
362
|
+
if (rootRef.current) {
|
363
|
+
rootRef.current.unmount();
|
364
|
+
rootRef.current = null;
|
365
|
+
}
|
366
|
+
if (containerRef.current && document.body.contains(containerRef.current)) {
|
367
|
+
document.body.removeChild(containerRef.current);
|
368
|
+
containerRef.current = null;
|
369
|
+
}
|
370
|
+
};
|
371
|
+
}, []);
|
372
|
+
return { reward, isAnimating };
|
373
|
+
};
|
374
|
+
|
375
|
+
exports.useReward = useReward;
|
376
|
+
//# sourceMappingURL=index.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../src/utils.ts","../src/animations/confetti.tsx","../src/animations/sparkles.tsx","../src/animations/hearts.tsx","../src/animations/fireworks.tsx","../src/animations/bubbles.tsx","../src/animations/stars.tsx","../src/animations/index.ts","../src/useReward.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];\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, degreesToRadians, generateId, getRandomColor } from '../utils';\n\nconst defaultColors = ['#f44336', '#e91e63', '#9c27b0', '#673ab7', '#3f51b5', '#2196f3', '#03a9f4', '#00bcd4', '#009688', '#4caf50', '#8bc34a', '#cddc39', '#ffeb3b', '#ffc107', '#ff9800', '#ff5722'];\n\nexport const createConfettiParticles = (\n origin: { x: number; y: number },\n config: AnimationConfig\n): Particle[] => {\n const {\n particleCount = 50,\n startVelocity = 55,\n colors = defaultColors,\n elementSize = 20\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 const color = getRandomColor(colors);\n\n particles.push({\n id: generateId(),\n x: origin.x,\n y: origin.y,\n vx: Math.cos(degreesToRadians(angle)) * velocity,\n vy: Math.sin(degreesToRadians(angle)) * velocity - 30,\n life: config.lifetime || 150,\n opacity: 1,\n size: randomInRange(elementSize * 0.7, elementSize * 1.5),\n rotation: randomInRange(0, 360),\n color,\n });\n }\n\n return particles;\n};\n\nexport const renderConfettiParticle = (particle: Particle): React.ReactNode => {\n return (\n <div\n key={particle.id}\n style={{\n width: `${particle.size}px`,\n height: `${particle.size * 0.6}px`,\n backgroundColor: particle.color,\n borderRadius: '3px',\n boxShadow: '0 2px 4px rgba(0,0,0,0.2)',\n }}\n />\n );\n};","import React from 'react';\nimport { AnimationConfig, Particle } from '../types';\nimport { randomInRange, generateId } from '../utils';\n\nexport const createSparkleParticles = (\n origin: { x: number; y: number },\n config: AnimationConfig\n): Particle[] => {\n const {\n particleCount = 35,\n spread = 120,\n startVelocity = 45,\n elementSize = 25,\n colors = ['#FFD700', '#FFFFFF']\n } = config;\n\n const particles: Particle[] = [];\n\n for (let i = 0; i < particleCount; i++) {\n const velocityScale = startVelocity / 45; // Scale based on default\n particles.push({\n id: generateId(),\n x: origin.x + randomInRange(-spread, spread),\n y: origin.y + randomInRange(-spread, spread),\n vx: randomInRange(-3, 3) * velocityScale,\n vy: randomInRange(-3, 3) * velocityScale,\n life: config.lifetime || 120,\n opacity: 0,\n size: randomInRange(elementSize * 0.4, elementSize * 1.2),\n rotation: randomInRange(0, 360),\n color: colors[Math.floor(Math.random() * colors.length)] || colors[0],\n });\n }\n\n return particles;\n};\n\nexport const renderSparkleParticle = (particle: Particle): React.ReactNode => {\n const scale = particle.opacity;\n \n return (\n <svg\n key={particle.id}\n width={particle.size}\n height={particle.size}\n viewBox=\"0 0 24 24\"\n style={{\n transform: `scale(${scale}) rotate(${particle.rotation}deg)`,\n filter: 'drop-shadow(0 0 6px rgba(255, 215, 0, 0.8))',\n }}\n >\n <path\n d=\"M12 0L14.59 8.41L23 11L14.59 13.59L12 22L9.41 13.59L1 11L9.41 8.41L12 0Z\"\n fill={particle.color}\n />\n </svg>\n );\n};","import React from 'react';\nimport { AnimationConfig, Particle } from '../types';\nimport { randomInRange, generateId, getRandomColor } from '../utils';\n\nconst heartColors = ['#ff1744', '#e91e63', '#ff4569', '#ff6b6b', '#ee5a70'];\n\nexport const createHeartParticles = (\n origin: { x: number; y: number },\n config: AnimationConfig\n): Particle[] => {\n const {\n particleCount = 25,\n startVelocity = 30,\n colors = heartColors,\n elementSize = 30\n } = config;\n\n const particles: Particle[] = [];\n\n for (let i = 0; i < particleCount; i++) {\n const angle = randomInRange(-45, -135);\n const velocity = randomInRange(startVelocity * 0.7, startVelocity * 1.3);\n const horizontalDrift = randomInRange(-2, 2);\n\n particles.push({\n id: generateId(),\n x: origin.x + randomInRange(-10, 10),\n y: origin.y,\n vx: Math.cos((angle * Math.PI) / 180) * velocity + horizontalDrift,\n vy: Math.sin((angle * Math.PI) / 180) * velocity,\n life: config.lifetime || 180,\n opacity: 1,\n size: randomInRange(elementSize * 0.6, elementSize * 1.2),\n rotation: randomInRange(-20, 20),\n color: getRandomColor(colors),\n });\n }\n\n return particles;\n};\n\nexport const renderHeartParticle = (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.15}px ${particle.color})`,\n }}\n >\n <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\" />\n </svg>\n );\n};","import React from 'react';\nimport { AnimationConfig, Particle } from '../types';\nimport { randomInRange, degreesToRadians, generateId, getRandomColor } from '../utils';\n\nconst fireworkColors = ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff', '#00ffff', '#ffffff'];\n\nexport const createFireworkParticles = (\n origin: { x: number; y: number },\n config: AnimationConfig\n): Particle[] => {\n const {\n particleCount = 60,\n startVelocity = 50,\n colors = fireworkColors,\n elementSize = 8\n } = config;\n\n const particles: Particle[] = [];\n\n for (let i = 0; i < particleCount; i++) {\n const angle = (360 / particleCount) * i + randomInRange(-5, 5);\n const velocity = randomInRange(startVelocity * 0.5, startVelocity * 1.2);\n const color = getRandomColor(colors);\n\n particles.push({\n id: generateId(),\n x: origin.x,\n y: origin.y,\n vx: Math.cos(degreesToRadians(angle)) * velocity,\n vy: Math.sin(degreesToRadians(angle)) * velocity - 10,\n life: config.lifetime || 140,\n opacity: 1,\n size: randomInRange(elementSize * 0.6, elementSize * 1.4),\n rotation: 0,\n color,\n });\n }\n\n return particles;\n};\n\nexport const renderFireworkParticle = (particle: Particle): React.ReactNode => {\n return (\n <div\n key={particle.id}\n style={{\n width: `${particle.size}px`,\n height: `${particle.size}px`,\n backgroundColor: '#ffffff',\n borderRadius: '50%',\n boxShadow: `\n 0 0 ${particle.size}px ${particle.color},\n 0 0 ${particle.size * 2}px ${particle.color},\n 0 0 ${particle.size * 3}px ${particle.color},\n 0 0 ${particle.size * 4}px ${particle.color}\n `,\n background: `radial-gradient(circle, #ffffff 0%, ${particle.color} 40%, transparent 70%)`,\n }}\n />\n );\n};","import React from 'react';\nimport { AnimationConfig, Particle } from '../types';\nimport { randomInRange, generateId } from '../utils';\n\nconst 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)'];\n\nexport const createBubbleParticles = (\n origin: { x: number; y: number },\n config: AnimationConfig\n): Particle[] => {\n const {\n particleCount = 30,\n spread = 80,\n startVelocity = 30,\n colors = bubbleColors,\n elementSize = 40\n } = config;\n\n const particles: Particle[] = [];\n\n for (let i = 0; i < particleCount; i++) {\n particles.push({\n id: generateId(),\n x: origin.x + randomInRange(-spread, spread),\n y: origin.y,\n vx: randomInRange(-3, 3),\n vy: -randomInRange(startVelocity * 0.7, startVelocity * 1.2),\n life: config.lifetime || 160,\n opacity: 0.7,\n size: randomInRange(elementSize * 0.4, elementSize * 1.2),\n rotation: 0,\n color: colors[Math.floor(Math.random() * colors.length)] || colors[0],\n });\n }\n\n return particles;\n};\n\nexport const renderBubbleParticle = (particle: Particle): React.ReactNode => {\n return (\n <div\n key={particle.id}\n style={{\n width: `${particle.size}px`,\n height: `${particle.size}px`,\n backgroundColor: particle.color,\n borderRadius: '50%',\n border: '2px solid rgba(255, 255, 255, 0.6)',\n backgroundImage: 'radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.8), transparent)',\n boxShadow: `\n inset 0 0 ${particle.size * 0.3}px rgba(255, 255, 255, 0.4),\n 0 0 ${particle.size * 0.5}px ${particle.color}\n `,\n }}\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 = 35,\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],\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};","import { AnimationType, AnimationConfig, Particle } from '../types';\nimport { createConfettiParticles, renderConfettiParticle } from './confetti';\nimport { createSparkleParticles, renderSparkleParticle } from './sparkles';\nimport { createHeartParticles, renderHeartParticle } from './hearts';\nimport { createFireworkParticles, renderFireworkParticle } from './fireworks';\nimport { createBubbleParticles, renderBubbleParticle } from './bubbles';\nimport { createStarParticles, renderStarParticle } from './stars';\n\nexport type ParticleCreator = (origin: { x: number; y: number }, config: AnimationConfig) => Particle[];\nexport type ParticleRenderer = (particle: Particle) => React.ReactNode;\n\ninterface AnimationHandler {\n createParticles: ParticleCreator;\n renderParticle: ParticleRenderer;\n}\n\nexport const animations: Record<AnimationType, AnimationHandler> = {\n confetti: {\n createParticles: createConfettiParticles,\n renderParticle: renderConfettiParticle,\n },\n sparkles: {\n createParticles: createSparkleParticles,\n renderParticle: renderSparkleParticle,\n },\n hearts: {\n createParticles: createHeartParticles,\n renderParticle: renderHeartParticle,\n },\n fireworks: {\n createParticles: createFireworkParticles,\n renderParticle: renderFireworkParticle,\n },\n bubbles: {\n createParticles: createBubbleParticles,\n renderParticle: renderBubbleParticle,\n },\n stars: {\n createParticles: createStarParticles,\n renderParticle: renderStarParticle,\n },\n};","import { useCallback, useRef, useState, useEffect } from 'react';\nimport React from 'react';\nimport { createRoot, Root } from 'react-dom/client';\nimport { AnimationType, AnimationConfig, Particle } from './types';\nimport { animations } from './animations';\nimport { createParticleStyle } from './utils';\n\ninterface UseRewardReturn {\n reward: () => void;\n isAnimating: boolean;\n}\n\nexport const useReward = (\n elementId: string,\n animationType: AnimationType,\n config?: AnimationConfig\n): UseRewardReturn => {\n const [isAnimating, setIsAnimating] = useState(false);\n const animationFrameRef = useRef<number>();\n const particlesRef = useRef<Particle[]>([]);\n const containerRef = useRef<HTMLDivElement | null>(null);\n const rootRef = useRef<Root | null>(null);\n\n const animate = useCallback(() => {\n const element = document.getElementById(elementId);\n if (!element) return;\n\n const rect = element.getBoundingClientRect();\n const origin = {\n x: rect.left + rect.width / 2,\n y: rect.top + rect.height / 2,\n };\n\n const animationHandler = animations[animationType];\n if (!animationHandler) {\n console.error(`Animation type \"${animationType}\" not found`);\n return;\n }\n\n // Create particles\n particlesRef.current = animationHandler.createParticles(origin, config || {});\n\n // Create container\n const container = document.createElement('div');\n container.style.position = 'fixed';\n container.style.top = '0';\n container.style.left = '0';\n container.style.width = '100%';\n container.style.height = '100%';\n container.style.pointerEvents = 'none';\n container.style.zIndex = '9999';\n document.body.appendChild(container);\n containerRef.current = container;\n\n // Create React root\n const root = createRoot(container);\n rootRef.current = root;\n\n const containerRect = container.getBoundingClientRect();\n const gravity = config?.physics?.gravity ?? 0.35;\n const friction = config?.physics?.friction ?? 0.98;\n const wind = config?.physics?.wind ?? 0;\n\n const updateParticles = () => {\n let activeParticles = 0;\n\n particlesRef.current = particlesRef.current.map((particle) => {\n if (particle.life <= 0) return particle;\n\n activeParticles++;\n\n // Update physics\n particle.x += particle.vx;\n particle.y += particle.vy;\n particle.vy += gravity;\n particle.vx += wind;\n particle.vx *= friction;\n particle.vy *= friction;\n particle.rotation += particle.vx * 2;\n particle.life -= 1.2;\n\n // Special opacity handling for sparkles\n if (animationType === 'sparkles') {\n if (particle.life > 70) {\n particle.opacity = (100 - particle.life) / 30;\n } else if (particle.life < 30) {\n particle.opacity = particle.life / 30;\n }\n } else {\n particle.opacity = particle.life / 100;\n }\n\n return particle;\n });\n\n // Render particles\n if (rootRef.current) {\n rootRef.current.render(\n <React.Fragment>\n {particlesRef.current\n .filter((p) => p.life > 0)\n .map((particle) => (\n <div\n key={particle.id}\n style={createParticleStyle(particle, containerRect)}\n >\n {animationHandler.renderParticle(particle)}\n </div>\n ))}\n </React.Fragment>\n );\n }\n\n if (activeParticles > 0) {\n animationFrameRef.current = requestAnimationFrame(updateParticles);\n } else {\n // Cleanup\n if (animationFrameRef.current) {\n cancelAnimationFrame(animationFrameRef.current);\n }\n if (rootRef.current) {\n rootRef.current.unmount();\n rootRef.current = null;\n }\n if (containerRef.current && document.body.contains(containerRef.current)) {\n document.body.removeChild(containerRef.current);\n containerRef.current = null;\n }\n setIsAnimating(false);\n }\n };\n\n setIsAnimating(true);\n updateParticles();\n }, [elementId, animationType, config]);\n\n const reward = useCallback(() => {\n if (!isAnimating) {\n animate();\n }\n }, [animate, isAnimating]);\n\n // Cleanup on unmount\n useEffect(() => {\n return () => {\n if (animationFrameRef.current) {\n cancelAnimationFrame(animationFrameRef.current);\n }\n if (rootRef.current) {\n rootRef.current.unmount();\n rootRef.current = null;\n }\n if (containerRef.current && document.body.contains(containerRef.current)) {\n document.body.removeChild(containerRef.current);\n containerRef.current = null;\n }\n };\n }, []);\n\n return { reward, isAnimating };\n};"],"names":["useState","useRef","useCallback","createRoot","useEffect"],"mappings":"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"}
|
package/dist/types.d.ts
ADDED
@@ -0,0 +1,33 @@
|
|
1
|
+
export interface Particle {
|
2
|
+
id: string;
|
3
|
+
x: number;
|
4
|
+
y: number;
|
5
|
+
vx: number;
|
6
|
+
vy: number;
|
7
|
+
life: number;
|
8
|
+
opacity: number;
|
9
|
+
size: number;
|
10
|
+
rotation: number;
|
11
|
+
color: string;
|
12
|
+
element?: React.ReactNode;
|
13
|
+
}
|
14
|
+
export interface AnimationConfig {
|
15
|
+
particleCount?: number;
|
16
|
+
spread?: number;
|
17
|
+
startVelocity?: number;
|
18
|
+
decay?: number;
|
19
|
+
lifetime?: number;
|
20
|
+
colors?: string[];
|
21
|
+
elementSize?: number;
|
22
|
+
duration?: number;
|
23
|
+
physics?: {
|
24
|
+
gravity?: number;
|
25
|
+
wind?: number;
|
26
|
+
friction?: number;
|
27
|
+
};
|
28
|
+
}
|
29
|
+
export type AnimationType = 'confetti' | 'sparkles' | 'fireworks' | 'hearts' | 'stars' | 'bubbles';
|
30
|
+
export interface UseRewardConfig extends AnimationConfig {
|
31
|
+
animationType: AnimationType;
|
32
|
+
}
|
33
|
+
//# sourceMappingURL=types.d.ts.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,QAAQ;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,MAAM,WAAW,eAAe;IAC9B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE;QACR,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,QAAQ,CAAC,EAAE,MAAM,CAAC;KACnB,CAAC;CACH;AAED,MAAM,MAAM,aAAa,GACrB,UAAU,GACV,UAAU,GACV,WAAW,GACX,QAAQ,GACR,OAAO,GACP,SAAS,CAAC;AAEd,MAAM,WAAW,eAAgB,SAAQ,eAAe;IACtD,aAAa,EAAE,aAAa,CAAC;CAC9B"}
|
@@ -0,0 +1,8 @@
|
|
1
|
+
import { AnimationType, AnimationConfig } from './types';
|
2
|
+
interface UseRewardReturn {
|
3
|
+
reward: () => void;
|
4
|
+
isAnimating: boolean;
|
5
|
+
}
|
6
|
+
export declare const useReward: (elementId: string, animationType: AnimationType, config?: AnimationConfig) => UseRewardReturn;
|
7
|
+
export {};
|
8
|
+
//# sourceMappingURL=useReward.d.ts.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"useReward.d.ts","sourceRoot":"","sources":["../src/useReward.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,aAAa,EAAE,eAAe,EAAY,MAAM,SAAS,CAAC;AAInE,UAAU,eAAe;IACvB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,WAAW,EAAE,OAAO,CAAC;CACtB;AAED,eAAO,MAAM,SAAS,GACpB,WAAW,MAAM,EACjB,eAAe,aAAa,EAC5B,SAAS,eAAe,KACvB,eAgJF,CAAC"}
|
package/dist/utils.d.ts
ADDED
@@ -0,0 +1,7 @@
|
|
1
|
+
import { Particle } from './types';
|
2
|
+
export declare const randomInRange: (min: number, max: number) => number;
|
3
|
+
export declare const degreesToRadians: (degrees: number) => number;
|
4
|
+
export declare const generateId: () => string;
|
5
|
+
export declare const getRandomColor: (colors: string[]) => string;
|
6
|
+
export declare const createParticleStyle: (particle: Particle, containerRect: DOMRect) => React.CSSProperties;
|
7
|
+
//# sourceMappingURL=utils.d.ts.map
|
@@ -0,0 +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"}
|
package/package.json
ADDED
@@ -0,0 +1,76 @@
|
|
1
|
+
{
|
2
|
+
"name": "partycles",
|
3
|
+
"version": "0.1.0",
|
4
|
+
"description": "🎉 Delightful particle animations for React",
|
5
|
+
"repository": {
|
6
|
+
"type": "git",
|
7
|
+
"url": "https://github.com/jonathanleane/partycles.git"
|
8
|
+
},
|
9
|
+
"homepage": "https://github.com/jonathanleane/partycles#readme",
|
10
|
+
"bugs": {
|
11
|
+
"url": "https://github.com/jonathanleane/partycles/issues"
|
12
|
+
},
|
13
|
+
"main": "dist/index.js",
|
14
|
+
"module": "dist/index.esm.js",
|
15
|
+
"types": "dist/index.d.ts",
|
16
|
+
"exports": {
|
17
|
+
".": {
|
18
|
+
"import": "./dist/index.esm.js",
|
19
|
+
"require": "./dist/index.js",
|
20
|
+
"types": "./dist/index.d.ts"
|
21
|
+
},
|
22
|
+
"./animations/*": {
|
23
|
+
"import": "./dist/animations/*.esm.js",
|
24
|
+
"require": "./dist/animations/*.js"
|
25
|
+
}
|
26
|
+
},
|
27
|
+
"sideEffects": false,
|
28
|
+
"files": [
|
29
|
+
"dist"
|
30
|
+
],
|
31
|
+
"scripts": {
|
32
|
+
"build": "rollup -c rollup.config.mjs",
|
33
|
+
"dev": "rollup -c rollup.config.mjs -w",
|
34
|
+
"demo": "cd demo && npm start",
|
35
|
+
"prepare": "npm run build",
|
36
|
+
"lint": "eslint src --ext .ts,.tsx",
|
37
|
+
"lint:fix": "eslint src --ext .ts,.tsx --fix",
|
38
|
+
"format": "prettier --write \"src/**/*.{ts,tsx,js,jsx,json,md}\"",
|
39
|
+
"format:check": "prettier --check \"src/**/*.{ts,tsx,js,jsx,json,md}\"",
|
40
|
+
"type-check": "tsc --noEmit"
|
41
|
+
},
|
42
|
+
"keywords": [
|
43
|
+
"react",
|
44
|
+
"animations",
|
45
|
+
"effects",
|
46
|
+
"rewards",
|
47
|
+
"confetti",
|
48
|
+
"sparkles"
|
49
|
+
],
|
50
|
+
"author": "Jonathan Leane",
|
51
|
+
"license": "MIT",
|
52
|
+
"peerDependencies": {
|
53
|
+
"react": ">=16.8.0",
|
54
|
+
"react-dom": ">=16.8.0"
|
55
|
+
},
|
56
|
+
"devDependencies": {
|
57
|
+
"@rollup/plugin-commonjs": "^25.0.7",
|
58
|
+
"@rollup/plugin-node-resolve": "^15.2.3",
|
59
|
+
"@rollup/plugin-typescript": "^11.1.5",
|
60
|
+
"@types/react": "^18.2.0",
|
61
|
+
"@types/react-dom": "^18.2.0",
|
62
|
+
"@typescript-eslint/eslint-plugin": "^6.0.0",
|
63
|
+
"@typescript-eslint/parser": "^6.0.0",
|
64
|
+
"eslint": "^8.0.0",
|
65
|
+
"eslint-config-prettier": "^9.0.0",
|
66
|
+
"eslint-plugin-react": "^7.33.0",
|
67
|
+
"eslint-plugin-react-hooks": "^4.6.0",
|
68
|
+
"prettier": "^3.0.0",
|
69
|
+
"react": "^18.2.0",
|
70
|
+
"react-dom": "^18.2.0",
|
71
|
+
"rollup": "^4.9.0",
|
72
|
+
"rollup-plugin-peer-deps-external": "^2.2.4",
|
73
|
+
"tslib": "^2.6.2",
|
74
|
+
"typescript": "^5.3.0"
|
75
|
+
}
|
76
|
+
}
|