partycles 0.1.0 → 0.2.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 +83 -5
- 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/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/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/bubbles.esm.js +1 -1
- package/dist/animations/bubbles.esm.js.map +1 -1
- package/dist/animations/bubbles.js +1 -1
- 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/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/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/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 +281 -8
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +281 -7
- 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://partycles-demo.vercel.app)
|
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
|
+
- 🎨 **11 Beautiful Animations** - Confetti, sparkles, hearts, stars, fireworks, bubbles, snow, emoji, coins, lightning, and petals
|
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,71 @@ 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
|
+
|
147
225
|
## 💡 Examples
|
148
226
|
|
149
227
|
### Form Submission Success
|
@@ -286,7 +364,7 @@ We welcome contributions! Please see our [Contributing Guide](CONTRIBUTING.md) f
|
|
286
364
|
|
287
365
|
## 📄 License
|
288
366
|
|
289
|
-
MIT ©
|
367
|
+
MIT © Jonathan Leane
|
290
368
|
|
291
369
|
---
|
292
370
|
|
@@ -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"}
|
@@ -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;AAapE,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,CA6C9D,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 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"}
|
@@ -9,7 +9,7 @@ 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({
|
@@ -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(-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};"],"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,7 +11,7 @@ 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({
|
@@ -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(-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};"],"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"}
|
@@ -0,0 +1,58 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
|
3
|
+
const randomInRange = (min, max) => {
|
4
|
+
return Math.random() * (max - min) + min;
|
5
|
+
};
|
6
|
+
const generateId = () => {
|
7
|
+
return Math.random().toString(36).substring(2, 9);
|
8
|
+
};
|
9
|
+
|
10
|
+
// Default emoji sets for different moods
|
11
|
+
const defaultEmojis = ['🎉', '🎊', '🎈', '🎁', '✨', '🌟', '💫', '🎯'];
|
12
|
+
const celebrationEmojis = ['🎉', '🎊', '🥳', '🎈', '🎁', '🍾', '🥂', '🎆'];
|
13
|
+
const loveEmojis = ['❤️', '💕', '💖', '💝', '💗', '💓', '💞', '💘'];
|
14
|
+
const happyEmojis = ['😊', '😄', '🥰', '😍', '🤗', '😘', '😁', '🤩'];
|
15
|
+
const natureEmojis = ['🌸', '🌺', '🌻', '🌹', '🌷', '🌼', '🍀', '🌿'];
|
16
|
+
const foodEmojis = ['🍕', '🍔', '🍟', '🌮', '🍿', '🍩', '🍪', '🧁'];
|
17
|
+
const createEmojiParticles = (origin, config) => {
|
18
|
+
const { particleCount = 30, spread = 100, startVelocity = 15, elementSize = 35, emojis = defaultEmojis } = config;
|
19
|
+
const particles = [];
|
20
|
+
for (let i = 0; i < particleCount; i++) {
|
21
|
+
const angle = randomInRange(-45, -135);
|
22
|
+
const velocity = randomInRange(startVelocity * 0.5, startVelocity * 1.2);
|
23
|
+
particles.push({
|
24
|
+
id: generateId(),
|
25
|
+
x: origin.x + randomInRange(-spread, spread),
|
26
|
+
y: origin.y,
|
27
|
+
vx: Math.cos((angle * Math.PI) / 180) * velocity,
|
28
|
+
vy: Math.sin((angle * Math.PI) / 180) * velocity,
|
29
|
+
life: config.lifetime || 180,
|
30
|
+
opacity: 1,
|
31
|
+
size: randomInRange(elementSize * 0.7, elementSize * 1.3),
|
32
|
+
rotation: randomInRange(-45, 45),
|
33
|
+
color: '', // Not used for emojis
|
34
|
+
element: emojis[Math.floor(Math.random() * emojis.length)]
|
35
|
+
});
|
36
|
+
}
|
37
|
+
return particles;
|
38
|
+
};
|
39
|
+
const renderEmojiParticle = (particle) => {
|
40
|
+
return (React.createElement("div", { key: particle.id, style: {
|
41
|
+
fontSize: `${particle.size}px`,
|
42
|
+
lineHeight: 1,
|
43
|
+
userSelect: 'none',
|
44
|
+
filter: particle.opacity < 0.5 ? 'blur(1px)' : undefined,
|
45
|
+
} }, particle.element));
|
46
|
+
};
|
47
|
+
// Export preset emoji sets for easy use
|
48
|
+
const emojiPresets = {
|
49
|
+
celebration: celebrationEmojis,
|
50
|
+
love: loveEmojis,
|
51
|
+
happy: happyEmojis,
|
52
|
+
nature: natureEmojis,
|
53
|
+
food: foodEmojis,
|
54
|
+
default: defaultEmojis
|
55
|
+
};
|
56
|
+
|
57
|
+
export { createEmojiParticles, emojiPresets, renderEmojiParticle };
|
58
|
+
//# sourceMappingURL=emoji.esm.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"emoji.esm.js","sources":["../../src/utils.ts","../../src/animations/emoji.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\n// Default emoji sets for different moods\nconst defaultEmojis = ['🎉', '🎊', '🎈', '🎁', '✨', '🌟', '💫', '🎯'];\nconst celebrationEmojis = ['🎉', '🎊', '🥳', '🎈', '🎁', '🍾', '🥂', '🎆'];\nconst loveEmojis = ['❤️', '💕', '💖', '💝', '💗', '💓', '💞', '💘'];\nconst happyEmojis = ['😊', '😄', '🥰', '😍', '🤗', '😘', '😁', '🤩'];\nconst natureEmojis = ['🌸', '🌺', '🌻', '🌹', '🌷', '🌼', '🍀', '🌿'];\nconst foodEmojis = ['🍕', '🍔', '🍟', '🌮', '🍿', '🍩', '🍪', '🧁'];\n\nexport interface EmojiAnimationConfig extends AnimationConfig {\n emojis?: string[];\n}\n\nexport const createEmojiParticles = (\n origin: { x: number; y: number },\n config: EmojiAnimationConfig\n): Particle[] => {\n const {\n particleCount = 30,\n spread = 100,\n startVelocity = 15,\n elementSize = 35,\n emojis = defaultEmojis\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.5, startVelocity * 1.2);\n \n particles.push({\n id: generateId(),\n x: origin.x + randomInRange(-spread, spread),\n y: origin.y,\n vx: Math.cos((angle * Math.PI) / 180) * velocity,\n vy: Math.sin((angle * Math.PI) / 180) * velocity,\n life: config.lifetime || 180,\n opacity: 1,\n size: randomInRange(elementSize * 0.7, elementSize * 1.3),\n rotation: randomInRange(-45, 45),\n color: '', // Not used for emojis\n element: emojis[Math.floor(Math.random() * emojis.length)]\n });\n }\n\n return particles;\n};\n\nexport const renderEmojiParticle = (particle: Particle): React.ReactNode => {\n return (\n <div\n key={particle.id}\n style={{\n fontSize: `${particle.size}px`,\n lineHeight: 1,\n userSelect: 'none',\n filter: particle.opacity < 0.5 ? 'blur(1px)' : undefined,\n }}\n >\n {particle.element}\n </div>\n );\n};\n\n// Export preset emoji sets for easy use\nexport const emojiPresets = {\n celebration: celebrationEmojis,\n love: loveEmojis,\n happy: happyEmojis,\n nature: natureEmojis,\n food: foodEmojis,\n default: defaultEmojis\n};"],"names":[],"mappings":"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"}
|
@@ -0,0 +1,62 @@
|
|
1
|
+
'use strict';
|
2
|
+
|
3
|
+
var React = require('react');
|
4
|
+
|
5
|
+
const randomInRange = (min, max) => {
|
6
|
+
return Math.random() * (max - min) + min;
|
7
|
+
};
|
8
|
+
const generateId = () => {
|
9
|
+
return Math.random().toString(36).substring(2, 9);
|
10
|
+
};
|
11
|
+
|
12
|
+
// Default emoji sets for different moods
|
13
|
+
const defaultEmojis = ['🎉', '🎊', '🎈', '🎁', '✨', '🌟', '💫', '🎯'];
|
14
|
+
const celebrationEmojis = ['🎉', '🎊', '🥳', '🎈', '🎁', '🍾', '🥂', '🎆'];
|
15
|
+
const loveEmojis = ['❤️', '💕', '💖', '💝', '💗', '💓', '💞', '💘'];
|
16
|
+
const happyEmojis = ['😊', '😄', '🥰', '😍', '🤗', '😘', '😁', '🤩'];
|
17
|
+
const natureEmojis = ['🌸', '🌺', '🌻', '🌹', '🌷', '🌼', '🍀', '🌿'];
|
18
|
+
const foodEmojis = ['🍕', '🍔', '🍟', '🌮', '🍿', '🍩', '🍪', '🧁'];
|
19
|
+
const createEmojiParticles = (origin, config) => {
|
20
|
+
const { particleCount = 30, spread = 100, startVelocity = 15, elementSize = 35, emojis = defaultEmojis } = config;
|
21
|
+
const particles = [];
|
22
|
+
for (let i = 0; i < particleCount; i++) {
|
23
|
+
const angle = randomInRange(-45, -135);
|
24
|
+
const velocity = randomInRange(startVelocity * 0.5, startVelocity * 1.2);
|
25
|
+
particles.push({
|
26
|
+
id: generateId(),
|
27
|
+
x: origin.x + randomInRange(-spread, spread),
|
28
|
+
y: origin.y,
|
29
|
+
vx: Math.cos((angle * Math.PI) / 180) * velocity,
|
30
|
+
vy: Math.sin((angle * Math.PI) / 180) * velocity,
|
31
|
+
life: config.lifetime || 180,
|
32
|
+
opacity: 1,
|
33
|
+
size: randomInRange(elementSize * 0.7, elementSize * 1.3),
|
34
|
+
rotation: randomInRange(-45, 45),
|
35
|
+
color: '', // Not used for emojis
|
36
|
+
element: emojis[Math.floor(Math.random() * emojis.length)]
|
37
|
+
});
|
38
|
+
}
|
39
|
+
return particles;
|
40
|
+
};
|
41
|
+
const renderEmojiParticle = (particle) => {
|
42
|
+
return (React.createElement("div", { key: particle.id, style: {
|
43
|
+
fontSize: `${particle.size}px`,
|
44
|
+
lineHeight: 1,
|
45
|
+
userSelect: 'none',
|
46
|
+
filter: particle.opacity < 0.5 ? 'blur(1px)' : undefined,
|
47
|
+
} }, particle.element));
|
48
|
+
};
|
49
|
+
// Export preset emoji sets for easy use
|
50
|
+
const emojiPresets = {
|
51
|
+
celebration: celebrationEmojis,
|
52
|
+
love: loveEmojis,
|
53
|
+
happy: happyEmojis,
|
54
|
+
nature: natureEmojis,
|
55
|
+
food: foodEmojis,
|
56
|
+
default: defaultEmojis
|
57
|
+
};
|
58
|
+
|
59
|
+
exports.createEmojiParticles = createEmojiParticles;
|
60
|
+
exports.emojiPresets = emojiPresets;
|
61
|
+
exports.renderEmojiParticle = renderEmojiParticle;
|
62
|
+
//# sourceMappingURL=emoji.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"emoji.js","sources":["../../src/utils.ts","../../src/animations/emoji.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\n// Default emoji sets for different moods\nconst defaultEmojis = ['🎉', '🎊', '🎈', '🎁', '✨', '🌟', '💫', '🎯'];\nconst celebrationEmojis = ['🎉', '🎊', '🥳', '🎈', '🎁', '🍾', '🥂', '🎆'];\nconst loveEmojis = ['❤️', '💕', '💖', '💝', '💗', '💓', '💞', '💘'];\nconst happyEmojis = ['😊', '😄', '🥰', '😍', '🤗', '😘', '😁', '🤩'];\nconst natureEmojis = ['🌸', '🌺', '🌻', '🌹', '🌷', '🌼', '🍀', '🌿'];\nconst foodEmojis = ['🍕', '🍔', '🍟', '🌮', '🍿', '🍩', '🍪', '🧁'];\n\nexport interface EmojiAnimationConfig extends AnimationConfig {\n emojis?: string[];\n}\n\nexport const createEmojiParticles = (\n origin: { x: number; y: number },\n config: EmojiAnimationConfig\n): Particle[] => {\n const {\n particleCount = 30,\n spread = 100,\n startVelocity = 15,\n elementSize = 35,\n emojis = defaultEmojis\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.5, startVelocity * 1.2);\n \n particles.push({\n id: generateId(),\n x: origin.x + randomInRange(-spread, spread),\n y: origin.y,\n vx: Math.cos((angle * Math.PI) / 180) * velocity,\n vy: Math.sin((angle * Math.PI) / 180) * velocity,\n life: config.lifetime || 180,\n opacity: 1,\n size: randomInRange(elementSize * 0.7, elementSize * 1.3),\n rotation: randomInRange(-45, 45),\n color: '', // Not used for emojis\n element: emojis[Math.floor(Math.random() * emojis.length)]\n });\n }\n\n return particles;\n};\n\nexport const renderEmojiParticle = (particle: Particle): React.ReactNode => {\n return (\n <div\n key={particle.id}\n style={{\n fontSize: `${particle.size}px`,\n lineHeight: 1,\n userSelect: 'none',\n filter: particle.opacity < 0.5 ? 'blur(1px)' : undefined,\n }}\n >\n {particle.element}\n </div>\n );\n};\n\n// Export preset emoji sets for easy use\nexport const emojiPresets = {\n celebration: celebrationEmojis,\n love: loveEmojis,\n happy: happyEmojis,\n nature: natureEmojis,\n food: foodEmojis,\n default: defaultEmojis\n};"],"names":[],"mappings":"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"}
|
@@ -15,7 +15,7 @@ const getRandomColor = (colors) => {
|
|
15
15
|
|
16
16
|
const fireworkColors = ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff', '#00ffff', '#ffffff'];
|
17
17
|
const createFireworkParticles = (origin, config) => {
|
18
|
-
const { particleCount = 60, startVelocity =
|
18
|
+
const { particleCount = 60, startVelocity = 25, colors = fireworkColors, elementSize = 8 } = config;
|
19
19
|
const particles = [];
|
20
20
|
for (let i = 0; i < particleCount; i++) {
|
21
21
|
const angle = (360 / particleCount) * i + randomInRange(-5, 5);
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"fireworks.esm.js","sources":["../../src/utils.ts","../../src/animations/fireworks.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 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 =
|
1
|
+
{"version":3,"file":"fireworks.esm.js","sources":["../../src/utils.ts","../../src/animations/fireworks.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 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 = 25,\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};"],"names":[],"mappings":"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"}
|
@@ -17,7 +17,7 @@ const getRandomColor = (colors) => {
|
|
17
17
|
|
18
18
|
const fireworkColors = ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff', '#00ffff', '#ffffff'];
|
19
19
|
const createFireworkParticles = (origin, config) => {
|
20
|
-
const { particleCount = 60, startVelocity =
|
20
|
+
const { particleCount = 60, startVelocity = 25, colors = fireworkColors, elementSize = 8 } = config;
|
21
21
|
const particles = [];
|
22
22
|
for (let i = 0; i < particleCount; i++) {
|
23
23
|
const angle = (360 / particleCount) * i + randomInRange(-5, 5);
|