partycles 0.1.0 → 0.3.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/README.md +143 -5
- package/dist/animations/animations/aurora.d.ts +8 -0
- package/dist/animations/animations/aurora.d.ts.map +1 -0
- package/dist/animations/animations/balloons.d.ts +8 -0
- package/dist/animations/animations/balloons.d.ts.map +1 -0
- package/dist/animations/animations/coins.d.ts +8 -0
- package/dist/animations/animations/coins.d.ts.map +1 -0
- package/dist/animations/animations/emoji.d.ts +19 -0
- package/dist/animations/animations/emoji.d.ts.map +1 -0
- package/dist/animations/animations/fireflies.d.ts +8 -0
- package/dist/animations/animations/fireflies.d.ts.map +1 -0
- package/dist/animations/animations/galaxy.d.ts +8 -0
- package/dist/animations/animations/galaxy.d.ts.map +1 -0
- package/dist/animations/animations/index.d.ts.map +1 -1
- package/dist/animations/animations/lightning.d.ts +8 -0
- package/dist/animations/animations/lightning.d.ts.map +1 -0
- package/dist/animations/animations/music.d.ts +8 -0
- package/dist/animations/animations/music.d.ts.map +1 -0
- package/dist/animations/animations/paint.d.ts +8 -0
- package/dist/animations/animations/paint.d.ts.map +1 -0
- package/dist/animations/animations/petals.d.ts +8 -0
- package/dist/animations/animations/petals.d.ts.map +1 -0
- package/dist/animations/animations/snow.d.ts +8 -0
- package/dist/animations/animations/snow.d.ts.map +1 -0
- package/dist/animations/aurora.d.ts +8 -0
- package/dist/animations/aurora.d.ts.map +1 -0
- package/dist/animations/balloons.d.ts +8 -0
- package/dist/animations/balloons.d.ts.map +1 -0
- package/dist/animations/bubbles.esm.js +3 -3
- package/dist/animations/bubbles.esm.js.map +1 -1
- package/dist/animations/bubbles.js +3 -3
- package/dist/animations/bubbles.js.map +1 -1
- package/dist/animations/coins.d.ts +8 -0
- package/dist/animations/coins.d.ts.map +1 -0
- package/dist/animations/confetti.esm.js +1 -1
- package/dist/animations/confetti.esm.js.map +1 -1
- package/dist/animations/confetti.js +1 -1
- package/dist/animations/confetti.js.map +1 -1
- package/dist/animations/emoji.d.ts +19 -0
- package/dist/animations/emoji.d.ts.map +1 -0
- package/dist/animations/emoji.esm.js +58 -0
- package/dist/animations/emoji.esm.js.map +1 -0
- package/dist/animations/emoji.js +62 -0
- package/dist/animations/emoji.js.map +1 -0
- package/dist/animations/fireflies.d.ts +8 -0
- package/dist/animations/fireflies.d.ts.map +1 -0
- package/dist/animations/fireworks.esm.js +1 -1
- package/dist/animations/fireworks.esm.js.map +1 -1
- package/dist/animations/fireworks.js +1 -1
- package/dist/animations/fireworks.js.map +1 -1
- package/dist/animations/galaxy.d.ts +8 -0
- package/dist/animations/galaxy.d.ts.map +1 -0
- package/dist/animations/hearts.esm.js +1 -1
- package/dist/animations/hearts.esm.js.map +1 -1
- package/dist/animations/hearts.js +1 -1
- package/dist/animations/hearts.js.map +1 -1
- package/dist/animations/index.d.ts +1 -0
- package/dist/animations/index.d.ts.map +1 -1
- package/dist/animations/lightning.d.ts +8 -0
- package/dist/animations/lightning.d.ts.map +1 -0
- package/dist/animations/music.d.ts +8 -0
- package/dist/animations/music.d.ts.map +1 -0
- package/dist/animations/paint.d.ts +8 -0
- package/dist/animations/paint.d.ts.map +1 -0
- package/dist/animations/petals.d.ts +8 -0
- package/dist/animations/petals.d.ts.map +1 -0
- package/dist/animations/snow.d.ts +8 -0
- package/dist/animations/snow.d.ts.map +1 -0
- package/dist/animations/snow.esm.js +48 -0
- package/dist/animations/snow.esm.js.map +1 -0
- package/dist/animations/snow.js +51 -0
- package/dist/animations/snow.js.map +1 -0
- package/dist/animations/sparkles.esm.js +1 -1
- package/dist/animations/sparkles.esm.js.map +1 -1
- package/dist/animations/sparkles.js +1 -1
- package/dist/animations/sparkles.js.map +1 -1
- package/dist/animations/stars.esm.js +1 -1
- package/dist/animations/stars.esm.js.map +1 -1
- package/dist/animations/stars.js +1 -1
- package/dist/animations/stars.js.map +1 -1
- package/dist/animations/types.d.ts +1 -1
- package/dist/animations/types.d.ts.map +1 -1
- package/dist/animations/useReward.d.ts.map +1 -1
- package/dist/index.d.ts +1 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.esm.js +769 -10
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +769 -9
- package/dist/index.js.map +1 -1
- package/dist/types.d.ts +1 -1
- package/dist/types.d.ts.map +1 -1
- package/dist/useReward.d.ts.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
@@ -2,6 +2,8 @@
|
|
2
2
|
|
3
3
|
A lightweight, performant React library for adding delightful animation effects to your applications. Perfect for celebrating user achievements, form submissions, or any moment worth highlighting.
|
4
4
|
|
5
|
+
[**→ Try the Live Demo**](https://jonathanleane.github.io/partycles)
|
6
|
+
|
5
7
|
[](https://www.npmjs.com/package/partycles)
|
6
8
|
[](https://bundlephobia.com/package/partycles)
|
7
9
|
[](https://www.typescriptlang.org/)
|
@@ -10,8 +12,8 @@ A lightweight, performant React library for adding delightful animation effects
|
|
10
12
|
## ✨ Features
|
11
13
|
|
12
14
|
- 🎯 **Simple API** - Just one hook to rule them all
|
13
|
-
- 🎨 **
|
14
|
-
- 📦 **Tiny Bundle** -
|
15
|
+
- 🎨 **17 Beautiful Animations** - Confetti, sparkles, hearts, stars, fireworks, bubbles, snow, emoji, coins, lightning, petals, aurora, fireflies, paint, music, balloons, and galaxy
|
16
|
+
- 📦 **Tiny Bundle** - Zero dependencies, optimized for performance
|
15
17
|
- 🚀 **Performant** - Optimized animations using requestAnimationFrame
|
16
18
|
- 🎮 **Full Control** - Customize colors, particle count, physics, and more
|
17
19
|
- 📱 **Responsive** - Works seamlessly on all devices
|
@@ -44,6 +46,17 @@ function App() {
|
|
44
46
|
}
|
45
47
|
```
|
46
48
|
|
49
|
+
That's it! No configuration needed - it just works. 🎊
|
50
|
+
|
51
|
+
## 🤔 Why Partycles?
|
52
|
+
|
53
|
+
- **Zero Dependencies** - No bloat, just pure React code
|
54
|
+
- **One Hook** - Simple `useReward` hook handles everything
|
55
|
+
- **11 Animations** - From confetti to lightning, we've got you covered
|
56
|
+
- **Fully Typed** - Great TypeScript support out of the box
|
57
|
+
- **Customizable** - Tweak colors, physics, particle count, and more
|
58
|
+
- **Performant** - Optimized animations that won't slow down your app
|
59
|
+
|
47
60
|
## 📖 API Reference
|
48
61
|
|
49
62
|
### `useReward(elementId, animationType, config?)`
|
@@ -53,7 +66,7 @@ The main hook for creating reward animations.
|
|
53
66
|
#### Parameters
|
54
67
|
|
55
68
|
- `elementId` (string): The ID of the element to animate from
|
56
|
-
- `animationType` (string): One of: `'confetti'`, `'sparkles'`, `'hearts'`, `'stars'`, `'fireworks'`, `'bubbles'`
|
69
|
+
- `animationType` (string): One of: `'confetti'`, `'sparkles'`, `'hearts'`, `'stars'`, `'fireworks'`, `'bubbles'`, `'snow'`, `'emoji'`, `'coins'`, `'lightning'`, `'petals'`
|
57
70
|
- `config` (optional): Animation configuration object
|
58
71
|
|
59
72
|
#### Returns
|
@@ -70,7 +83,7 @@ interface AnimationConfig {
|
|
70
83
|
startVelocity?: number; // Initial velocity (default: 45)
|
71
84
|
decay?: number; // Velocity decay rate (default: 0.9)
|
72
85
|
lifetime?: number; // Particle lifetime (default: 100)
|
73
|
-
colors?: string[]; // Array of colors
|
86
|
+
colors?: string[]; // Array of colors (or emojis for 'emoji' type)
|
74
87
|
elementSize?: number; // Size of particles in pixels
|
75
88
|
duration?: number; // Total animation duration
|
76
89
|
physics?: {
|
@@ -144,6 +157,131 @@ const { reward } = useReward('buttonId', 'bubbles', {
|
|
144
157
|
});
|
145
158
|
```
|
146
159
|
|
160
|
+
### Snow ❄️
|
161
|
+
Peaceful falling snowflakes for winter themes.
|
162
|
+
|
163
|
+
```tsx
|
164
|
+
const { reward } = useReward('buttonId', 'snow', {
|
165
|
+
particleCount: 50,
|
166
|
+
physics: { gravity: 0.05, wind: 0.1 }
|
167
|
+
});
|
168
|
+
```
|
169
|
+
|
170
|
+
### Emoji 🎉
|
171
|
+
Customizable emoji explosions for any mood.
|
172
|
+
|
173
|
+
```tsx
|
174
|
+
import { useReward, emojiPresets } from 'partycles';
|
175
|
+
|
176
|
+
// Use built-in presets
|
177
|
+
const { reward } = useReward('buttonId', 'emoji', {
|
178
|
+
colors: emojiPresets.celebration // 🎉🎊🥳🎈🎁🍾🥂🎆
|
179
|
+
});
|
180
|
+
|
181
|
+
// Or custom emojis
|
182
|
+
const { reward } = useReward('buttonId', 'emoji', {
|
183
|
+
particleCount: 30,
|
184
|
+
colors: ['🎉', '🎊', '🎈', '🎁', '✨']
|
185
|
+
});
|
186
|
+
```
|
187
|
+
|
188
|
+
**Available emoji presets:**
|
189
|
+
- `emojiPresets.celebration` - Party emojis
|
190
|
+
- `emojiPresets.love` - Heart emojis
|
191
|
+
- `emojiPresets.happy` - Happy face emojis
|
192
|
+
- `emojiPresets.nature` - Nature emojis
|
193
|
+
- `emojiPresets.food` - Food emojis
|
194
|
+
|
195
|
+
### Coins 💰
|
196
|
+
Falling coins for rewards and achievements.
|
197
|
+
|
198
|
+
```tsx
|
199
|
+
const { reward } = useReward('buttonId', 'coins', {
|
200
|
+
particleCount: 25,
|
201
|
+
physics: { gravity: 0.5 }
|
202
|
+
});
|
203
|
+
```
|
204
|
+
|
205
|
+
### Lightning ⚡
|
206
|
+
Electric energy bursts for powerful actions.
|
207
|
+
|
208
|
+
```tsx
|
209
|
+
const { reward } = useReward('buttonId', 'lightning', {
|
210
|
+
particleCount: 20,
|
211
|
+
spread: 360
|
212
|
+
});
|
213
|
+
```
|
214
|
+
|
215
|
+
### Petals 🌸
|
216
|
+
Delicate flower petals floating in the wind.
|
217
|
+
|
218
|
+
```tsx
|
219
|
+
const { reward } = useReward('buttonId', 'petals', {
|
220
|
+
particleCount: 40,
|
221
|
+
physics: { gravity: 0.08, wind: 0.15 }
|
222
|
+
});
|
223
|
+
```
|
224
|
+
|
225
|
+
### Aurora 🌌
|
226
|
+
Northern lights effect with flowing ribbons.
|
227
|
+
|
228
|
+
```tsx
|
229
|
+
const { reward } = useReward('buttonId', 'aurora', {
|
230
|
+
particleCount: 15,
|
231
|
+
elementSize: 100
|
232
|
+
});
|
233
|
+
```
|
234
|
+
|
235
|
+
### Fireflies ✨
|
236
|
+
Glowing fireflies with organic movement.
|
237
|
+
|
238
|
+
```tsx
|
239
|
+
const { reward } = useReward('buttonId', 'fireflies', {
|
240
|
+
particleCount: 20,
|
241
|
+
lifetime: 300
|
242
|
+
});
|
243
|
+
```
|
244
|
+
|
245
|
+
### Paint 🎨
|
246
|
+
Paint splatter effect for creative actions.
|
247
|
+
|
248
|
+
```tsx
|
249
|
+
const { reward } = useReward('buttonId', 'paint', {
|
250
|
+
particleCount: 25,
|
251
|
+
startVelocity: 35
|
252
|
+
});
|
253
|
+
```
|
254
|
+
|
255
|
+
### Music 🎵
|
256
|
+
Musical notes floating upward.
|
257
|
+
|
258
|
+
```tsx
|
259
|
+
const { reward } = useReward('buttonId', 'music', {
|
260
|
+
particleCount: 20,
|
261
|
+
physics: { gravity: -0.08 }
|
262
|
+
});
|
263
|
+
```
|
264
|
+
|
265
|
+
### Balloons 🎈
|
266
|
+
Floating balloons with realistic physics.
|
267
|
+
|
268
|
+
```tsx
|
269
|
+
const { reward } = useReward('buttonId', 'balloons', {
|
270
|
+
particleCount: 15,
|
271
|
+
lifetime: 400
|
272
|
+
});
|
273
|
+
```
|
274
|
+
|
275
|
+
### Galaxy 🌟
|
276
|
+
Spiral star formation with twinkling effects.
|
277
|
+
|
278
|
+
```tsx
|
279
|
+
const { reward } = useReward('buttonId', 'galaxy', {
|
280
|
+
particleCount: 60,
|
281
|
+
spread: 200
|
282
|
+
});
|
283
|
+
```
|
284
|
+
|
147
285
|
## 💡 Examples
|
148
286
|
|
149
287
|
### Form Submission Success
|
@@ -286,7 +424,7 @@ We welcome contributions! Please see our [Contributing Guide](CONTRIBUTING.md) f
|
|
286
424
|
|
287
425
|
## 📄 License
|
288
426
|
|
289
|
-
MIT ©
|
427
|
+
MIT © Jonathan Leane
|
290
428
|
|
291
429
|
---
|
292
430
|
|
@@ -0,0 +1,8 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
import { AnimationConfig, Particle } from '../types';
|
3
|
+
export declare const createAuroraParticles: (origin: {
|
4
|
+
x: number;
|
5
|
+
y: number;
|
6
|
+
}, config: AnimationConfig) => Particle[];
|
7
|
+
export declare const renderAuroraParticle: (particle: Particle) => React.ReactNode;
|
8
|
+
//# sourceMappingURL=aurora.d.ts.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"aurora.d.ts","sourceRoot":"","sources":["../../src/animations/aurora.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,eAAe,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAKrD,eAAO,MAAM,qBAAqB,GAChC,QAAQ;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,EAChC,QAAQ,eAAe,KACtB,QAAQ,EA8BV,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAAI,UAAU,QAAQ,KAAG,KAAK,CAAC,SA8C/D,CAAC"}
|
@@ -0,0 +1,8 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
import { AnimationConfig, Particle } from '../types';
|
3
|
+
export declare const createBalloonParticles: (origin: {
|
4
|
+
x: number;
|
5
|
+
y: number;
|
6
|
+
}, config: AnimationConfig) => Particle[];
|
7
|
+
export declare const renderBalloonParticle: (particle: Particle) => React.ReactNode;
|
8
|
+
//# sourceMappingURL=balloons.d.ts.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"balloons.d.ts","sourceRoot":"","sources":["../../src/animations/balloons.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,eAAe,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAKrD,eAAO,MAAM,sBAAsB,GACjC,QAAQ;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,EAChC,QAAQ,eAAe,KACtB,QAAQ,EA8BV,CAAC;AAEF,eAAO,MAAM,qBAAqB,GAAI,UAAU,QAAQ,KAAG,KAAK,CAAC,SAyFhE,CAAC"}
|
@@ -0,0 +1,8 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
import { AnimationConfig, Particle } from '../types';
|
3
|
+
export declare const createCoinParticles: (origin: {
|
4
|
+
x: number;
|
5
|
+
y: number;
|
6
|
+
}, config: AnimationConfig) => Particle[];
|
7
|
+
export declare const renderCoinParticle: (particle: Particle) => React.ReactNode;
|
8
|
+
//# sourceMappingURL=coins.d.ts.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"coins.d.ts","sourceRoot":"","sources":["../../src/animations/coins.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,eAAe,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAKrD,eAAO,MAAM,mBAAmB,GAC9B,QAAQ;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,EAChC,QAAQ,eAAe,KACtB,QAAQ,EA8BV,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAAI,UAAU,QAAQ,KAAG,KAAK,CAAC,SA0C7D,CAAC"}
|
@@ -0,0 +1,19 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
import { AnimationConfig, Particle } from '../types';
|
3
|
+
export interface EmojiAnimationConfig extends AnimationConfig {
|
4
|
+
emojis?: string[];
|
5
|
+
}
|
6
|
+
export declare const createEmojiParticles: (origin: {
|
7
|
+
x: number;
|
8
|
+
y: number;
|
9
|
+
}, config: EmojiAnimationConfig) => Particle[];
|
10
|
+
export declare const renderEmojiParticle: (particle: Particle) => React.ReactNode;
|
11
|
+
export declare const emojiPresets: {
|
12
|
+
celebration: string[];
|
13
|
+
love: string[];
|
14
|
+
happy: string[];
|
15
|
+
nature: string[];
|
16
|
+
food: string[];
|
17
|
+
default: string[];
|
18
|
+
};
|
19
|
+
//# sourceMappingURL=emoji.d.ts.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"emoji.d.ts","sourceRoot":"","sources":["../../src/animations/emoji.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,eAAe,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAWrD,MAAM,WAAW,oBAAqB,SAAQ,eAAe;IAC3D,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;CACnB;AAED,eAAO,MAAM,oBAAoB,GAC/B,QAAQ;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,EAChC,QAAQ,oBAAoB,KAC3B,QAAQ,EA+BV,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAAI,UAAU,QAAQ,KAAG,KAAK,CAAC,SAc9D,CAAC;AAGF,eAAO,MAAM,YAAY;;;;;;;CAOxB,CAAC"}
|
@@ -0,0 +1,8 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
import { AnimationConfig, Particle } from '../types';
|
3
|
+
export declare const createFireflyParticles: (origin: {
|
4
|
+
x: number;
|
5
|
+
y: number;
|
6
|
+
}, config: AnimationConfig) => Particle[];
|
7
|
+
export declare const renderFireflyParticle: (particle: Particle) => React.ReactNode;
|
8
|
+
//# sourceMappingURL=fireflies.d.ts.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"fireflies.d.ts","sourceRoot":"","sources":["../../src/animations/fireflies.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,eAAe,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAKrD,eAAO,MAAM,sBAAsB,GACjC,QAAQ;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,EAChC,QAAQ,eAAe,KACtB,QAAQ,EA8BV,CAAC;AAEF,eAAO,MAAM,qBAAqB,GAAI,UAAU,QAAQ,KAAG,KAAK,CAAC,SA0DhE,CAAC"}
|
@@ -0,0 +1,8 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
import { AnimationConfig, Particle } from '../types';
|
3
|
+
export declare const createGalaxyParticles: (origin: {
|
4
|
+
x: number;
|
5
|
+
y: number;
|
6
|
+
}, config: AnimationConfig) => Particle[];
|
7
|
+
export declare const renderGalaxyParticle: (particle: Particle) => React.ReactNode;
|
8
|
+
//# sourceMappingURL=galaxy.d.ts.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"galaxy.d.ts","sourceRoot":"","sources":["../../src/animations/galaxy.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,eAAe,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAKrD,eAAO,MAAM,qBAAqB,GAChC,QAAQ;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,EAChC,QAAQ,eAAe,KACtB,QAAQ,EA+CV,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAAI,UAAU,QAAQ,KAAG,KAAK,CAAC,SAsF/D,CAAC"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/animations/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,eAAe,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/animations/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,eAAe,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAmBpE,MAAM,MAAM,eAAe,GAAG,CAAC,MAAM,EAAE;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,EAAE,MAAM,EAAE,eAAe,KAAK,QAAQ,EAAE,CAAC;AACxG,MAAM,MAAM,gBAAgB,GAAG,CAAC,QAAQ,EAAE,QAAQ,KAAK,KAAK,CAAC,SAAS,CAAC;AAEvE,UAAU,gBAAgB;IACxB,eAAe,EAAE,eAAe,CAAC;IACjC,cAAc,EAAE,gBAAgB,CAAC;CAClC;AAED,eAAO,MAAM,UAAU,EAAE,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAqE9D,CAAC"}
|
@@ -0,0 +1,8 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
import { AnimationConfig, Particle } from '../types';
|
3
|
+
export declare const createLightningParticles: (origin: {
|
4
|
+
x: number;
|
5
|
+
y: number;
|
6
|
+
}, config: AnimationConfig) => Particle[];
|
7
|
+
export declare const renderLightningParticle: (particle: Particle) => React.ReactNode;
|
8
|
+
//# sourceMappingURL=lightning.d.ts.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"lightning.d.ts","sourceRoot":"","sources":["../../src/animations/lightning.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,eAAe,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAKrD,eAAO,MAAM,wBAAwB,GACnC,QAAQ;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,EAChC,QAAQ,eAAe,KACtB,QAAQ,EA8BV,CAAC;AAEF,eAAO,MAAM,uBAAuB,GAAI,UAAU,QAAQ,KAAG,KAAK,CAAC,SA4ClE,CAAC"}
|
@@ -0,0 +1,8 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
import { AnimationConfig, Particle } from '../types';
|
3
|
+
export declare const createMusicParticles: (origin: {
|
4
|
+
x: number;
|
5
|
+
y: number;
|
6
|
+
}, config: AnimationConfig) => Particle[];
|
7
|
+
export declare const renderMusicParticle: (particle: Particle) => React.ReactNode;
|
8
|
+
//# sourceMappingURL=music.d.ts.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"music.d.ts","sourceRoot":"","sources":["../../src/animations/music.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,eAAe,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAKrD,eAAO,MAAM,oBAAoB,GAC/B,QAAQ;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,EAChC,QAAQ,eAAe,KACtB,QAAQ,EA+BV,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAAI,UAAU,QAAQ,KAAG,KAAK,CAAC,SAgE9D,CAAC"}
|
@@ -0,0 +1,8 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
import { AnimationConfig, Particle } from '../types';
|
3
|
+
export declare const createPaintParticles: (origin: {
|
4
|
+
x: number;
|
5
|
+
y: number;
|
6
|
+
}, config: AnimationConfig) => Particle[];
|
7
|
+
export declare const renderPaintParticle: (particle: Particle) => React.ReactNode;
|
8
|
+
//# sourceMappingURL=paint.d.ts.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"paint.d.ts","sourceRoot":"","sources":["../../src/animations/paint.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,eAAe,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAKrD,eAAO,MAAM,oBAAoB,GAC/B,QAAQ;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,EAChC,QAAQ,eAAe,KACtB,QAAQ,EAiCV,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAAI,UAAU,QAAQ,KAAG,KAAK,CAAC,SA+E9D,CAAC"}
|
@@ -0,0 +1,8 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
import { AnimationConfig, Particle } from '../types';
|
3
|
+
export declare const createPetalParticles: (origin: {
|
4
|
+
x: number;
|
5
|
+
y: number;
|
6
|
+
}, config: AnimationConfig) => Particle[];
|
7
|
+
export declare const renderPetalParticle: (particle: Particle) => React.ReactNode;
|
8
|
+
//# sourceMappingURL=petals.d.ts.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"petals.d.ts","sourceRoot":"","sources":["../../src/animations/petals.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,eAAe,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAKrD,eAAO,MAAM,oBAAoB,GAC/B,QAAQ;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,EAChC,QAAQ,eAAe,KACtB,QAAQ,EA8BV,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAAI,UAAU,QAAQ,KAAG,KAAK,CAAC,SA+C9D,CAAC"}
|
@@ -0,0 +1,8 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
import { AnimationConfig, Particle } from '../types';
|
3
|
+
export declare const createSnowParticles: (origin: {
|
4
|
+
x: number;
|
5
|
+
y: number;
|
6
|
+
}, config: AnimationConfig) => Particle[];
|
7
|
+
export declare const renderSnowParticle: (particle: Particle) => React.ReactNode;
|
8
|
+
//# sourceMappingURL=snow.d.ts.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"snow.d.ts","sourceRoot":"","sources":["../../src/animations/snow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,eAAe,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAKrD,eAAO,MAAM,mBAAmB,GAC9B,QAAQ;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,EAChC,QAAQ,eAAe,KACtB,QAAQ,EA+BV,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAAI,UAAU,QAAQ,KAAG,KAAK,CAAC,SAiB7D,CAAC"}
|
@@ -0,0 +1,8 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
import { AnimationConfig, Particle } from '../types';
|
3
|
+
export declare const createAuroraParticles: (origin: {
|
4
|
+
x: number;
|
5
|
+
y: number;
|
6
|
+
}, config: AnimationConfig) => Particle[];
|
7
|
+
export declare const renderAuroraParticle: (particle: Particle) => React.ReactNode;
|
8
|
+
//# sourceMappingURL=aurora.d.ts.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"aurora.d.ts","sourceRoot":"","sources":["../../src/animations/aurora.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,eAAe,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAKrD,eAAO,MAAM,qBAAqB,GAChC,QAAQ;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,EAChC,QAAQ,eAAe,KACtB,QAAQ,EA8BV,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAAI,UAAU,QAAQ,KAAG,KAAK,CAAC,SA8C/D,CAAC"}
|
@@ -0,0 +1,8 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
import { AnimationConfig, Particle } from '../types';
|
3
|
+
export declare const createBalloonParticles: (origin: {
|
4
|
+
x: number;
|
5
|
+
y: number;
|
6
|
+
}, config: AnimationConfig) => Particle[];
|
7
|
+
export declare const renderBalloonParticle: (particle: Particle) => React.ReactNode;
|
8
|
+
//# sourceMappingURL=balloons.d.ts.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"balloons.d.ts","sourceRoot":"","sources":["../../src/animations/balloons.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,eAAe,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAKrD,eAAO,MAAM,sBAAsB,GACjC,QAAQ;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,EAChC,QAAQ,eAAe,KACtB,QAAQ,EA8BV,CAAC;AAEF,eAAO,MAAM,qBAAqB,GAAI,UAAU,QAAQ,KAAG,KAAK,CAAC,SAyFhE,CAAC"}
|
@@ -9,15 +9,15 @@ const generateId = () => {
|
|
9
9
|
|
10
10
|
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)'];
|
11
11
|
const createBubbleParticles = (origin, config) => {
|
12
|
-
const { particleCount = 30, spread = 80, startVelocity =
|
12
|
+
const { particleCount = 30, spread = 80, startVelocity = 8, colors = bubbleColors, elementSize = 40 } = config;
|
13
13
|
const particles = [];
|
14
14
|
for (let i = 0; i < particleCount; i++) {
|
15
15
|
particles.push({
|
16
16
|
id: generateId(),
|
17
17
|
x: origin.x + randomInRange(-spread, spread),
|
18
18
|
y: origin.y,
|
19
|
-
vx: randomInRange(-
|
20
|
-
vy: -randomInRange(startVelocity * 0.
|
19
|
+
vx: randomInRange(-2, 2),
|
20
|
+
vy: -randomInRange(startVelocity * 0.3, startVelocity * 0.6),
|
21
21
|
life: config.lifetime || 160,
|
22
22
|
opacity: 0.7,
|
23
23
|
size: randomInRange(elementSize * 0.4, elementSize * 1.2),
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"bubbles.esm.js","sources":["../../src/utils.ts","../../src/animations/bubbles.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, 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 =
|
1
|
+
{"version":3,"file":"bubbles.esm.js","sources":["../../src/utils.ts","../../src/animations/bubbles.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, 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 = 8,\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(-2, 2),\n vy: -randomInRange(startVelocity * 0.3, startVelocity * 0.6),\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};"],"names":[],"mappings":";;AAEO,MAAM,aAAa,GAAG,CAAC,GAAW,EAAE,GAAW,KAAY;AAChE,IAAA,OAAO,IAAI,CAAC,MAAM,EAAE,IAAI,GAAG,GAAG,GAAG,CAAC,GAAG,GAAG;AAC1C,CAAC;AAMM,MAAM,UAAU,GAAG,MAAa;AACrC,IAAA,OAAO,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC;AACnD,CAAC;;ACRD,MAAM,YAAY,GAAG,CAAC,yBAAyB,EAAE,yBAAyB,EAAE,yBAAyB,EAAE,0BAA0B,CAAC;MAErH,qBAAqB,GAAG,CACnC,MAAgC,EAChC,MAAuB,KACT;IACd,MAAM,EACJ,aAAa,GAAG,EAAE,EAClB,MAAM,GAAG,EAAE,EACX,aAAa,GAAG,CAAC,EACjB,MAAM,GAAG,YAAY,EACrB,WAAW,GAAG,EAAE,EACjB,GAAG,MAAM;IAEV,MAAM,SAAS,GAAe,EAAE;AAEhC,IAAA,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,aAAa,EAAE,CAAC,EAAE,EAAE;QACtC,SAAS,CAAC,IAAI,CAAC;YACb,EAAE,EAAE,UAAU,EAAE;YAChB,CAAC,EAAE,MAAM,CAAC,CAAC,GAAG,aAAa,CAAC,CAAC,MAAM,EAAE,MAAM,CAAC;YAC5C,CAAC,EAAE,MAAM,CAAC,CAAC;AACX,YAAA,EAAE,EAAE,aAAa,CAAC,EAAE,EAAE,CAAC,CAAC;YACxB,EAAE,EAAE,CAAC,aAAa,CAAC,aAAa,GAAG,GAAG,EAAE,aAAa,GAAG,GAAG,CAAC;AAC5D,YAAA,IAAI,EAAE,MAAM,CAAC,QAAQ,IAAI,GAAG;AAC5B,YAAA,OAAO,EAAE,GAAG;YACZ,IAAI,EAAE,aAAa,CAAC,WAAW,GAAG,GAAG,EAAE,WAAW,GAAG,GAAG,CAAC;AACzD,YAAA,QAAQ,EAAE,CAAC;YACX,KAAK,EAAE,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC;AACtE,SAAA,CAAC;;AAGJ,IAAA,OAAO,SAAS;AAClB;AAEa,MAAA,oBAAoB,GAAG,CAAC,QAAkB,KAAqB;IAC1E,QACE,6BACE,GAAG,EAAE,QAAQ,CAAC,EAAE,EAChB,KAAK,EAAE;AACL,YAAA,KAAK,EAAE,CAAA,EAAG,QAAQ,CAAC,IAAI,CAAI,EAAA,CAAA;AAC3B,YAAA,MAAM,EAAE,CAAA,EAAG,QAAQ,CAAC,IAAI,CAAI,EAAA,CAAA;YAC5B,eAAe,EAAE,QAAQ,CAAC,KAAK;AAC/B,YAAA,YAAY,EAAE,KAAK;AACnB,YAAA,MAAM,EAAE,oCAAoC;AAC5C,YAAA,eAAe,EAAE,2EAA2E;AAC5F,YAAA,SAAS,EAAE;sBACG,QAAQ,CAAC,IAAI,GAAG,GAAG,CAAA;AACzB,cAAA,EAAA,QAAQ,CAAC,IAAI,GAAG,GAAG,CAAM,GAAA,EAAA,QAAQ,CAAC,KAAK;AAC9C,QAAA,CAAA;AACF,SAAA,EAAA,CACD;AAEN;;;;"}
|
@@ -11,15 +11,15 @@ const generateId = () => {
|
|
11
11
|
|
12
12
|
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)'];
|
13
13
|
const createBubbleParticles = (origin, config) => {
|
14
|
-
const { particleCount = 30, spread = 80, startVelocity =
|
14
|
+
const { particleCount = 30, spread = 80, startVelocity = 8, colors = bubbleColors, elementSize = 40 } = config;
|
15
15
|
const particles = [];
|
16
16
|
for (let i = 0; i < particleCount; i++) {
|
17
17
|
particles.push({
|
18
18
|
id: generateId(),
|
19
19
|
x: origin.x + randomInRange(-spread, spread),
|
20
20
|
y: origin.y,
|
21
|
-
vx: randomInRange(-
|
22
|
-
vy: -randomInRange(startVelocity * 0.
|
21
|
+
vx: randomInRange(-2, 2),
|
22
|
+
vy: -randomInRange(startVelocity * 0.3, startVelocity * 0.6),
|
23
23
|
life: config.lifetime || 160,
|
24
24
|
opacity: 0.7,
|
25
25
|
size: randomInRange(elementSize * 0.4, elementSize * 1.2),
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"bubbles.js","sources":["../../src/utils.ts","../../src/animations/bubbles.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, 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 =
|
1
|
+
{"version":3,"file":"bubbles.js","sources":["../../src/utils.ts","../../src/animations/bubbles.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, 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 = 8,\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(-2, 2),\n vy: -randomInRange(startVelocity * 0.3, startVelocity * 0.6),\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};"],"names":[],"mappings":";;;;AAEO,MAAM,aAAa,GAAG,CAAC,GAAW,EAAE,GAAW,KAAY;AAChE,IAAA,OAAO,IAAI,CAAC,MAAM,EAAE,IAAI,GAAG,GAAG,GAAG,CAAC,GAAG,GAAG;AAC1C,CAAC;AAMM,MAAM,UAAU,GAAG,MAAa;AACrC,IAAA,OAAO,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC;AACnD,CAAC;;ACRD,MAAM,YAAY,GAAG,CAAC,yBAAyB,EAAE,yBAAyB,EAAE,yBAAyB,EAAE,0BAA0B,CAAC;MAErH,qBAAqB,GAAG,CACnC,MAAgC,EAChC,MAAuB,KACT;IACd,MAAM,EACJ,aAAa,GAAG,EAAE,EAClB,MAAM,GAAG,EAAE,EACX,aAAa,GAAG,CAAC,EACjB,MAAM,GAAG,YAAY,EACrB,WAAW,GAAG,EAAE,EACjB,GAAG,MAAM;IAEV,MAAM,SAAS,GAAe,EAAE;AAEhC,IAAA,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,aAAa,EAAE,CAAC,EAAE,EAAE;QACtC,SAAS,CAAC,IAAI,CAAC;YACb,EAAE,EAAE,UAAU,EAAE;YAChB,CAAC,EAAE,MAAM,CAAC,CAAC,GAAG,aAAa,CAAC,CAAC,MAAM,EAAE,MAAM,CAAC;YAC5C,CAAC,EAAE,MAAM,CAAC,CAAC;AACX,YAAA,EAAE,EAAE,aAAa,CAAC,EAAE,EAAE,CAAC,CAAC;YACxB,EAAE,EAAE,CAAC,aAAa,CAAC,aAAa,GAAG,GAAG,EAAE,aAAa,GAAG,GAAG,CAAC;AAC5D,YAAA,IAAI,EAAE,MAAM,CAAC,QAAQ,IAAI,GAAG;AAC5B,YAAA,OAAO,EAAE,GAAG;YACZ,IAAI,EAAE,aAAa,CAAC,WAAW,GAAG,GAAG,EAAE,WAAW,GAAG,GAAG,CAAC;AACzD,YAAA,QAAQ,EAAE,CAAC;YACX,KAAK,EAAE,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC;AACtE,SAAA,CAAC;;AAGJ,IAAA,OAAO,SAAS;AAClB;AAEa,MAAA,oBAAoB,GAAG,CAAC,QAAkB,KAAqB;IAC1E,QACE,6BACE,GAAG,EAAE,QAAQ,CAAC,EAAE,EAChB,KAAK,EAAE;AACL,YAAA,KAAK,EAAE,CAAA,EAAG,QAAQ,CAAC,IAAI,CAAI,EAAA,CAAA;AAC3B,YAAA,MAAM,EAAE,CAAA,EAAG,QAAQ,CAAC,IAAI,CAAI,EAAA,CAAA;YAC5B,eAAe,EAAE,QAAQ,CAAC,KAAK;AAC/B,YAAA,YAAY,EAAE,KAAK;AACnB,YAAA,MAAM,EAAE,oCAAoC;AAC5C,YAAA,eAAe,EAAE,2EAA2E;AAC5F,YAAA,SAAS,EAAE;sBACG,QAAQ,CAAC,IAAI,GAAG,GAAG,CAAA;AACzB,cAAA,EAAA,QAAQ,CAAC,IAAI,GAAG,GAAG,CAAM,GAAA,EAAA,QAAQ,CAAC,KAAK;AAC9C,QAAA,CAAA;AACF,SAAA,EAAA,CACD;AAEN;;;;;"}
|
@@ -0,0 +1,8 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
import { AnimationConfig, Particle } from '../types';
|
3
|
+
export declare const createCoinParticles: (origin: {
|
4
|
+
x: number;
|
5
|
+
y: number;
|
6
|
+
}, config: AnimationConfig) => Particle[];
|
7
|
+
export declare const renderCoinParticle: (particle: Particle) => React.ReactNode;
|
8
|
+
//# sourceMappingURL=coins.d.ts.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"coins.d.ts","sourceRoot":"","sources":["../../src/animations/coins.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,eAAe,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAKrD,eAAO,MAAM,mBAAmB,GAC9B,QAAQ;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,EAChC,QAAQ,eAAe,KACtB,QAAQ,EA8BV,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAAI,UAAU,QAAQ,KAAG,KAAK,CAAC,SA0C7D,CAAC"}
|
@@ -15,7 +15,7 @@ const getRandomColor = (colors) => {
|
|
15
15
|
|
16
16
|
const defaultColors = ['#f44336', '#e91e63', '#9c27b0', '#673ab7', '#3f51b5', '#2196f3', '#03a9f4', '#00bcd4', '#009688', '#4caf50', '#8bc34a', '#cddc39', '#ffeb3b', '#ffc107', '#ff9800', '#ff5722'];
|
17
17
|
const createConfettiParticles = (origin, config) => {
|
18
|
-
const { particleCount = 50, startVelocity =
|
18
|
+
const { particleCount = 50, startVelocity = 20, colors = defaultColors, elementSize = 20 } = config;
|
19
19
|
const particles = [];
|
20
20
|
for (let i = 0; i < particleCount; i++) {
|
21
21
|
const angle = randomInRange(0, 360);
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"confetti.esm.js","sources":["../../src/utils.ts","../../src/animations/confetti.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 =
|
1
|
+
{"version":3,"file":"confetti.esm.js","sources":["../../src/utils.ts","../../src/animations/confetti.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 = 20,\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};"],"names":[],"mappings":";;AAEO,MAAM,aAAa,GAAG,CAAC,GAAW,EAAE,GAAW,KAAY;AAChE,IAAA,OAAO,IAAI,CAAC,MAAM,EAAE,IAAI,GAAG,GAAG,GAAG,CAAC,GAAG,GAAG;AAC1C,CAAC;AAEM,MAAM,gBAAgB,GAAG,CAAC,OAAe,KAAY;IAC1D,OAAO,CAAC,OAAO,GAAG,IAAI,CAAC,EAAE,IAAI,GAAG;AAClC,CAAC;AAEM,MAAM,UAAU,GAAG,MAAa;AACrC,IAAA,OAAO,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC;AACnD,CAAC;AAEM,MAAM,cAAc,GAAG,CAAC,MAAgB,KAAY;IACzD,OAAO,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC;AACvE,CAAC;;ACZD,MAAM,aAAa,GAAG,CAAC,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,CAAC;MAEzL,uBAAuB,GAAG,CACrC,MAAgC,EAChC,MAAuB,KACT;AACd,IAAA,MAAM,EACJ,aAAa,GAAG,EAAE,EAClB,aAAa,GAAG,EAAE,EAClB,MAAM,GAAG,aAAa,EACtB,WAAW,GAAG,EAAE,EACjB,GAAG,MAAM;IAEV,MAAM,SAAS,GAAe,EAAE;AAEhC,IAAA,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,aAAa,EAAE,CAAC,EAAE,EAAE;QACtC,MAAM,KAAK,GAAG,aAAa,CAAC,CAAC,EAAE,GAAG,CAAC;QACnC,MAAM,QAAQ,GAAG,aAAa,CAAC,aAAa,GAAG,GAAG,EAAE,aAAa,CAAC;AAClE,QAAA,MAAM,KAAK,GAAG,cAAc,CAAC,MAAM,CAAC;QAEpC,SAAS,CAAC,IAAI,CAAC;YACb,EAAE,EAAE,UAAU,EAAE;YAChB,CAAC,EAAE,MAAM,CAAC,CAAC;YACX,CAAC,EAAE,MAAM,CAAC,CAAC;YACX,EAAE,EAAE,IAAI,CAAC,GAAG,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC,GAAG,QAAQ;AAChD,YAAA,EAAE,EAAE,IAAI,CAAC,GAAG,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC,GAAG,QAAQ,GAAG,EAAE;AACrD,YAAA,IAAI,EAAE,MAAM,CAAC,QAAQ,IAAI,GAAG;AAC5B,YAAA,OAAO,EAAE,CAAC;YACV,IAAI,EAAE,aAAa,CAAC,WAAW,GAAG,GAAG,EAAE,WAAW,GAAG,GAAG,CAAC;AACzD,YAAA,QAAQ,EAAE,aAAa,CAAC,CAAC,EAAE,GAAG,CAAC;YAC/B,KAAK;AACN,SAAA,CAAC;;AAGJ,IAAA,OAAO,SAAS;AAClB;AAEa,MAAA,sBAAsB,GAAG,CAAC,QAAkB,KAAqB;IAC5E,QACE,6BACE,GAAG,EAAE,QAAQ,CAAC,EAAE,EAChB,KAAK,EAAE;AACL,YAAA,KAAK,EAAE,CAAA,EAAG,QAAQ,CAAC,IAAI,CAAI,EAAA,CAAA;AAC3B,YAAA,MAAM,EAAE,CAAG,EAAA,QAAQ,CAAC,IAAI,GAAG,GAAG,CAAI,EAAA,CAAA;YAClC,eAAe,EAAE,QAAQ,CAAC,KAAK;AAC/B,YAAA,YAAY,EAAE,KAAK;AACnB,YAAA,SAAS,EAAE,2BAA2B;AACvC,SAAA,EAAA,CACD;AAEN;;;;"}
|
@@ -17,7 +17,7 @@ const getRandomColor = (colors) => {
|
|
17
17
|
|
18
18
|
const defaultColors = ['#f44336', '#e91e63', '#9c27b0', '#673ab7', '#3f51b5', '#2196f3', '#03a9f4', '#00bcd4', '#009688', '#4caf50', '#8bc34a', '#cddc39', '#ffeb3b', '#ffc107', '#ff9800', '#ff5722'];
|
19
19
|
const createConfettiParticles = (origin, config) => {
|
20
|
-
const { particleCount = 50, startVelocity =
|
20
|
+
const { particleCount = 50, startVelocity = 20, colors = defaultColors, elementSize = 20 } = config;
|
21
21
|
const particles = [];
|
22
22
|
for (let i = 0; i < particleCount; i++) {
|
23
23
|
const angle = randomInRange(0, 360);
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"confetti.js","sources":["../../src/utils.ts","../../src/animations/confetti.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 =
|
1
|
+
{"version":3,"file":"confetti.js","sources":["../../src/utils.ts","../../src/animations/confetti.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 = 20,\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};"],"names":[],"mappings":";;;;AAEO,MAAM,aAAa,GAAG,CAAC,GAAW,EAAE,GAAW,KAAY;AAChE,IAAA,OAAO,IAAI,CAAC,MAAM,EAAE,IAAI,GAAG,GAAG,GAAG,CAAC,GAAG,GAAG;AAC1C,CAAC;AAEM,MAAM,gBAAgB,GAAG,CAAC,OAAe,KAAY;IAC1D,OAAO,CAAC,OAAO,GAAG,IAAI,CAAC,EAAE,IAAI,GAAG;AAClC,CAAC;AAEM,MAAM,UAAU,GAAG,MAAa;AACrC,IAAA,OAAO,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC;AACnD,CAAC;AAEM,MAAM,cAAc,GAAG,CAAC,MAAgB,KAAY;IACzD,OAAO,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC;AACvE,CAAC;;ACZD,MAAM,aAAa,GAAG,CAAC,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,CAAC;MAEzL,uBAAuB,GAAG,CACrC,MAAgC,EAChC,MAAuB,KACT;AACd,IAAA,MAAM,EACJ,aAAa,GAAG,EAAE,EAClB,aAAa,GAAG,EAAE,EAClB,MAAM,GAAG,aAAa,EACtB,WAAW,GAAG,EAAE,EACjB,GAAG,MAAM;IAEV,MAAM,SAAS,GAAe,EAAE;AAEhC,IAAA,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,aAAa,EAAE,CAAC,EAAE,EAAE;QACtC,MAAM,KAAK,GAAG,aAAa,CAAC,CAAC,EAAE,GAAG,CAAC;QACnC,MAAM,QAAQ,GAAG,aAAa,CAAC,aAAa,GAAG,GAAG,EAAE,aAAa,CAAC;AAClE,QAAA,MAAM,KAAK,GAAG,cAAc,CAAC,MAAM,CAAC;QAEpC,SAAS,CAAC,IAAI,CAAC;YACb,EAAE,EAAE,UAAU,EAAE;YAChB,CAAC,EAAE,MAAM,CAAC,CAAC;YACX,CAAC,EAAE,MAAM,CAAC,CAAC;YACX,EAAE,EAAE,IAAI,CAAC,GAAG,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC,GAAG,QAAQ;AAChD,YAAA,EAAE,EAAE,IAAI,CAAC,GAAG,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC,GAAG,QAAQ,GAAG,EAAE;AACrD,YAAA,IAAI,EAAE,MAAM,CAAC,QAAQ,IAAI,GAAG;AAC5B,YAAA,OAAO,EAAE,CAAC;YACV,IAAI,EAAE,aAAa,CAAC,WAAW,GAAG,GAAG,EAAE,WAAW,GAAG,GAAG,CAAC;AACzD,YAAA,QAAQ,EAAE,aAAa,CAAC,CAAC,EAAE,GAAG,CAAC;YAC/B,KAAK;AACN,SAAA,CAAC;;AAGJ,IAAA,OAAO,SAAS;AAClB;AAEa,MAAA,sBAAsB,GAAG,CAAC,QAAkB,KAAqB;IAC5E,QACE,6BACE,GAAG,EAAE,QAAQ,CAAC,EAAE,EAChB,KAAK,EAAE;AACL,YAAA,KAAK,EAAE,CAAA,EAAG,QAAQ,CAAC,IAAI,CAAI,EAAA,CAAA;AAC3B,YAAA,MAAM,EAAE,CAAG,EAAA,QAAQ,CAAC,IAAI,GAAG,GAAG,CAAI,EAAA,CAAA;YAClC,eAAe,EAAE,QAAQ,CAAC,KAAK;AAC/B,YAAA,YAAY,EAAE,KAAK;AACnB,YAAA,SAAS,EAAE,2BAA2B;AACvC,SAAA,EAAA,CACD;AAEN;;;;;"}
|
@@ -0,0 +1,19 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
import { AnimationConfig, Particle } from '../types';
|
3
|
+
export interface EmojiAnimationConfig extends AnimationConfig {
|
4
|
+
emojis?: string[];
|
5
|
+
}
|
6
|
+
export declare const createEmojiParticles: (origin: {
|
7
|
+
x: number;
|
8
|
+
y: number;
|
9
|
+
}, config: EmojiAnimationConfig) => Particle[];
|
10
|
+
export declare const renderEmojiParticle: (particle: Particle) => React.ReactNode;
|
11
|
+
export declare const emojiPresets: {
|
12
|
+
celebration: string[];
|
13
|
+
love: string[];
|
14
|
+
happy: string[];
|
15
|
+
nature: string[];
|
16
|
+
food: string[];
|
17
|
+
default: string[];
|
18
|
+
};
|
19
|
+
//# sourceMappingURL=emoji.d.ts.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"emoji.d.ts","sourceRoot":"","sources":["../../src/animations/emoji.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,eAAe,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAWrD,MAAM,WAAW,oBAAqB,SAAQ,eAAe;IAC3D,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;CACnB;AAED,eAAO,MAAM,oBAAoB,GAC/B,QAAQ;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,EAChC,QAAQ,oBAAoB,KAC3B,QAAQ,EA+BV,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAAI,UAAU,QAAQ,KAAG,KAAK,CAAC,SAc9D,CAAC;AAGF,eAAO,MAAM,YAAY;;;;;;;CAOxB,CAAC"}
|