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
@@ -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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"}
|
@@ -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"}
|
@@ -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);
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"fireworks.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.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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"}
|
@@ -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"}
|
@@ -12,7 +12,7 @@ const getRandomColor = (colors) => {
|
|
12
12
|
|
13
13
|
const heartColors = ['#ff1744', '#e91e63', '#ff4569', '#ff6b6b', '#ee5a70'];
|
14
14
|
const createHeartParticles = (origin, config) => {
|
15
|
-
const { particleCount = 25, startVelocity =
|
15
|
+
const { particleCount = 25, startVelocity = 12, colors = heartColors, elementSize = 30 } = config;
|
16
16
|
const particles = [];
|
17
17
|
for (let i = 0; i < particleCount; i++) {
|
18
18
|
const angle = randomInRange(-45, -135);
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"hearts.esm.js","sources":["../../src/utils.ts","../../src/animations/hearts.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, getRandomColor } from '../utils';\n\nconst heartColors = ['#ff1744', '#e91e63', '#ff4569', '#ff6b6b', '#ee5a70'];\n\nexport const createHeartParticles = (\n origin: { x: number; y: number },\n config: AnimationConfig\n): Particle[] => {\n const {\n particleCount = 25,\n startVelocity =
|
1
|
+
{"version":3,"file":"hearts.esm.js","sources":["../../src/utils.ts","../../src/animations/hearts.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, getRandomColor } from '../utils';\n\nconst heartColors = ['#ff1744', '#e91e63', '#ff4569', '#ff6b6b', '#ee5a70'];\n\nexport const createHeartParticles = (\n origin: { x: number; y: number },\n config: AnimationConfig\n): Particle[] => {\n const {\n particleCount = 25,\n startVelocity = 12,\n colors = heartColors,\n elementSize = 30\n } = config;\n\n const particles: Particle[] = [];\n\n for (let i = 0; i < particleCount; i++) {\n const angle = randomInRange(-45, -135);\n const velocity = randomInRange(startVelocity * 0.7, startVelocity * 1.3);\n const horizontalDrift = randomInRange(-2, 2);\n\n particles.push({\n id: generateId(),\n x: origin.x + randomInRange(-10, 10),\n y: origin.y,\n vx: Math.cos((angle * Math.PI) / 180) * velocity + horizontalDrift,\n vy: Math.sin((angle * Math.PI) / 180) * velocity,\n life: config.lifetime || 180,\n opacity: 1,\n size: randomInRange(elementSize * 0.6, elementSize * 1.2),\n rotation: randomInRange(-20, 20),\n color: getRandomColor(colors),\n });\n }\n\n return particles;\n};\n\nexport const renderHeartParticle = (particle: Particle): React.ReactNode => {\n return (\n <svg\n key={particle.id}\n width={particle.size}\n height={particle.size}\n viewBox=\"0 0 24 24\"\n fill={particle.color}\n style={{\n filter: `drop-shadow(0 0 ${particle.size * 0.15}px ${particle.color})`,\n }}\n >\n <path d=\"M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z\" />\n </svg>\n );\n};"],"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;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,WAAW,GAAG,CAAC,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,CAAC;MAE9D,oBAAoB,GAAG,CAClC,MAAgC,EAChC,MAAuB,KACT;AACd,IAAA,MAAM,EACJ,aAAa,GAAG,EAAE,EAClB,aAAa,GAAG,EAAE,EAClB,MAAM,GAAG,WAAW,EACpB,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,GAAG,EAAE,IAAI,CAAC;AACtC,QAAA,MAAM,QAAQ,GAAG,aAAa,CAAC,aAAa,GAAG,GAAG,EAAE,aAAa,GAAG,GAAG,CAAC;QACxE,MAAM,eAAe,GAAG,aAAa,CAAC,EAAE,EAAE,CAAC,CAAC;QAE5C,SAAS,CAAC,IAAI,CAAC;YACb,EAAE,EAAE,UAAU,EAAE;YAChB,CAAC,EAAE,MAAM,CAAC,CAAC,GAAG,aAAa,CAAC,GAAG,EAAE,EAAE,CAAC;YACpC,CAAC,EAAE,MAAM,CAAC,CAAC;AACX,YAAA,EAAE,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,KAAK,GAAG,IAAI,CAAC,EAAE,IAAI,GAAG,CAAC,GAAG,QAAQ,GAAG,eAAe;AAClE,YAAA,EAAE,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,KAAK,GAAG,IAAI,CAAC,EAAE,IAAI,GAAG,CAAC,GAAG,QAAQ;AAChD,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,GAAG,EAAE,EAAE,CAAC;AAChC,YAAA,KAAK,EAAE,cAAc,CAAC,MAAM,CAAC;AAC9B,SAAA,CAAC;;AAGJ,IAAA,OAAO,SAAS;AAClB;AAEa,MAAA,mBAAmB,GAAG,CAAC,QAAkB,KAAqB;AACzE,IAAA,QACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAE,QAAQ,CAAC,EAAE,EAChB,KAAK,EAAE,QAAQ,CAAC,IAAI,EACpB,MAAM,EAAE,QAAQ,CAAC,IAAI,EACrB,OAAO,EAAC,WAAW,EACnB,IAAI,EAAE,QAAQ,CAAC,KAAK,EACpB,KAAK,EAAE;YACL,MAAM,EAAE,CAAmB,gBAAA,EAAA,QAAQ,CAAC,IAAI,GAAG,IAAI,CAAM,GAAA,EAAA,QAAQ,CAAC,KAAK,CAAG,CAAA,CAAA;AACvE,SAAA,EAAA;AAED,QAAA,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAM,CAAC,EAAC,gLAAgL,EAAG,CAAA,CACvL;AAEV;;;;"}
|
@@ -14,7 +14,7 @@ const getRandomColor = (colors) => {
|
|
14
14
|
|
15
15
|
const heartColors = ['#ff1744', '#e91e63', '#ff4569', '#ff6b6b', '#ee5a70'];
|
16
16
|
const createHeartParticles = (origin, config) => {
|
17
|
-
const { particleCount = 25, startVelocity =
|
17
|
+
const { particleCount = 25, startVelocity = 12, colors = heartColors, elementSize = 30 } = config;
|
18
18
|
const particles = [];
|
19
19
|
for (let i = 0; i < particleCount; i++) {
|
20
20
|
const angle = randomInRange(-45, -135);
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"hearts.js","sources":["../../src/utils.ts","../../src/animations/hearts.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, getRandomColor } from '../utils';\n\nconst heartColors = ['#ff1744', '#e91e63', '#ff4569', '#ff6b6b', '#ee5a70'];\n\nexport const createHeartParticles = (\n origin: { x: number; y: number },\n config: AnimationConfig\n): Particle[] => {\n const {\n particleCount = 25,\n startVelocity =
|
1
|
+
{"version":3,"file":"hearts.js","sources":["../../src/utils.ts","../../src/animations/hearts.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, getRandomColor } from '../utils';\n\nconst heartColors = ['#ff1744', '#e91e63', '#ff4569', '#ff6b6b', '#ee5a70'];\n\nexport const createHeartParticles = (\n origin: { x: number; y: number },\n config: AnimationConfig\n): Particle[] => {\n const {\n particleCount = 25,\n startVelocity = 12,\n colors = heartColors,\n elementSize = 30\n } = config;\n\n const particles: Particle[] = [];\n\n for (let i = 0; i < particleCount; i++) {\n const angle = randomInRange(-45, -135);\n const velocity = randomInRange(startVelocity * 0.7, startVelocity * 1.3);\n const horizontalDrift = randomInRange(-2, 2);\n\n particles.push({\n id: generateId(),\n x: origin.x + randomInRange(-10, 10),\n y: origin.y,\n vx: Math.cos((angle * Math.PI) / 180) * velocity + horizontalDrift,\n vy: Math.sin((angle * Math.PI) / 180) * velocity,\n life: config.lifetime || 180,\n opacity: 1,\n size: randomInRange(elementSize * 0.6, elementSize * 1.2),\n rotation: randomInRange(-20, 20),\n color: getRandomColor(colors),\n });\n }\n\n return particles;\n};\n\nexport const renderHeartParticle = (particle: Particle): React.ReactNode => {\n return (\n <svg\n key={particle.id}\n width={particle.size}\n height={particle.size}\n viewBox=\"0 0 24 24\"\n fill={particle.color}\n style={{\n filter: `drop-shadow(0 0 ${particle.size * 0.15}px ${particle.color})`,\n }}\n >\n <path d=\"M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z\" />\n </svg>\n );\n};"],"names":[],"mappings":"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"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EAAE,aAAa,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC"}
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EAAE,aAAa,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAC/E,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,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,48 @@
|
|
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
|
+
const snowColors = ['#FFFFFF', '#F0F8FF', '#F5F5F5', '#FAFAFA'];
|
11
|
+
const createSnowParticles = (origin, config) => {
|
12
|
+
const { particleCount = 50, spread = 200, startVelocity = 3, colors = snowColors, elementSize = 15 } = config;
|
13
|
+
const particles = [];
|
14
|
+
for (let i = 0; i < particleCount; i++) {
|
15
|
+
// Spread particles across the width, starting from above viewport
|
16
|
+
const x = origin.x + randomInRange(-spread * 2, spread * 2);
|
17
|
+
const y = origin.y - randomInRange(100, 300); // Start above the trigger point
|
18
|
+
particles.push({
|
19
|
+
id: generateId(),
|
20
|
+
x,
|
21
|
+
y,
|
22
|
+
vx: randomInRange(-0.5, 0.5), // Gentle horizontal drift
|
23
|
+
vy: randomInRange(startVelocity * 0.5, startVelocity * 1.2),
|
24
|
+
life: config.lifetime || 300, // Longer lifetime for snow
|
25
|
+
opacity: randomInRange(0.4, 0.9),
|
26
|
+
size: randomInRange(elementSize * 0.3, elementSize),
|
27
|
+
rotation: randomInRange(0, 360),
|
28
|
+
color: colors[Math.floor(Math.random() * colors.length)] || colors[0],
|
29
|
+
});
|
30
|
+
}
|
31
|
+
return particles;
|
32
|
+
};
|
33
|
+
const renderSnowParticle = (particle) => {
|
34
|
+
return (React.createElement("div", { key: particle.id, style: {
|
35
|
+
width: `${particle.size}px`,
|
36
|
+
height: `${particle.size}px`,
|
37
|
+
backgroundColor: particle.color,
|
38
|
+
borderRadius: '50%',
|
39
|
+
boxShadow: `
|
40
|
+
0 0 ${particle.size * 0.5}px rgba(255, 255, 255, 0.8),
|
41
|
+
inset 0 0 ${particle.size * 0.3}px rgba(255, 255, 255, 0.5)
|
42
|
+
`,
|
43
|
+
filter: 'blur(0.5px)',
|
44
|
+
} }));
|
45
|
+
};
|
46
|
+
|
47
|
+
export { createSnowParticles, renderSnowParticle };
|
48
|
+
//# sourceMappingURL=snow.esm.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"snow.esm.js","sources":["../../src/utils.ts","../../src/animations/snow.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 snowColors = ['#FFFFFF', '#F0F8FF', '#F5F5F5', '#FAFAFA'];\n\nexport const createSnowParticles = (\n origin: { x: number; y: number },\n config: AnimationConfig\n): Particle[] => {\n const {\n particleCount = 50,\n spread = 200,\n startVelocity = 3,\n colors = snowColors,\n elementSize = 15\n } = config;\n\n const particles: Particle[] = [];\n\n for (let i = 0; i < particleCount; i++) {\n // Spread particles across the width, starting from above viewport\n const x = origin.x + randomInRange(-spread * 2, spread * 2);\n const y = origin.y - randomInRange(100, 300); // Start above the trigger point\n \n particles.push({\n id: generateId(),\n x,\n y,\n vx: randomInRange(-0.5, 0.5), // Gentle horizontal drift\n vy: randomInRange(startVelocity * 0.5, startVelocity * 1.2),\n life: config.lifetime || 300, // Longer lifetime for snow\n opacity: randomInRange(0.4, 0.9),\n size: randomInRange(elementSize * 0.3, elementSize),\n rotation: randomInRange(0, 360),\n color: colors[Math.floor(Math.random() * colors.length)] || colors[0],\n });\n }\n\n return particles;\n};\n\nexport const renderSnowParticle = (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 boxShadow: `\n 0 0 ${particle.size * 0.5}px rgba(255, 255, 255, 0.8),\n inset 0 0 ${particle.size * 0.3}px rgba(255, 255, 255, 0.5)\n `,\n filter: 'blur(0.5px)',\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,UAAU,GAAG,CAAC,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,CAAC;MAElD,mBAAmB,GAAG,CACjC,MAAgC,EAChC,MAAuB,KACT;IACd,MAAM,EACJ,aAAa,GAAG,EAAE,EAClB,MAAM,GAAG,GAAG,EACZ,aAAa,GAAG,CAAC,EACjB,MAAM,GAAG,UAAU,EACnB,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;;AAEtC,QAAA,MAAM,CAAC,GAAG,MAAM,CAAC,CAAC,GAAG,aAAa,CAAC,CAAC,MAAM,GAAG,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC;AAC3D,QAAA,MAAM,CAAC,GAAG,MAAM,CAAC,CAAC,GAAG,aAAa,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC;QAE7C,SAAS,CAAC,IAAI,CAAC;YACb,EAAE,EAAE,UAAU,EAAE;YAChB,CAAC;YACD,CAAC;YACD,EAAE,EAAE,aAAa,CAAC,IAAI,EAAE,GAAG,CAAC;YAC5B,EAAE,EAAE,aAAa,CAAC,aAAa,GAAG,GAAG,EAAE,aAAa,GAAG,GAAG,CAAC;AAC3D,YAAA,IAAI,EAAE,MAAM,CAAC,QAAQ,IAAI,GAAG;AAC5B,YAAA,OAAO,EAAE,aAAa,CAAC,GAAG,EAAE,GAAG,CAAC;YAChC,IAAI,EAAE,aAAa,CAAC,WAAW,GAAG,GAAG,EAAE,WAAW,CAAC;AACnD,YAAA,QAAQ,EAAE,aAAa,CAAC,CAAC,EAAE,GAAG,CAAC;YAC/B,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,kBAAkB,GAAG,CAAC,QAAkB,KAAqB;IACxE,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,SAAS,EAAE;gBACH,QAAQ,CAAC,IAAI,GAAG,GAAG,CAAA;sBACb,QAAQ,CAAC,IAAI,GAAG,GAAG,CAAA;AAChC,QAAA,CAAA;AACD,YAAA,MAAM,EAAE,aAAa;AACtB,SAAA,EAAA,CACD;AAEN;;;;"}
|
@@ -0,0 +1,51 @@
|
|
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
|
+
const snowColors = ['#FFFFFF', '#F0F8FF', '#F5F5F5', '#FAFAFA'];
|
13
|
+
const createSnowParticles = (origin, config) => {
|
14
|
+
const { particleCount = 50, spread = 200, startVelocity = 3, colors = snowColors, elementSize = 15 } = config;
|
15
|
+
const particles = [];
|
16
|
+
for (let i = 0; i < particleCount; i++) {
|
17
|
+
// Spread particles across the width, starting from above viewport
|
18
|
+
const x = origin.x + randomInRange(-spread * 2, spread * 2);
|
19
|
+
const y = origin.y - randomInRange(100, 300); // Start above the trigger point
|
20
|
+
particles.push({
|
21
|
+
id: generateId(),
|
22
|
+
x,
|
23
|
+
y,
|
24
|
+
vx: randomInRange(-0.5, 0.5), // Gentle horizontal drift
|
25
|
+
vy: randomInRange(startVelocity * 0.5, startVelocity * 1.2),
|
26
|
+
life: config.lifetime || 300, // Longer lifetime for snow
|
27
|
+
opacity: randomInRange(0.4, 0.9),
|
28
|
+
size: randomInRange(elementSize * 0.3, elementSize),
|
29
|
+
rotation: randomInRange(0, 360),
|
30
|
+
color: colors[Math.floor(Math.random() * colors.length)] || colors[0],
|
31
|
+
});
|
32
|
+
}
|
33
|
+
return particles;
|
34
|
+
};
|
35
|
+
const renderSnowParticle = (particle) => {
|
36
|
+
return (React.createElement("div", { key: particle.id, style: {
|
37
|
+
width: `${particle.size}px`,
|
38
|
+
height: `${particle.size}px`,
|
39
|
+
backgroundColor: particle.color,
|
40
|
+
borderRadius: '50%',
|
41
|
+
boxShadow: `
|
42
|
+
0 0 ${particle.size * 0.5}px rgba(255, 255, 255, 0.8),
|
43
|
+
inset 0 0 ${particle.size * 0.3}px rgba(255, 255, 255, 0.5)
|
44
|
+
`,
|
45
|
+
filter: 'blur(0.5px)',
|
46
|
+
} }));
|
47
|
+
};
|
48
|
+
|
49
|
+
exports.createSnowParticles = createSnowParticles;
|
50
|
+
exports.renderSnowParticle = renderSnowParticle;
|
51
|
+
//# sourceMappingURL=snow.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"snow.js","sources":["../../src/utils.ts","../../src/animations/snow.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 snowColors = ['#FFFFFF', '#F0F8FF', '#F5F5F5', '#FAFAFA'];\n\nexport const createSnowParticles = (\n origin: { x: number; y: number },\n config: AnimationConfig\n): Particle[] => {\n const {\n particleCount = 50,\n spread = 200,\n startVelocity = 3,\n colors = snowColors,\n elementSize = 15\n } = config;\n\n const particles: Particle[] = [];\n\n for (let i = 0; i < particleCount; i++) {\n // Spread particles across the width, starting from above viewport\n const x = origin.x + randomInRange(-spread * 2, spread * 2);\n const y = origin.y - randomInRange(100, 300); // Start above the trigger point\n \n particles.push({\n id: generateId(),\n x,\n y,\n vx: randomInRange(-0.5, 0.5), // Gentle horizontal drift\n vy: randomInRange(startVelocity * 0.5, startVelocity * 1.2),\n life: config.lifetime || 300, // Longer lifetime for snow\n opacity: randomInRange(0.4, 0.9),\n size: randomInRange(elementSize * 0.3, elementSize),\n rotation: randomInRange(0, 360),\n color: colors[Math.floor(Math.random() * colors.length)] || colors[0],\n });\n }\n\n return particles;\n};\n\nexport const renderSnowParticle = (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 boxShadow: `\n 0 0 ${particle.size * 0.5}px rgba(255, 255, 255, 0.8),\n inset 0 0 ${particle.size * 0.3}px rgba(255, 255, 255, 0.5)\n `,\n filter: 'blur(0.5px)',\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,UAAU,GAAG,CAAC,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,CAAC;MAElD,mBAAmB,GAAG,CACjC,MAAgC,EAChC,MAAuB,KACT;IACd,MAAM,EACJ,aAAa,GAAG,EAAE,EAClB,MAAM,GAAG,GAAG,EACZ,aAAa,GAAG,CAAC,EACjB,MAAM,GAAG,UAAU,EACnB,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;;AAEtC,QAAA,MAAM,CAAC,GAAG,MAAM,CAAC,CAAC,GAAG,aAAa,CAAC,CAAC,MAAM,GAAG,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC;AAC3D,QAAA,MAAM,CAAC,GAAG,MAAM,CAAC,CAAC,GAAG,aAAa,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC;QAE7C,SAAS,CAAC,IAAI,CAAC;YACb,EAAE,EAAE,UAAU,EAAE;YAChB,CAAC;YACD,CAAC;YACD,EAAE,EAAE,aAAa,CAAC,IAAI,EAAE,GAAG,CAAC;YAC5B,EAAE,EAAE,aAAa,CAAC,aAAa,GAAG,GAAG,EAAE,aAAa,GAAG,GAAG,CAAC;AAC3D,YAAA,IAAI,EAAE,MAAM,CAAC,QAAQ,IAAI,GAAG;AAC5B,YAAA,OAAO,EAAE,aAAa,CAAC,GAAG,EAAE,GAAG,CAAC;YAChC,IAAI,EAAE,aAAa,CAAC,WAAW,GAAG,GAAG,EAAE,WAAW,CAAC;AACnD,YAAA,QAAQ,EAAE,aAAa,CAAC,CAAC,EAAE,GAAG,CAAC;YAC/B,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,kBAAkB,GAAG,CAAC,QAAkB,KAAqB;IACxE,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,SAAS,EAAE;gBACH,QAAQ,CAAC,IAAI,GAAG,GAAG,CAAA;sBACb,QAAQ,CAAC,IAAI,GAAG,GAAG,CAAA;AAChC,QAAA,CAAA;AACD,YAAA,MAAM,EAAE,aAAa;AACtB,SAAA,EAAA,CACD;AAEN;;;;;"}
|
@@ -8,7 +8,7 @@ const generateId = () => {
|
|
8
8
|
};
|
9
9
|
|
10
10
|
const createSparkleParticles = (origin, config) => {
|
11
|
-
const { particleCount = 35, spread = 120, startVelocity =
|
11
|
+
const { particleCount = 35, spread = 120, startVelocity = 15, elementSize = 25, colors = ['#FFD700', '#FFFFFF'] } = config;
|
12
12
|
const particles = [];
|
13
13
|
for (let i = 0; i < particleCount; i++) {
|
14
14
|
const velocityScale = startVelocity / 45; // Scale based on default
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"sparkles.esm.js","sources":["../../src/utils.ts","../../src/animations/sparkles.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\nexport const createSparkleParticles = (\n origin: { x: number; y: number },\n config: AnimationConfig\n): Particle[] => {\n const {\n particleCount = 35,\n spread = 120,\n startVelocity =
|
1
|
+
{"version":3,"file":"sparkles.esm.js","sources":["../../src/utils.ts","../../src/animations/sparkles.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\nexport const createSparkleParticles = (\n origin: { x: number; y: number },\n config: AnimationConfig\n): Particle[] => {\n const {\n particleCount = 35,\n spread = 120,\n startVelocity = 15,\n elementSize = 25,\n colors = ['#FFD700', '#FFFFFF']\n } = config;\n\n const particles: Particle[] = [];\n\n for (let i = 0; i < particleCount; i++) {\n const velocityScale = startVelocity / 45; // Scale based on default\n particles.push({\n id: generateId(),\n x: origin.x + randomInRange(-spread, spread),\n y: origin.y + randomInRange(-spread, spread),\n vx: randomInRange(-3, 3) * velocityScale,\n vy: randomInRange(-3, 3) * velocityScale,\n life: config.lifetime || 120,\n opacity: 0,\n size: randomInRange(elementSize * 0.4, elementSize * 1.2),\n rotation: randomInRange(0, 360),\n color: colors[Math.floor(Math.random() * colors.length)] || colors[0],\n });\n }\n\n return particles;\n};\n\nexport const renderSparkleParticle = (particle: Particle): React.ReactNode => {\n const scale = particle.opacity;\n \n return (\n <svg\n key={particle.id}\n width={particle.size}\n height={particle.size}\n viewBox=\"0 0 24 24\"\n style={{\n transform: `scale(${scale}) rotate(${particle.rotation}deg)`,\n filter: 'drop-shadow(0 0 6px rgba(255, 215, 0, 0.8))',\n }}\n >\n <path\n d=\"M12 0L14.59 8.41L23 11L14.59 13.59L12 22L9.41 13.59L1 11L9.41 8.41L12 0Z\"\n fill={particle.color}\n />\n </svg>\n );\n};"],"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;;MCRY,sBAAsB,GAAG,CACpC,MAAgC,EAChC,MAAuB,KACT;IACd,MAAM,EACJ,aAAa,GAAG,EAAE,EAClB,MAAM,GAAG,GAAG,EACZ,aAAa,GAAG,EAAE,EAClB,WAAW,GAAG,EAAE,EAChB,MAAM,GAAG,CAAC,SAAS,EAAE,SAAS,CAAC,EAChC,GAAG,MAAM;IAEV,MAAM,SAAS,GAAe,EAAE;AAEhC,IAAA,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,aAAa,EAAE,CAAC,EAAE,EAAE;AACtC,QAAA,MAAM,aAAa,GAAG,aAAa,GAAG,EAAE,CAAC;QACzC,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,GAAG,aAAa,CAAC,CAAC,MAAM,EAAE,MAAM,CAAC;YAC5C,EAAE,EAAE,aAAa,CAAC,EAAE,EAAE,CAAC,CAAC,GAAG,aAAa;YACxC,EAAE,EAAE,aAAa,CAAC,EAAE,EAAE,CAAC,CAAC,GAAG,aAAa;AACxC,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,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,qBAAqB,GAAG,CAAC,QAAkB,KAAqB;AAC3E,IAAA,MAAM,KAAK,GAAG,QAAQ,CAAC,OAAO;IAE9B,QACE,KACE,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,GAAG,EAAE,QAAQ,CAAC,EAAE,EAChB,KAAK,EAAE,QAAQ,CAAC,IAAI,EACpB,MAAM,EAAE,QAAQ,CAAC,IAAI,EACrB,OAAO,EAAC,WAAW,EACnB,KAAK,EAAE;AACL,YAAA,SAAS,EAAE,CAAS,MAAA,EAAA,KAAK,YAAY,QAAQ,CAAC,QAAQ,CAAM,IAAA,CAAA;AAC5D,YAAA,MAAM,EAAE,6CAA6C;AACtD,SAAA,EAAA;AAED,QAAA,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EACE,CAAC,EAAC,0EAA0E,EAC5E,IAAI,EAAE,QAAQ,CAAC,KAAK,EAAA,CACpB,CACE;AAEV;;;;"}
|
@@ -10,7 +10,7 @@ const generateId = () => {
|
|
10
10
|
};
|
11
11
|
|
12
12
|
const createSparkleParticles = (origin, config) => {
|
13
|
-
const { particleCount = 35, spread = 120, startVelocity =
|
13
|
+
const { particleCount = 35, spread = 120, startVelocity = 15, elementSize = 25, colors = ['#FFD700', '#FFFFFF'] } = config;
|
14
14
|
const particles = [];
|
15
15
|
for (let i = 0; i < particleCount; i++) {
|
16
16
|
const velocityScale = startVelocity / 45; // Scale based on default
|