partycles 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/README.md +295 -0
- package/dist/animations/animations/bubbles.d.ts +8 -0
- package/dist/animations/animations/bubbles.d.ts.map +1 -0
- package/dist/animations/animations/confetti.d.ts +8 -0
- package/dist/animations/animations/confetti.d.ts.map +1 -0
- package/dist/animations/animations/fireworks.d.ts +8 -0
- package/dist/animations/animations/fireworks.d.ts.map +1 -0
- package/dist/animations/animations/hearts.d.ts +8 -0
- package/dist/animations/animations/hearts.d.ts.map +1 -0
- package/dist/animations/animations/index.d.ts +13 -0
- package/dist/animations/animations/index.d.ts.map +1 -0
- package/dist/animations/animations/sparkles.d.ts +8 -0
- package/dist/animations/animations/sparkles.d.ts.map +1 -0
- package/dist/animations/animations/stars.d.ts +8 -0
- package/dist/animations/animations/stars.d.ts.map +1 -0
- package/dist/animations/bubbles.d.ts +8 -0
- package/dist/animations/bubbles.d.ts.map +1 -0
- package/dist/animations/bubbles.esm.js +46 -0
- package/dist/animations/bubbles.esm.js.map +1 -0
- package/dist/animations/bubbles.js +49 -0
- package/dist/animations/bubbles.js.map +1 -0
- package/dist/animations/confetti.d.ts +8 -0
- package/dist/animations/confetti.d.ts.map +1 -0
- package/dist/animations/confetti.esm.js +50 -0
- package/dist/animations/confetti.esm.js.map +1 -0
- package/dist/animations/confetti.js +53 -0
- package/dist/animations/confetti.js.map +1 -0
- package/dist/animations/fireworks.d.ts +8 -0
- package/dist/animations/fireworks.d.ts.map +1 -0
- package/dist/animations/fireworks.esm.js +56 -0
- package/dist/animations/fireworks.esm.js.map +1 -0
- package/dist/animations/fireworks.js +59 -0
- package/dist/animations/fireworks.js.map +1 -0
- package/dist/animations/hearts.d.ts +8 -0
- package/dist/animations/hearts.d.ts.map +1 -0
- package/dist/animations/hearts.esm.js +44 -0
- package/dist/animations/hearts.esm.js.map +1 -0
- package/dist/animations/hearts.js +47 -0
- package/dist/animations/hearts.js.map +1 -0
- package/dist/animations/index.d.ts +3 -0
- package/dist/animations/index.d.ts.map +1 -0
- package/dist/animations/sparkles.d.ts +8 -0
- package/dist/animations/sparkles.d.ts.map +1 -0
- package/dist/animations/sparkles.esm.js +40 -0
- package/dist/animations/sparkles.esm.js.map +1 -0
- package/dist/animations/sparkles.js +43 -0
- package/dist/animations/sparkles.js.map +1 -0
- package/dist/animations/stars.d.ts +8 -0
- package/dist/animations/stars.d.ts.map +1 -0
- package/dist/animations/stars.esm.js +40 -0
- package/dist/animations/stars.esm.js.map +1 -0
- package/dist/animations/stars.js +43 -0
- package/dist/animations/stars.js.map +1 -0
- package/dist/animations/types.d.ts +33 -0
- package/dist/animations/types.d.ts.map +1 -0
- package/dist/animations/useReward.d.ts +8 -0
- package/dist/animations/useReward.d.ts.map +1 -0
- package/dist/animations/utils.d.ts +7 -0
- package/dist/animations/utils.d.ts.map +1 -0
- package/dist/index.d.ts +3 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/index.esm.js +374 -0
- package/dist/index.esm.js.map +1 -0
- package/dist/index.js +376 -0
- package/dist/index.js.map +1 -0
- package/dist/types.d.ts +33 -0
- package/dist/types.d.ts.map +1 -0
- package/dist/useReward.d.ts +8 -0
- package/dist/useReward.d.ts.map +1 -0
- package/dist/utils.d.ts +7 -0
- package/dist/utils.d.ts.map +1 -0
- package/package.json +76 -0
@@ -0,0 +1,53 @@
|
|
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 degreesToRadians = (degrees) => {
|
9
|
+
return (degrees * Math.PI) / 180;
|
10
|
+
};
|
11
|
+
const generateId = () => {
|
12
|
+
return Math.random().toString(36).substring(2, 9);
|
13
|
+
};
|
14
|
+
const getRandomColor = (colors) => {
|
15
|
+
return colors[Math.floor(Math.random() * colors.length)] || colors[0];
|
16
|
+
};
|
17
|
+
|
18
|
+
const defaultColors = ['#f44336', '#e91e63', '#9c27b0', '#673ab7', '#3f51b5', '#2196f3', '#03a9f4', '#00bcd4', '#009688', '#4caf50', '#8bc34a', '#cddc39', '#ffeb3b', '#ffc107', '#ff9800', '#ff5722'];
|
19
|
+
const createConfettiParticles = (origin, config) => {
|
20
|
+
const { particleCount = 50, startVelocity = 55, colors = defaultColors, elementSize = 20 } = config;
|
21
|
+
const particles = [];
|
22
|
+
for (let i = 0; i < particleCount; i++) {
|
23
|
+
const angle = randomInRange(0, 360);
|
24
|
+
const velocity = randomInRange(startVelocity * 0.5, startVelocity);
|
25
|
+
const color = getRandomColor(colors);
|
26
|
+
particles.push({
|
27
|
+
id: generateId(),
|
28
|
+
x: origin.x,
|
29
|
+
y: origin.y,
|
30
|
+
vx: Math.cos(degreesToRadians(angle)) * velocity,
|
31
|
+
vy: Math.sin(degreesToRadians(angle)) * velocity - 30,
|
32
|
+
life: config.lifetime || 150,
|
33
|
+
opacity: 1,
|
34
|
+
size: randomInRange(elementSize * 0.7, elementSize * 1.5),
|
35
|
+
rotation: randomInRange(0, 360),
|
36
|
+
color,
|
37
|
+
});
|
38
|
+
}
|
39
|
+
return particles;
|
40
|
+
};
|
41
|
+
const renderConfettiParticle = (particle) => {
|
42
|
+
return (React.createElement("div", { key: particle.id, style: {
|
43
|
+
width: `${particle.size}px`,
|
44
|
+
height: `${particle.size * 0.6}px`,
|
45
|
+
backgroundColor: particle.color,
|
46
|
+
borderRadius: '3px',
|
47
|
+
boxShadow: '0 2px 4px rgba(0,0,0,0.2)',
|
48
|
+
} }));
|
49
|
+
};
|
50
|
+
|
51
|
+
exports.createConfettiParticles = createConfettiParticles;
|
52
|
+
exports.renderConfettiParticle = renderConfettiParticle;
|
53
|
+
//# sourceMappingURL=confetti.js.map
|
@@ -0,0 +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 = 55,\n colors = defaultColors,\n elementSize = 20\n } = config;\n\n const particles: Particle[] = [];\n\n for (let i = 0; i < particleCount; i++) {\n const angle = randomInRange(0, 360);\n const velocity = randomInRange(startVelocity * 0.5, startVelocity);\n const color = getRandomColor(colors);\n\n particles.push({\n id: generateId(),\n x: origin.x,\n y: origin.y,\n vx: Math.cos(degreesToRadians(angle)) * velocity,\n vy: Math.sin(degreesToRadians(angle)) * velocity - 30,\n life: config.lifetime || 150,\n opacity: 1,\n size: randomInRange(elementSize * 0.7, elementSize * 1.5),\n rotation: randomInRange(0, 360),\n color,\n });\n }\n\n return particles;\n};\n\nexport const renderConfettiParticle = (particle: Particle): React.ReactNode => {\n return (\n <div\n key={particle.id}\n style={{\n width: `${particle.size}px`,\n height: `${particle.size * 0.6}px`,\n backgroundColor: particle.color,\n borderRadius: '3px',\n boxShadow: '0 2px 4px rgba(0,0,0,0.2)',\n }}\n />\n );\n};"],"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,8 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
import { AnimationConfig, Particle } from '../types';
|
3
|
+
export declare const createFireworkParticles: (origin: {
|
4
|
+
x: number;
|
5
|
+
y: number;
|
6
|
+
}, config: AnimationConfig) => Particle[];
|
7
|
+
export declare const renderFireworkParticle: (particle: Particle) => React.ReactNode;
|
8
|
+
//# sourceMappingURL=fireworks.d.ts.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"fireworks.d.ts","sourceRoot":"","sources":["../../src/animations/fireworks.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,eAAe,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAKrD,eAAO,MAAM,uBAAuB,GAClC,QAAQ;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,EAChC,QAAQ,eAAe,KACtB,QAAQ,EA8BV,CAAC;AAEF,eAAO,MAAM,sBAAsB,GAAI,UAAU,QAAQ,KAAG,KAAK,CAAC,SAmBjE,CAAC"}
|
@@ -0,0 +1,56 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
|
3
|
+
const randomInRange = (min, max) => {
|
4
|
+
return Math.random() * (max - min) + min;
|
5
|
+
};
|
6
|
+
const degreesToRadians = (degrees) => {
|
7
|
+
return (degrees * Math.PI) / 180;
|
8
|
+
};
|
9
|
+
const generateId = () => {
|
10
|
+
return Math.random().toString(36).substring(2, 9);
|
11
|
+
};
|
12
|
+
const getRandomColor = (colors) => {
|
13
|
+
return colors[Math.floor(Math.random() * colors.length)] || colors[0];
|
14
|
+
};
|
15
|
+
|
16
|
+
const fireworkColors = ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff', '#00ffff', '#ffffff'];
|
17
|
+
const createFireworkParticles = (origin, config) => {
|
18
|
+
const { particleCount = 60, startVelocity = 50, colors = fireworkColors, elementSize = 8 } = config;
|
19
|
+
const particles = [];
|
20
|
+
for (let i = 0; i < particleCount; i++) {
|
21
|
+
const angle = (360 / particleCount) * i + randomInRange(-5, 5);
|
22
|
+
const velocity = randomInRange(startVelocity * 0.5, startVelocity * 1.2);
|
23
|
+
const color = getRandomColor(colors);
|
24
|
+
particles.push({
|
25
|
+
id: generateId(),
|
26
|
+
x: origin.x,
|
27
|
+
y: origin.y,
|
28
|
+
vx: Math.cos(degreesToRadians(angle)) * velocity,
|
29
|
+
vy: Math.sin(degreesToRadians(angle)) * velocity - 10,
|
30
|
+
life: config.lifetime || 140,
|
31
|
+
opacity: 1,
|
32
|
+
size: randomInRange(elementSize * 0.6, elementSize * 1.4),
|
33
|
+
rotation: 0,
|
34
|
+
color,
|
35
|
+
});
|
36
|
+
}
|
37
|
+
return particles;
|
38
|
+
};
|
39
|
+
const renderFireworkParticle = (particle) => {
|
40
|
+
return (React.createElement("div", { key: particle.id, style: {
|
41
|
+
width: `${particle.size}px`,
|
42
|
+
height: `${particle.size}px`,
|
43
|
+
backgroundColor: '#ffffff',
|
44
|
+
borderRadius: '50%',
|
45
|
+
boxShadow: `
|
46
|
+
0 0 ${particle.size}px ${particle.color},
|
47
|
+
0 0 ${particle.size * 2}px ${particle.color},
|
48
|
+
0 0 ${particle.size * 3}px ${particle.color},
|
49
|
+
0 0 ${particle.size * 4}px ${particle.color}
|
50
|
+
`,
|
51
|
+
background: `radial-gradient(circle, #ffffff 0%, ${particle.color} 40%, transparent 70%)`,
|
52
|
+
} }));
|
53
|
+
};
|
54
|
+
|
55
|
+
export { createFireworkParticles, renderFireworkParticle };
|
56
|
+
//# sourceMappingURL=fireworks.esm.js.map
|
@@ -0,0 +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 = 50,\n colors = fireworkColors,\n elementSize = 8\n } = config;\n\n const particles: Particle[] = [];\n\n for (let i = 0; i < particleCount; i++) {\n const angle = (360 / particleCount) * i + randomInRange(-5, 5);\n const velocity = randomInRange(startVelocity * 0.5, startVelocity * 1.2);\n const color = getRandomColor(colors);\n\n particles.push({\n id: generateId(),\n x: origin.x,\n y: origin.y,\n vx: Math.cos(degreesToRadians(angle)) * velocity,\n vy: Math.sin(degreesToRadians(angle)) * velocity - 10,\n life: config.lifetime || 140,\n opacity: 1,\n size: randomInRange(elementSize * 0.6, elementSize * 1.4),\n rotation: 0,\n color,\n });\n }\n\n return particles;\n};\n\nexport const renderFireworkParticle = (particle: Particle): React.ReactNode => {\n return (\n <div\n key={particle.id}\n style={{\n width: `${particle.size}px`,\n height: `${particle.size}px`,\n backgroundColor: '#ffffff',\n borderRadius: '50%',\n boxShadow: `\n 0 0 ${particle.size}px ${particle.color},\n 0 0 ${particle.size * 2}px ${particle.color},\n 0 0 ${particle.size * 3}px ${particle.color},\n 0 0 ${particle.size * 4}px ${particle.color}\n `,\n background: `radial-gradient(circle, #ffffff 0%, ${particle.color} 40%, transparent 70%)`,\n }}\n />\n );\n};"],"names":[],"mappings":"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"}
|
@@ -0,0 +1,59 @@
|
|
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 degreesToRadians = (degrees) => {
|
9
|
+
return (degrees * Math.PI) / 180;
|
10
|
+
};
|
11
|
+
const generateId = () => {
|
12
|
+
return Math.random().toString(36).substring(2, 9);
|
13
|
+
};
|
14
|
+
const getRandomColor = (colors) => {
|
15
|
+
return colors[Math.floor(Math.random() * colors.length)] || colors[0];
|
16
|
+
};
|
17
|
+
|
18
|
+
const fireworkColors = ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff', '#00ffff', '#ffffff'];
|
19
|
+
const createFireworkParticles = (origin, config) => {
|
20
|
+
const { particleCount = 60, startVelocity = 50, colors = fireworkColors, elementSize = 8 } = config;
|
21
|
+
const particles = [];
|
22
|
+
for (let i = 0; i < particleCount; i++) {
|
23
|
+
const angle = (360 / particleCount) * i + randomInRange(-5, 5);
|
24
|
+
const velocity = randomInRange(startVelocity * 0.5, startVelocity * 1.2);
|
25
|
+
const color = getRandomColor(colors);
|
26
|
+
particles.push({
|
27
|
+
id: generateId(),
|
28
|
+
x: origin.x,
|
29
|
+
y: origin.y,
|
30
|
+
vx: Math.cos(degreesToRadians(angle)) * velocity,
|
31
|
+
vy: Math.sin(degreesToRadians(angle)) * velocity - 10,
|
32
|
+
life: config.lifetime || 140,
|
33
|
+
opacity: 1,
|
34
|
+
size: randomInRange(elementSize * 0.6, elementSize * 1.4),
|
35
|
+
rotation: 0,
|
36
|
+
color,
|
37
|
+
});
|
38
|
+
}
|
39
|
+
return particles;
|
40
|
+
};
|
41
|
+
const renderFireworkParticle = (particle) => {
|
42
|
+
return (React.createElement("div", { key: particle.id, style: {
|
43
|
+
width: `${particle.size}px`,
|
44
|
+
height: `${particle.size}px`,
|
45
|
+
backgroundColor: '#ffffff',
|
46
|
+
borderRadius: '50%',
|
47
|
+
boxShadow: `
|
48
|
+
0 0 ${particle.size}px ${particle.color},
|
49
|
+
0 0 ${particle.size * 2}px ${particle.color},
|
50
|
+
0 0 ${particle.size * 3}px ${particle.color},
|
51
|
+
0 0 ${particle.size * 4}px ${particle.color}
|
52
|
+
`,
|
53
|
+
background: `radial-gradient(circle, #ffffff 0%, ${particle.color} 40%, transparent 70%)`,
|
54
|
+
} }));
|
55
|
+
};
|
56
|
+
|
57
|
+
exports.createFireworkParticles = createFireworkParticles;
|
58
|
+
exports.renderFireworkParticle = renderFireworkParticle;
|
59
|
+
//# sourceMappingURL=fireworks.js.map
|
@@ -0,0 +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 = 50,\n colors = fireworkColors,\n elementSize = 8\n } = config;\n\n const particles: Particle[] = [];\n\n for (let i = 0; i < particleCount; i++) {\n const angle = (360 / particleCount) * i + randomInRange(-5, 5);\n const velocity = randomInRange(startVelocity * 0.5, startVelocity * 1.2);\n const color = getRandomColor(colors);\n\n particles.push({\n id: generateId(),\n x: origin.x,\n y: origin.y,\n vx: Math.cos(degreesToRadians(angle)) * velocity,\n vy: Math.sin(degreesToRadians(angle)) * velocity - 10,\n life: config.lifetime || 140,\n opacity: 1,\n size: randomInRange(elementSize * 0.6, elementSize * 1.4),\n rotation: 0,\n color,\n });\n }\n\n return particles;\n};\n\nexport const renderFireworkParticle = (particle: Particle): React.ReactNode => {\n return (\n <div\n key={particle.id}\n style={{\n width: `${particle.size}px`,\n height: `${particle.size}px`,\n backgroundColor: '#ffffff',\n borderRadius: '50%',\n boxShadow: `\n 0 0 ${particle.size}px ${particle.color},\n 0 0 ${particle.size * 2}px ${particle.color},\n 0 0 ${particle.size * 3}px ${particle.color},\n 0 0 ${particle.size * 4}px ${particle.color}\n `,\n background: `radial-gradient(circle, #ffffff 0%, ${particle.color} 40%, transparent 70%)`,\n }}\n />\n );\n};"],"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 createHeartParticles: (origin: {
|
4
|
+
x: number;
|
5
|
+
y: number;
|
6
|
+
}, config: AnimationConfig) => Particle[];
|
7
|
+
export declare const renderHeartParticle: (particle: Particle) => React.ReactNode;
|
8
|
+
//# sourceMappingURL=hearts.d.ts.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"hearts.d.ts","sourceRoot":"","sources":["../../src/animations/hearts.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,SAe9D,CAAC"}
|
@@ -0,0 +1,44 @@
|
|
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
|
+
const getRandomColor = (colors) => {
|
10
|
+
return colors[Math.floor(Math.random() * colors.length)] || colors[0];
|
11
|
+
};
|
12
|
+
|
13
|
+
const heartColors = ['#ff1744', '#e91e63', '#ff4569', '#ff6b6b', '#ee5a70'];
|
14
|
+
const createHeartParticles = (origin, config) => {
|
15
|
+
const { particleCount = 25, startVelocity = 30, colors = heartColors, elementSize = 30 } = config;
|
16
|
+
const particles = [];
|
17
|
+
for (let i = 0; i < particleCount; i++) {
|
18
|
+
const angle = randomInRange(-45, -135);
|
19
|
+
const velocity = randomInRange(startVelocity * 0.7, startVelocity * 1.3);
|
20
|
+
const horizontalDrift = randomInRange(-2, 2);
|
21
|
+
particles.push({
|
22
|
+
id: generateId(),
|
23
|
+
x: origin.x + randomInRange(-10, 10),
|
24
|
+
y: origin.y,
|
25
|
+
vx: Math.cos((angle * Math.PI) / 180) * velocity + horizontalDrift,
|
26
|
+
vy: Math.sin((angle * Math.PI) / 180) * velocity,
|
27
|
+
life: config.lifetime || 180,
|
28
|
+
opacity: 1,
|
29
|
+
size: randomInRange(elementSize * 0.6, elementSize * 1.2),
|
30
|
+
rotation: randomInRange(-20, 20),
|
31
|
+
color: getRandomColor(colors),
|
32
|
+
});
|
33
|
+
}
|
34
|
+
return particles;
|
35
|
+
};
|
36
|
+
const renderHeartParticle = (particle) => {
|
37
|
+
return (React.createElement("svg", { key: particle.id, width: particle.size, height: particle.size, viewBox: "0 0 24 24", fill: particle.color, style: {
|
38
|
+
filter: `drop-shadow(0 0 ${particle.size * 0.15}px ${particle.color})`,
|
39
|
+
} },
|
40
|
+
React.createElement("path", { d: "M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" })));
|
41
|
+
};
|
42
|
+
|
43
|
+
export { createHeartParticles, renderHeartParticle };
|
44
|
+
//# sourceMappingURL=hearts.esm.js.map
|
@@ -0,0 +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 = 30,\n colors = heartColors,\n elementSize = 30\n } = config;\n\n const particles: Particle[] = [];\n\n for (let i = 0; i < particleCount; i++) {\n const angle = randomInRange(-45, -135);\n const velocity = randomInRange(startVelocity * 0.7, startVelocity * 1.3);\n const horizontalDrift = randomInRange(-2, 2);\n\n particles.push({\n id: generateId(),\n x: origin.x + randomInRange(-10, 10),\n y: origin.y,\n vx: Math.cos((angle * Math.PI) / 180) * velocity + horizontalDrift,\n vy: Math.sin((angle * Math.PI) / 180) * velocity,\n life: config.lifetime || 180,\n opacity: 1,\n size: randomInRange(elementSize * 0.6, elementSize * 1.2),\n rotation: randomInRange(-20, 20),\n color: getRandomColor(colors),\n });\n }\n\n return particles;\n};\n\nexport const renderHeartParticle = (particle: Particle): React.ReactNode => {\n return (\n <svg\n key={particle.id}\n width={particle.size}\n height={particle.size}\n viewBox=\"0 0 24 24\"\n fill={particle.color}\n style={{\n filter: `drop-shadow(0 0 ${particle.size * 0.15}px ${particle.color})`,\n }}\n >\n <path d=\"M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z\" />\n </svg>\n );\n};"],"names":[],"mappings":"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"}
|
@@ -0,0 +1,47 @@
|
|
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
|
+
const getRandomColor = (colors) => {
|
12
|
+
return colors[Math.floor(Math.random() * colors.length)] || colors[0];
|
13
|
+
};
|
14
|
+
|
15
|
+
const heartColors = ['#ff1744', '#e91e63', '#ff4569', '#ff6b6b', '#ee5a70'];
|
16
|
+
const createHeartParticles = (origin, config) => {
|
17
|
+
const { particleCount = 25, startVelocity = 30, colors = heartColors, elementSize = 30 } = config;
|
18
|
+
const particles = [];
|
19
|
+
for (let i = 0; i < particleCount; i++) {
|
20
|
+
const angle = randomInRange(-45, -135);
|
21
|
+
const velocity = randomInRange(startVelocity * 0.7, startVelocity * 1.3);
|
22
|
+
const horizontalDrift = randomInRange(-2, 2);
|
23
|
+
particles.push({
|
24
|
+
id: generateId(),
|
25
|
+
x: origin.x + randomInRange(-10, 10),
|
26
|
+
y: origin.y,
|
27
|
+
vx: Math.cos((angle * Math.PI) / 180) * velocity + horizontalDrift,
|
28
|
+
vy: Math.sin((angle * Math.PI) / 180) * velocity,
|
29
|
+
life: config.lifetime || 180,
|
30
|
+
opacity: 1,
|
31
|
+
size: randomInRange(elementSize * 0.6, elementSize * 1.2),
|
32
|
+
rotation: randomInRange(-20, 20),
|
33
|
+
color: getRandomColor(colors),
|
34
|
+
});
|
35
|
+
}
|
36
|
+
return particles;
|
37
|
+
};
|
38
|
+
const renderHeartParticle = (particle) => {
|
39
|
+
return (React.createElement("svg", { key: particle.id, width: particle.size, height: particle.size, viewBox: "0 0 24 24", fill: particle.color, style: {
|
40
|
+
filter: `drop-shadow(0 0 ${particle.size * 0.15}px ${particle.color})`,
|
41
|
+
} },
|
42
|
+
React.createElement("path", { d: "M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" })));
|
43
|
+
};
|
44
|
+
|
45
|
+
exports.createHeartParticles = createHeartParticles;
|
46
|
+
exports.renderHeartParticle = renderHeartParticle;
|
47
|
+
//# sourceMappingURL=hearts.js.map
|
@@ -0,0 +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 = 30,\n colors = heartColors,\n elementSize = 30\n } = config;\n\n const particles: Particle[] = [];\n\n for (let i = 0; i < particleCount; i++) {\n const angle = randomInRange(-45, -135);\n const velocity = randomInRange(startVelocity * 0.7, startVelocity * 1.3);\n const horizontalDrift = randomInRange(-2, 2);\n\n particles.push({\n id: generateId(),\n x: origin.x + randomInRange(-10, 10),\n y: origin.y,\n vx: Math.cos((angle * Math.PI) / 180) * velocity + horizontalDrift,\n vy: Math.sin((angle * Math.PI) / 180) * velocity,\n life: config.lifetime || 180,\n opacity: 1,\n size: randomInRange(elementSize * 0.6, elementSize * 1.2),\n rotation: randomInRange(-20, 20),\n color: getRandomColor(colors),\n });\n }\n\n return particles;\n};\n\nexport const renderHeartParticle = (particle: Particle): React.ReactNode => {\n return (\n <svg\n key={particle.id}\n width={particle.size}\n height={particle.size}\n viewBox=\"0 0 24 24\"\n fill={particle.color}\n style={{\n filter: `drop-shadow(0 0 ${particle.size * 0.15}px ${particle.color})`,\n }}\n >\n <path d=\"M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z\" />\n </svg>\n );\n};"],"names":[],"mappings":"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"}
|
@@ -0,0 +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"}
|
@@ -0,0 +1,8 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
import { AnimationConfig, Particle } from '../types';
|
3
|
+
export declare const createSparkleParticles: (origin: {
|
4
|
+
x: number;
|
5
|
+
y: number;
|
6
|
+
}, config: AnimationConfig) => Particle[];
|
7
|
+
export declare const renderSparkleParticle: (particle: Particle) => React.ReactNode;
|
8
|
+
//# sourceMappingURL=sparkles.d.ts.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"sparkles.d.ts","sourceRoot":"","sources":["../../src/animations/sparkles.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,eAAe,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAGrD,eAAO,MAAM,sBAAsB,GACjC,QAAQ;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,EAChC,QAAQ,eAAe,KACtB,QAAQ,EA4BV,CAAC;AAEF,eAAO,MAAM,qBAAqB,GAAI,UAAU,QAAQ,KAAG,KAAK,CAAC,SAoBhE,CAAC"}
|
@@ -0,0 +1,40 @@
|
|
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 createSparkleParticles = (origin, config) => {
|
11
|
+
const { particleCount = 35, spread = 120, startVelocity = 45, elementSize = 25, colors = ['#FFD700', '#FFFFFF'] } = config;
|
12
|
+
const particles = [];
|
13
|
+
for (let i = 0; i < particleCount; i++) {
|
14
|
+
const velocityScale = startVelocity / 45; // Scale based on default
|
15
|
+
particles.push({
|
16
|
+
id: generateId(),
|
17
|
+
x: origin.x + randomInRange(-spread, spread),
|
18
|
+
y: origin.y + randomInRange(-spread, spread),
|
19
|
+
vx: randomInRange(-3, 3) * velocityScale,
|
20
|
+
vy: randomInRange(-3, 3) * velocityScale,
|
21
|
+
life: config.lifetime || 120,
|
22
|
+
opacity: 0,
|
23
|
+
size: randomInRange(elementSize * 0.4, elementSize * 1.2),
|
24
|
+
rotation: randomInRange(0, 360),
|
25
|
+
color: colors[Math.floor(Math.random() * colors.length)] || colors[0],
|
26
|
+
});
|
27
|
+
}
|
28
|
+
return particles;
|
29
|
+
};
|
30
|
+
const renderSparkleParticle = (particle) => {
|
31
|
+
const scale = particle.opacity;
|
32
|
+
return (React.createElement("svg", { key: particle.id, width: particle.size, height: particle.size, viewBox: "0 0 24 24", style: {
|
33
|
+
transform: `scale(${scale}) rotate(${particle.rotation}deg)`,
|
34
|
+
filter: 'drop-shadow(0 0 6px rgba(255, 215, 0, 0.8))',
|
35
|
+
} },
|
36
|
+
React.createElement("path", { d: "M12 0L14.59 8.41L23 11L14.59 13.59L12 22L9.41 13.59L1 11L9.41 8.41L12 0Z", fill: particle.color })));
|
37
|
+
};
|
38
|
+
|
39
|
+
export { createSparkleParticles, renderSparkleParticle };
|
40
|
+
//# sourceMappingURL=sparkles.esm.js.map
|
@@ -0,0 +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 = 45,\n elementSize = 25,\n colors = ['#FFD700', '#FFFFFF']\n } = config;\n\n const particles: Particle[] = [];\n\n for (let i = 0; i < particleCount; i++) {\n const velocityScale = startVelocity / 45; // Scale based on default\n particles.push({\n id: generateId(),\n x: origin.x + randomInRange(-spread, spread),\n y: origin.y + randomInRange(-spread, spread),\n vx: randomInRange(-3, 3) * velocityScale,\n vy: randomInRange(-3, 3) * velocityScale,\n life: config.lifetime || 120,\n opacity: 0,\n size: randomInRange(elementSize * 0.4, elementSize * 1.2),\n rotation: randomInRange(0, 360),\n color: colors[Math.floor(Math.random() * colors.length)] || colors[0],\n });\n }\n\n return particles;\n};\n\nexport const renderSparkleParticle = (particle: Particle): React.ReactNode => {\n const scale = particle.opacity;\n \n return (\n <svg\n key={particle.id}\n width={particle.size}\n height={particle.size}\n viewBox=\"0 0 24 24\"\n style={{\n transform: `scale(${scale}) rotate(${particle.rotation}deg)`,\n filter: 'drop-shadow(0 0 6px rgba(255, 215, 0, 0.8))',\n }}\n >\n <path\n d=\"M12 0L14.59 8.41L23 11L14.59 13.59L12 22L9.41 13.59L1 11L9.41 8.41L12 0Z\"\n fill={particle.color}\n />\n </svg>\n );\n};"],"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;;;;"}
|
@@ -0,0 +1,43 @@
|
|
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 createSparkleParticles = (origin, config) => {
|
13
|
+
const { particleCount = 35, spread = 120, startVelocity = 45, elementSize = 25, colors = ['#FFD700', '#FFFFFF'] } = config;
|
14
|
+
const particles = [];
|
15
|
+
for (let i = 0; i < particleCount; i++) {
|
16
|
+
const velocityScale = startVelocity / 45; // Scale based on default
|
17
|
+
particles.push({
|
18
|
+
id: generateId(),
|
19
|
+
x: origin.x + randomInRange(-spread, spread),
|
20
|
+
y: origin.y + randomInRange(-spread, spread),
|
21
|
+
vx: randomInRange(-3, 3) * velocityScale,
|
22
|
+
vy: randomInRange(-3, 3) * velocityScale,
|
23
|
+
life: config.lifetime || 120,
|
24
|
+
opacity: 0,
|
25
|
+
size: randomInRange(elementSize * 0.4, elementSize * 1.2),
|
26
|
+
rotation: randomInRange(0, 360),
|
27
|
+
color: colors[Math.floor(Math.random() * colors.length)] || colors[0],
|
28
|
+
});
|
29
|
+
}
|
30
|
+
return particles;
|
31
|
+
};
|
32
|
+
const renderSparkleParticle = (particle) => {
|
33
|
+
const scale = particle.opacity;
|
34
|
+
return (React.createElement("svg", { key: particle.id, width: particle.size, height: particle.size, viewBox: "0 0 24 24", style: {
|
35
|
+
transform: `scale(${scale}) rotate(${particle.rotation}deg)`,
|
36
|
+
filter: 'drop-shadow(0 0 6px rgba(255, 215, 0, 0.8))',
|
37
|
+
} },
|
38
|
+
React.createElement("path", { d: "M12 0L14.59 8.41L23 11L14.59 13.59L12 22L9.41 13.59L1 11L9.41 8.41L12 0Z", fill: particle.color })));
|
39
|
+
};
|
40
|
+
|
41
|
+
exports.createSparkleParticles = createSparkleParticles;
|
42
|
+
exports.renderSparkleParticle = renderSparkleParticle;
|
43
|
+
//# sourceMappingURL=sparkles.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"sparkles.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 = 45,\n elementSize = 25,\n colors = ['#FFD700', '#FFFFFF']\n } = config;\n\n const particles: Particle[] = [];\n\n for (let i = 0; i < particleCount; i++) {\n const velocityScale = startVelocity / 45; // Scale based on default\n particles.push({\n id: generateId(),\n x: origin.x + randomInRange(-spread, spread),\n y: origin.y + randomInRange(-spread, spread),\n vx: randomInRange(-3, 3) * velocityScale,\n vy: randomInRange(-3, 3) * velocityScale,\n life: config.lifetime || 120,\n opacity: 0,\n size: randomInRange(elementSize * 0.4, elementSize * 1.2),\n rotation: randomInRange(0, 360),\n color: colors[Math.floor(Math.random() * colors.length)] || colors[0],\n });\n }\n\n return particles;\n};\n\nexport const renderSparkleParticle = (particle: Particle): React.ReactNode => {\n const scale = particle.opacity;\n \n return (\n <svg\n key={particle.id}\n width={particle.size}\n height={particle.size}\n viewBox=\"0 0 24 24\"\n style={{\n transform: `scale(${scale}) rotate(${particle.rotation}deg)`,\n filter: 'drop-shadow(0 0 6px rgba(255, 215, 0, 0.8))',\n }}\n >\n <path\n d=\"M12 0L14.59 8.41L23 11L14.59 13.59L12 22L9.41 13.59L1 11L9.41 8.41L12 0Z\"\n fill={particle.color}\n />\n </svg>\n );\n};"],"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;;;;;"}
|
@@ -0,0 +1,8 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
import { AnimationConfig, Particle } from '../types';
|
3
|
+
export declare const createStarParticles: (origin: {
|
4
|
+
x: number;
|
5
|
+
y: number;
|
6
|
+
}, config: AnimationConfig) => Particle[];
|
7
|
+
export declare const renderStarParticle: (particle: Particle) => React.ReactNode;
|
8
|
+
//# sourceMappingURL=stars.d.ts.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"stars.d.ts","sourceRoot":"","sources":["../../src/animations/stars.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,EA6BV,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAAI,UAAU,QAAQ,KAAG,KAAK,CAAC,SAe7D,CAAC"}
|
@@ -0,0 +1,40 @@
|
|
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 starColors = ['#FFD700', '#FFA500', '#FF6347', '#FFE4B5'];
|
11
|
+
const createStarParticles = (origin, config) => {
|
12
|
+
const { particleCount = 40, startVelocity = 35, colors = starColors, elementSize = 30 } = config;
|
13
|
+
const particles = [];
|
14
|
+
for (let i = 0; i < particleCount; i++) {
|
15
|
+
const angle = randomInRange(0, 360);
|
16
|
+
const velocity = randomInRange(startVelocity * 0.5, startVelocity);
|
17
|
+
particles.push({
|
18
|
+
id: generateId(),
|
19
|
+
x: origin.x,
|
20
|
+
y: origin.y,
|
21
|
+
vx: Math.cos((angle * Math.PI) / 180) * velocity,
|
22
|
+
vy: Math.sin((angle * Math.PI) / 180) * velocity - 15,
|
23
|
+
life: config.lifetime || 150,
|
24
|
+
opacity: 1,
|
25
|
+
size: randomInRange(elementSize * 0.5, elementSize * 1.3),
|
26
|
+
rotation: randomInRange(0, 360),
|
27
|
+
color: colors[Math.floor(Math.random() * colors.length)] || colors[0],
|
28
|
+
});
|
29
|
+
}
|
30
|
+
return particles;
|
31
|
+
};
|
32
|
+
const renderStarParticle = (particle) => {
|
33
|
+
return (React.createElement("svg", { key: particle.id, width: particle.size, height: particle.size, viewBox: "0 0 24 24", fill: particle.color, style: {
|
34
|
+
filter: `drop-shadow(0 0 ${particle.size * 0.2}px ${particle.color})`,
|
35
|
+
} },
|
36
|
+
React.createElement("path", { d: "M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z" })));
|
37
|
+
};
|
38
|
+
|
39
|
+
export { createStarParticles, renderStarParticle };
|
40
|
+
//# sourceMappingURL=stars.esm.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"stars.esm.js","sources":["../../src/utils.ts","../../src/animations/stars.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 starColors = ['#FFD700', '#FFA500', '#FF6347', '#FFE4B5'];\n\nexport const createStarParticles = (\n origin: { x: number; y: number },\n config: AnimationConfig\n): Particle[] => {\n const {\n particleCount = 40,\n startVelocity = 35,\n colors = starColors,\n elementSize = 30\n } = config;\n\n const particles: Particle[] = [];\n\n for (let i = 0; i < particleCount; i++) {\n const angle = randomInRange(0, 360);\n const velocity = randomInRange(startVelocity * 0.5, startVelocity);\n\n particles.push({\n id: generateId(),\n x: origin.x,\n y: origin.y,\n vx: Math.cos((angle * Math.PI) / 180) * velocity,\n vy: Math.sin((angle * Math.PI) / 180) * velocity - 15,\n life: config.lifetime || 150,\n opacity: 1,\n size: randomInRange(elementSize * 0.5, elementSize * 1.3),\n rotation: randomInRange(0, 360),\n color: colors[Math.floor(Math.random() * colors.length)] || colors[0],\n });\n }\n\n return particles;\n};\n\nexport const renderStarParticle = (particle: Particle): React.ReactNode => {\n return (\n <svg\n key={particle.id}\n width={particle.size}\n height={particle.size}\n viewBox=\"0 0 24 24\"\n fill={particle.color}\n style={{\n filter: `drop-shadow(0 0 ${particle.size * 0.2}px ${particle.color})`,\n }}\n >\n <path d=\"M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z\" />\n </svg>\n );\n};"],"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;AACd,IAAA,MAAM,EACJ,aAAa,GAAG,EAAE,EAClB,aAAa,GAAG,EAAE,EAClB,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;QACtC,MAAM,KAAK,GAAG,aAAa,CAAC,CAAC,EAAE,GAAG,CAAC;QACnC,MAAM,QAAQ,GAAG,aAAa,CAAC,aAAa,GAAG,GAAG,EAAE,aAAa,CAAC;QAElE,SAAS,CAAC,IAAI,CAAC;YACb,EAAE,EAAE,UAAU,EAAE;YAChB,CAAC,EAAE,MAAM,CAAC,CAAC;YACX,CAAC,EAAE,MAAM,CAAC,CAAC;AACX,YAAA,EAAE,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,KAAK,GAAG,IAAI,CAAC,EAAE,IAAI,GAAG,CAAC,GAAG,QAAQ;AAChD,YAAA,EAAE,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,KAAK,GAAG,IAAI,CAAC,EAAE,IAAI,GAAG,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,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;AACxE,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,GAAG,CAAM,GAAA,EAAA,QAAQ,CAAC,KAAK,CAAG,CAAA,CAAA;AACtE,SAAA,EAAA;AAED,QAAA,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAM,CAAC,EAAC,sGAAsG,EAAG,CAAA,CAC7G;AAEV;;;;"}
|
@@ -0,0 +1,43 @@
|
|
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 starColors = ['#FFD700', '#FFA500', '#FF6347', '#FFE4B5'];
|
13
|
+
const createStarParticles = (origin, config) => {
|
14
|
+
const { particleCount = 40, startVelocity = 35, colors = starColors, elementSize = 30 } = config;
|
15
|
+
const particles = [];
|
16
|
+
for (let i = 0; i < particleCount; i++) {
|
17
|
+
const angle = randomInRange(0, 360);
|
18
|
+
const velocity = randomInRange(startVelocity * 0.5, startVelocity);
|
19
|
+
particles.push({
|
20
|
+
id: generateId(),
|
21
|
+
x: origin.x,
|
22
|
+
y: origin.y,
|
23
|
+
vx: Math.cos((angle * Math.PI) / 180) * velocity,
|
24
|
+
vy: Math.sin((angle * Math.PI) / 180) * velocity - 15,
|
25
|
+
life: config.lifetime || 150,
|
26
|
+
opacity: 1,
|
27
|
+
size: randomInRange(elementSize * 0.5, elementSize * 1.3),
|
28
|
+
rotation: randomInRange(0, 360),
|
29
|
+
color: colors[Math.floor(Math.random() * colors.length)] || colors[0],
|
30
|
+
});
|
31
|
+
}
|
32
|
+
return particles;
|
33
|
+
};
|
34
|
+
const renderStarParticle = (particle) => {
|
35
|
+
return (React.createElement("svg", { key: particle.id, width: particle.size, height: particle.size, viewBox: "0 0 24 24", fill: particle.color, style: {
|
36
|
+
filter: `drop-shadow(0 0 ${particle.size * 0.2}px ${particle.color})`,
|
37
|
+
} },
|
38
|
+
React.createElement("path", { d: "M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z" })));
|
39
|
+
};
|
40
|
+
|
41
|
+
exports.createStarParticles = createStarParticles;
|
42
|
+
exports.renderStarParticle = renderStarParticle;
|
43
|
+
//# sourceMappingURL=stars.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"stars.js","sources":["../../src/utils.ts","../../src/animations/stars.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 starColors = ['#FFD700', '#FFA500', '#FF6347', '#FFE4B5'];\n\nexport const createStarParticles = (\n origin: { x: number; y: number },\n config: AnimationConfig\n): Particle[] => {\n const {\n particleCount = 40,\n startVelocity = 35,\n colors = starColors,\n elementSize = 30\n } = config;\n\n const particles: Particle[] = [];\n\n for (let i = 0; i < particleCount; i++) {\n const angle = randomInRange(0, 360);\n const velocity = randomInRange(startVelocity * 0.5, startVelocity);\n\n particles.push({\n id: generateId(),\n x: origin.x,\n y: origin.y,\n vx: Math.cos((angle * Math.PI) / 180) * velocity,\n vy: Math.sin((angle * Math.PI) / 180) * velocity - 15,\n life: config.lifetime || 150,\n opacity: 1,\n size: randomInRange(elementSize * 0.5, elementSize * 1.3),\n rotation: randomInRange(0, 360),\n color: colors[Math.floor(Math.random() * colors.length)] || colors[0],\n });\n }\n\n return particles;\n};\n\nexport const renderStarParticle = (particle: Particle): React.ReactNode => {\n return (\n <svg\n key={particle.id}\n width={particle.size}\n height={particle.size}\n viewBox=\"0 0 24 24\"\n fill={particle.color}\n style={{\n filter: `drop-shadow(0 0 ${particle.size * 0.2}px ${particle.color})`,\n }}\n >\n <path d=\"M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z\" />\n </svg>\n );\n};"],"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;AACd,IAAA,MAAM,EACJ,aAAa,GAAG,EAAE,EAClB,aAAa,GAAG,EAAE,EAClB,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;QACtC,MAAM,KAAK,GAAG,aAAa,CAAC,CAAC,EAAE,GAAG,CAAC;QACnC,MAAM,QAAQ,GAAG,aAAa,CAAC,aAAa,GAAG,GAAG,EAAE,aAAa,CAAC;QAElE,SAAS,CAAC,IAAI,CAAC;YACb,EAAE,EAAE,UAAU,EAAE;YAChB,CAAC,EAAE,MAAM,CAAC,CAAC;YACX,CAAC,EAAE,MAAM,CAAC,CAAC;AACX,YAAA,EAAE,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,KAAK,GAAG,IAAI,CAAC,EAAE,IAAI,GAAG,CAAC,GAAG,QAAQ;AAChD,YAAA,EAAE,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,KAAK,GAAG,IAAI,CAAC,EAAE,IAAI,GAAG,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,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;AACxE,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,GAAG,CAAM,GAAA,EAAA,QAAQ,CAAC,KAAK,CAAG,CAAA,CAAA;AACtE,SAAA,EAAA;AAED,QAAA,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAM,CAAC,EAAC,sGAAsG,EAAG,CAAA,CAC7G;AAEV;;;;;"}
|