partycles 0.4.0 → 1.0.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/dist/animations/animations/index.d.ts.map +1 -1
- package/dist/animations/types.d.ts +1 -1
- package/dist/animations/types.d.ts.map +1 -1
- package/dist/index.esm.js +8 -1194
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +8 -1194
- package/dist/index.js.map +1 -1
- package/dist/types.d.ts +1 -1
- package/dist/types.d.ts.map +1 -1
- package/package.json +2 -2
package/dist/index.js
CHANGED
@@ -28,9 +28,9 @@ const createParticleStyle = (particle, containerRect) => {
|
|
28
28
|
};
|
29
29
|
};
|
30
30
|
|
31
|
-
const defaultColors$
|
31
|
+
const defaultColors$3 = ['#f44336', '#e91e63', '#9c27b0', '#673ab7', '#3f51b5', '#2196f3', '#03a9f4', '#00bcd4', '#009688', '#4caf50', '#8bc34a', '#cddc39', '#ffeb3b', '#ffc107', '#ff9800', '#ff5722'];
|
32
32
|
const createConfettiParticles = (origin, config) => {
|
33
|
-
const { particleCount = 50, startVelocity = 20, colors = defaultColors$
|
33
|
+
const { particleCount = 50, startVelocity = 20, colors = defaultColors$3, elementSize = 20 } = config;
|
34
34
|
const particles = [];
|
35
35
|
for (let i = 0; i < particleCount; i++) {
|
36
36
|
const angle = randomInRange(0, 360);
|
@@ -361,61 +361,6 @@ const renderCoinParticle = (particle) => {
|
|
361
361
|
} }, "$")));
|
362
362
|
};
|
363
363
|
|
364
|
-
const lightningColors = ['#FFFF00', '#FFFFFF', '#00FFFF', '#FF00FF'];
|
365
|
-
const createLightningParticles = (origin, config) => {
|
366
|
-
const { particleCount = 20, spread = 360, startVelocity = 50, colors = lightningColors, elementSize = 30 } = config;
|
367
|
-
const particles = [];
|
368
|
-
for (let i = 0; i < particleCount; i++) {
|
369
|
-
const angle = randomInRange(0, spread) * (Math.PI / 180);
|
370
|
-
const velocity = randomInRange(startVelocity * 0.7, startVelocity * 1.3);
|
371
|
-
particles.push({
|
372
|
-
id: generateId(),
|
373
|
-
x: origin.x,
|
374
|
-
y: origin.y,
|
375
|
-
vx: Math.sin(angle) * velocity,
|
376
|
-
vy: -Math.abs(Math.cos(angle) * velocity * 0.5), // Mostly horizontal movement
|
377
|
-
life: config.lifetime || 60, // Quick flashes
|
378
|
-
opacity: 1,
|
379
|
-
size: randomInRange(elementSize * 0.5, elementSize * 1.5),
|
380
|
-
rotation: randomInRange(0, 360),
|
381
|
-
color: colors[Math.floor(Math.random() * colors.length)] || colors[0] || '#ffffff',
|
382
|
-
});
|
383
|
-
}
|
384
|
-
return particles;
|
385
|
-
};
|
386
|
-
const renderLightningParticle = (particle) => {
|
387
|
-
// Create zigzag pattern based on particle life
|
388
|
-
const zigzagOffset = Math.sin(particle.life * 0.5) * 10;
|
389
|
-
return (React.createElement("div", { key: particle.id, style: {
|
390
|
-
width: `${particle.size}px`,
|
391
|
-
height: `${particle.size * 0.3}px`,
|
392
|
-
position: 'relative',
|
393
|
-
filter: `blur(0.5px) brightness(2)`,
|
394
|
-
transform: `translateX(${zigzagOffset}px) rotate(${particle.rotation}deg)`,
|
395
|
-
} },
|
396
|
-
React.createElement("div", { style: {
|
397
|
-
position: 'absolute',
|
398
|
-
width: '100%',
|
399
|
-
height: '100%',
|
400
|
-
background: particle.color,
|
401
|
-
clipPath: 'polygon(0% 0%, 60% 0%, 40% 45%, 100% 45%, 0% 100%, 40% 55%, 20% 55%, 35% 100%)',
|
402
|
-
boxShadow: `
|
403
|
-
0 0 10px ${particle.color},
|
404
|
-
0 0 20px ${particle.color},
|
405
|
-
0 0 30px ${particle.color}
|
406
|
-
`,
|
407
|
-
} }),
|
408
|
-
React.createElement("div", { style: {
|
409
|
-
position: 'absolute',
|
410
|
-
top: '-50%',
|
411
|
-
left: '-50%',
|
412
|
-
width: '200%',
|
413
|
-
height: '200%',
|
414
|
-
background: `radial-gradient(circle, ${particle.color}88 0%, transparent 70%)`,
|
415
|
-
animation: `electricPulse ${randomInRange(100, 200)}ms infinite`,
|
416
|
-
} })));
|
417
|
-
};
|
418
|
-
|
419
364
|
const petalColors = ['#FFB6C1', '#FFC0CB', '#FF69B4', '#FF1493', '#FFF0F5'];
|
420
365
|
const createPetalParticles = (origin, config) => {
|
421
366
|
const { particleCount = 40, spread = 100, startVelocity = 8, colors = petalColors, elementSize = 20 } = config;
|
@@ -681,84 +626,6 @@ const renderPaintParticle = (particle) => {
|
|
681
626
|
} }))));
|
682
627
|
};
|
683
628
|
|
684
|
-
const musicColors = ['#FF006E', '#8338EC', '#3A86FF', '#FB5607', '#FFBE0B'];
|
685
|
-
const createMusicParticles = (origin, config) => {
|
686
|
-
const { particleCount = 20, spread = 100, startVelocity = 8, colors = musicColors, elementSize = 25 } = config;
|
687
|
-
const particles = [];
|
688
|
-
const notes = ['♪', '♫', '♬', '♩', '♭', '♯'];
|
689
|
-
for (let i = 0; i < particleCount; i++) {
|
690
|
-
const angle = randomInRange(-spread / 2, spread / 2) * (Math.PI / 180);
|
691
|
-
const velocity = randomInRange(startVelocity * 0.5, startVelocity);
|
692
|
-
particles.push({
|
693
|
-
id: generateId(),
|
694
|
-
x: origin.x + randomInRange(-20, 20),
|
695
|
-
y: origin.y,
|
696
|
-
vx: Math.sin(angle) * velocity * 0.3,
|
697
|
-
vy: -Math.abs(Math.cos(angle)) * velocity * 0.5, // Always go up slowly
|
698
|
-
life: config.lifetime || 200,
|
699
|
-
opacity: 1,
|
700
|
-
size: randomInRange(elementSize * 0.8, elementSize * 1.2),
|
701
|
-
rotation: i % notes.length, // Store which note to use
|
702
|
-
color: colors[Math.floor(Math.random() * colors.length)] || colors[0] || '#ffffff',
|
703
|
-
});
|
704
|
-
}
|
705
|
-
return particles;
|
706
|
-
};
|
707
|
-
const renderMusicParticle = (particle) => {
|
708
|
-
const notes = ['♪', '♫', '♬', '♩', '♭', '♯'];
|
709
|
-
const note = notes[Math.floor(particle.rotation)];
|
710
|
-
// Wave motion as notes float up
|
711
|
-
const waveX = Math.sin(particle.life * 0.05) * 20;
|
712
|
-
const wobble = Math.sin(particle.life * 0.1) * 10;
|
713
|
-
// Simple fade based on particle life
|
714
|
-
// Assume default lifetime of 300 if not set
|
715
|
-
const totalLife = 300;
|
716
|
-
const age = totalLife - particle.life; // How old the particle is
|
717
|
-
// Fade in during first 20 frames
|
718
|
-
const fadeIn = age < 20 ? age / 20 : 1;
|
719
|
-
// Fade out during last 50 frames
|
720
|
-
const fadeOut = particle.life < 50 ? particle.life / 50 : 1;
|
721
|
-
const opacity = Math.min(fadeIn, fadeOut) * particle.opacity;
|
722
|
-
return (React.createElement("div", { key: particle.id, style: {
|
723
|
-
fontSize: `${particle.size}px`,
|
724
|
-
fontWeight: 'bold',
|
725
|
-
position: 'relative',
|
726
|
-
transform: `
|
727
|
-
translateX(${waveX}px)
|
728
|
-
rotate(${wobble}deg)
|
729
|
-
scale(${0.8 + opacity * 0.2})
|
730
|
-
`,
|
731
|
-
color: particle.color,
|
732
|
-
opacity,
|
733
|
-
textShadow: `
|
734
|
-
0 0 10px ${particle.color}88,
|
735
|
-
0 0 20px ${particle.color}44,
|
736
|
-
2px 2px 3px rgba(0,0,0,0.3)
|
737
|
-
`,
|
738
|
-
transition: 'transform 0.3s ease',
|
739
|
-
userSelect: 'none',
|
740
|
-
} },
|
741
|
-
note,
|
742
|
-
React.createElement("div", { style: {
|
743
|
-
position: 'absolute',
|
744
|
-
top: '40%',
|
745
|
-
left: '-20%',
|
746
|
-
width: '140%',
|
747
|
-
height: '1px',
|
748
|
-
background: `linear-gradient(90deg, transparent, ${particle.color}33, transparent)`,
|
749
|
-
opacity: opacity * 0.5,
|
750
|
-
} }),
|
751
|
-
React.createElement("div", { style: {
|
752
|
-
position: 'absolute',
|
753
|
-
top: '60%',
|
754
|
-
left: '-20%',
|
755
|
-
width: '140%',
|
756
|
-
height: '1px',
|
757
|
-
background: `linear-gradient(90deg, transparent, ${particle.color}33, transparent)`,
|
758
|
-
opacity: opacity * 0.3,
|
759
|
-
} })));
|
760
|
-
};
|
761
|
-
|
762
629
|
const balloonColors = ['#FF006E', '#FB5607', '#FFBE0B', '#8338EC', '#3A86FF', '#06FFB4', '#FF4081'];
|
763
630
|
const createBalloonParticles = (origin, config) => {
|
764
631
|
const { particleCount = 15, spread = 80, startVelocity = 10, colors = balloonColors, elementSize = 35 } = config;
|
@@ -940,88 +807,6 @@ const renderGalaxyParticle = (particle) => {
|
|
940
807
|
} }))));
|
941
808
|
};
|
942
809
|
|
943
|
-
const matrixChars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZアイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワン';
|
944
|
-
const createMatrixParticles = (origin, config) => {
|
945
|
-
const { particleCount = 50, elementSize = 300 } = config;
|
946
|
-
const particles = [];
|
947
|
-
const columns = Math.floor(elementSize / 20);
|
948
|
-
for (let i = 0; i < columns; i++) {
|
949
|
-
const columnX = origin.x - elementSize / 2 + (i / columns) * elementSize;
|
950
|
-
const columnParticles = Math.floor(Math.random() * 15) + 10;
|
951
|
-
for (let j = 0; j < columnParticles; j++) {
|
952
|
-
const charIndex = Math.floor(Math.random() * matrixChars.length);
|
953
|
-
const speed = randomInRange(80, 120);
|
954
|
-
particles.push({
|
955
|
-
id: generateId(),
|
956
|
-
x: columnX + randomInRange(-10, 10),
|
957
|
-
y: origin.y - elementSize / 2 - j * 25 - randomInRange(0, 100),
|
958
|
-
vx: columnParticles, // Store columnHeight in vx (since we don't use horizontal movement)
|
959
|
-
vy: speed,
|
960
|
-
life: config.lifetime || 150,
|
961
|
-
opacity: 1,
|
962
|
-
size: 20 + (j * 0.1), // Store fadeDelay as decimal part
|
963
|
-
rotation: charIndex + (columnParticles * 1000), // Store charIndex and columnHeight
|
964
|
-
color: '#00ff00',
|
965
|
-
});
|
966
|
-
}
|
967
|
-
}
|
968
|
-
return particles.slice(0, particleCount);
|
969
|
-
};
|
970
|
-
const renderMatrixParticle = (particle) => {
|
971
|
-
// Extract stored values
|
972
|
-
const charIndex = Math.floor(particle.rotation % 1000);
|
973
|
-
const columnHeight = Math.floor(particle.rotation / 1000);
|
974
|
-
const fadeDelay = (particle.size - Math.floor(particle.size));
|
975
|
-
const character = matrixChars[charIndex] || matrixChars[0];
|
976
|
-
const brightness = 1 - (fadeDelay / columnHeight) * 0.5;
|
977
|
-
return (React.createElement("div", { key: particle.id, style: {
|
978
|
-
fontSize: '20px',
|
979
|
-
fontFamily: 'monospace',
|
980
|
-
fontWeight: 'bold',
|
981
|
-
color: `rgba(${0}, ${255 * brightness}, ${0}, ${particle.opacity})`,
|
982
|
-
textShadow: `0 0 10px rgba(0, ${255 * brightness}, 0, ${particle.opacity * 0.8})`,
|
983
|
-
userSelect: 'none',
|
984
|
-
} }, character));
|
985
|
-
};
|
986
|
-
|
987
|
-
const pixelColors = ['#FF0000', '#00FF00', '#0000FF', '#FFFF00', '#FF00FF', '#00FFFF', '#FFA500', '#FF1493'];
|
988
|
-
const createPixelParticles = (origin, config) => {
|
989
|
-
const { particleCount = 30, colors = pixelColors, elementSize = 20 } = config;
|
990
|
-
const particles = [];
|
991
|
-
const gridSize = Math.floor(Math.sqrt(particleCount));
|
992
|
-
const spacing = 30;
|
993
|
-
for (let i = 0; i < gridSize; i++) {
|
994
|
-
for (let j = 0; j < gridSize; j++) {
|
995
|
-
const targetX = origin.x + (i - gridSize / 2) * spacing;
|
996
|
-
const targetY = origin.y + (j - gridSize / 2) * spacing;
|
997
|
-
const angle = randomInRange(0, 360);
|
998
|
-
const velocity = randomInRange(150, 300);
|
999
|
-
particles.push({
|
1000
|
-
id: generateId(),
|
1001
|
-
x: targetX,
|
1002
|
-
y: targetY,
|
1003
|
-
vx: Math.cos(degreesToRadians(angle)) * velocity,
|
1004
|
-
vy: Math.sin(degreesToRadians(angle)) * velocity,
|
1005
|
-
life: config.lifetime || 150,
|
1006
|
-
opacity: 1,
|
1007
|
-
size: randomInRange(elementSize * 0.6, elementSize),
|
1008
|
-
// Store targetX offset in rotation (from -500 to 500, add 1000 to make positive)
|
1009
|
-
rotation: ((targetX - origin.x) + 500) + ((targetY - origin.y) + 500) * 1000,
|
1010
|
-
color: getRandomColor(colors),
|
1011
|
-
});
|
1012
|
-
}
|
1013
|
-
}
|
1014
|
-
return particles.slice(0, particleCount);
|
1015
|
-
};
|
1016
|
-
const renderPixelParticle = (particle) => {
|
1017
|
-
return (React.createElement("div", { key: particle.id, style: {
|
1018
|
-
width: `${particle.size}px`,
|
1019
|
-
height: `${particle.size}px`,
|
1020
|
-
backgroundColor: particle.color,
|
1021
|
-
boxShadow: `0 0 ${particle.size / 2}px ${particle.color}`,
|
1022
|
-
} }));
|
1023
|
-
};
|
1024
|
-
|
1025
810
|
const createGlitchParticles = (origin, config) => {
|
1026
811
|
const { particleCount = 20, elementSize = 200 } = config;
|
1027
812
|
const particles = [];
|
@@ -1084,119 +869,9 @@ const renderGlitchParticle = (particle) => {
|
|
1084
869
|
} }));
|
1085
870
|
};
|
1086
871
|
|
1087
|
-
const
|
1088
|
-
const faces = ['⚀', '⚁', '⚂', '⚃', '⚄', '⚅'];
|
1089
|
-
return faces[value - 1] || '⚀';
|
1090
|
-
};
|
1091
|
-
const createDiceParticles = (origin, config) => {
|
1092
|
-
const { particleCount = 8, startVelocity = 25, elementSize = 40 } = config;
|
1093
|
-
const particles = [];
|
1094
|
-
for (let i = 0; i < particleCount; i++) {
|
1095
|
-
const angle = randomInRange(0, 360);
|
1096
|
-
const velocity = randomInRange(startVelocity * 0.5, startVelocity);
|
1097
|
-
const diceValue = Math.floor(randomInRange(1, 7));
|
1098
|
-
particles.push({
|
1099
|
-
id: generateId(),
|
1100
|
-
x: origin.x,
|
1101
|
-
y: origin.y,
|
1102
|
-
vx: Math.cos(degreesToRadians(angle)) * velocity,
|
1103
|
-
vy: Math.sin(degreesToRadians(angle)) * velocity - 30,
|
1104
|
-
life: config.lifetime || 150,
|
1105
|
-
opacity: 1,
|
1106
|
-
size: randomInRange(elementSize * 0.8, elementSize * 1.2),
|
1107
|
-
// Store dice value (1-6) in lower bits, and rotation angles in upper bits
|
1108
|
-
rotation: diceValue + (Math.floor(randomInRange(0, 360)) * 10),
|
1109
|
-
color: '#ffffff',
|
1110
|
-
});
|
1111
|
-
}
|
1112
|
-
return particles;
|
1113
|
-
};
|
1114
|
-
const renderDiceParticle = (particle) => {
|
1115
|
-
const diceValue = particle.rotation % 10;
|
1116
|
-
const rotationAngle = Math.floor(particle.rotation / 10);
|
1117
|
-
return (React.createElement("div", { key: particle.id, style: {
|
1118
|
-
width: `${particle.size}px`,
|
1119
|
-
height: `${particle.size}px`,
|
1120
|
-
fontSize: `${particle.size * 0.8}px`,
|
1121
|
-
display: 'flex',
|
1122
|
-
alignItems: 'center',
|
1123
|
-
justifyContent: 'center',
|
1124
|
-
backgroundColor: '#fff',
|
1125
|
-
color: '#000',
|
1126
|
-
borderRadius: `${particle.size * 0.2}px`,
|
1127
|
-
transform: `rotate(${rotationAngle}deg)`,
|
1128
|
-
transformStyle: 'preserve-3d',
|
1129
|
-
boxShadow: '0 4px 8px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.5)',
|
1130
|
-
border: '2px solid #333',
|
1131
|
-
fontWeight: 'bold',
|
1132
|
-
} }, getDiceFace(diceValue)));
|
1133
|
-
};
|
1134
|
-
|
1135
|
-
const levelUpTexts = ['+1', '+10', '+100', 'XP', '+XP', 'LEVEL UP!', 'CRITICAL!', 'COMBO!', 'PERFECT!'];
|
1136
|
-
const levelUpColors = [
|
1137
|
-
{ text: '#FFD700', glow: '#FFA500' }, // Gold
|
1138
|
-
{ text: '#00FF00', glow: '#00AA00' }, // Green
|
1139
|
-
{ text: '#00FFFF', glow: '#0088FF' }, // Cyan
|
1140
|
-
{ text: '#FF00FF', glow: '#AA00AA' }, // Magenta
|
1141
|
-
{ text: '#FFFF00', glow: '#FFAA00' }, // Yellow
|
1142
|
-
];
|
1143
|
-
const createLevelUpParticles = (origin, config) => {
|
1144
|
-
const { particleCount = 10, startVelocity = 20, elementSize = 30 } = config;
|
1145
|
-
const particles = [];
|
1146
|
-
for (let i = 0; i < particleCount; i++) {
|
1147
|
-
const angle = randomInRange(-45, 45);
|
1148
|
-
const velocity = randomInRange(startVelocity * 0.5, startVelocity * 1.5);
|
1149
|
-
const colorSetIndex = Math.floor(Math.random() * levelUpColors.length);
|
1150
|
-
const colorSet = levelUpColors[colorSetIndex] || levelUpColors[0];
|
1151
|
-
const textIndex = Math.floor(Math.random() * levelUpTexts.length);
|
1152
|
-
const text = levelUpTexts[textIndex];
|
1153
|
-
const isMainText = text === 'LEVEL UP!' || text === 'CRITICAL!';
|
1154
|
-
const fontSize = isMainText ? randomInRange(elementSize * 1.3, elementSize * 2) : randomInRange(elementSize * 0.7, elementSize * 1.2);
|
1155
|
-
particles.push({
|
1156
|
-
id: generateId(),
|
1157
|
-
x: origin.x,
|
1158
|
-
y: origin.y,
|
1159
|
-
vx: Math.sin(degreesToRadians(angle)) * velocity,
|
1160
|
-
vy: -Math.cos(degreesToRadians(angle)) * velocity - 10,
|
1161
|
-
life: config.lifetime || 150,
|
1162
|
-
opacity: 1,
|
1163
|
-
size: fontSize, // Store fontSize in size
|
1164
|
-
// Store textIndex (0-8) + colorSetIndex (0-4) * 10 + delay (0-50) * 100
|
1165
|
-
rotation: textIndex + (colorSetIndex * 10) + (Math.floor(i * 5) * 100),
|
1166
|
-
color: colorSet.text,
|
1167
|
-
});
|
1168
|
-
}
|
1169
|
-
return particles;
|
1170
|
-
};
|
1171
|
-
const renderLevelUpParticle = (particle) => {
|
1172
|
-
// Extract encoded values
|
1173
|
-
const textIndex = particle.rotation % 10;
|
1174
|
-
const colorSetIndex = Math.floor((particle.rotation % 100) / 10);
|
1175
|
-
const delay = Math.floor(particle.rotation / 100) / 100;
|
1176
|
-
const text = levelUpTexts[textIndex] || levelUpTexts[0];
|
1177
|
-
const colorSet = levelUpColors[colorSetIndex] || levelUpColors[0];
|
1178
|
-
return (React.createElement("div", { key: particle.id, style: {
|
1179
|
-
fontSize: `${particle.size}px`,
|
1180
|
-
fontWeight: 'bold',
|
1181
|
-
fontFamily: 'Arial, sans-serif',
|
1182
|
-
color: particle.color,
|
1183
|
-
textShadow: `
|
1184
|
-
0 0 10px ${colorSet.glow},
|
1185
|
-
0 0 20px ${colorSet.glow},
|
1186
|
-
0 0 30px ${particle.color},
|
1187
|
-
0 2px 4px rgba(0,0,0,0.5)
|
1188
|
-
`,
|
1189
|
-
letterSpacing: '2px',
|
1190
|
-
textTransform: 'uppercase',
|
1191
|
-
whiteSpace: 'nowrap',
|
1192
|
-
userSelect: 'none',
|
1193
|
-
animationDelay: `${delay}s`,
|
1194
|
-
} }, text));
|
1195
|
-
};
|
1196
|
-
|
1197
|
-
const defaultColors$e = ['#9C27B0', '#E91E63', '#FF00FF', '#00FFFF', '#FFD700', '#FF69B4', '#DA70D6', '#9370DB'];
|
872
|
+
const defaultColors$2 = ['#9C27B0', '#E91E63', '#FF00FF', '#00FFFF', '#FFD700', '#FF69B4', '#DA70D6', '#9370DB'];
|
1198
873
|
const createMagicDustParticles = (origin, config) => {
|
1199
|
-
const { particleCount = 40, startVelocity = 8, colors = defaultColors$
|
874
|
+
const { particleCount = 40, startVelocity = 8, colors = defaultColors$2, elementSize = 12 } = config;
|
1200
875
|
const particles = [];
|
1201
876
|
for (let i = 0; i < particleCount; i++) {
|
1202
877
|
// Create particles in a circular pattern with some randomness
|
@@ -1267,97 +942,9 @@ const renderMagicDustParticle = (particle) => {
|
|
1267
942
|
} }))));
|
1268
943
|
};
|
1269
944
|
|
1270
|
-
const defaultColors$
|
1271
|
-
const createGhostParticles = (origin, config) => {
|
1272
|
-
const { particleCount = 8, startVelocity = 5, colors = defaultColors$d, elementSize = 30 } = config;
|
1273
|
-
const particles = [];
|
1274
|
-
for (let i = 0; i < particleCount; i++) {
|
1275
|
-
// Ghosts float upward with slight horizontal movement
|
1276
|
-
const angle = randomInRange(250, 290); // Mostly upward
|
1277
|
-
const velocity = randomInRange(startVelocity * 0.5, startVelocity);
|
1278
|
-
const color = getRandomColor(colors);
|
1279
|
-
particles.push({
|
1280
|
-
id: generateId(),
|
1281
|
-
x: origin.x + randomInRange(-50, 50),
|
1282
|
-
y: origin.y + randomInRange(-20, 20),
|
1283
|
-
vx: Math.cos(degreesToRadians(angle)) * velocity,
|
1284
|
-
vy: Math.sin(degreesToRadians(angle)) * velocity,
|
1285
|
-
life: config.lifetime || 200,
|
1286
|
-
opacity: randomInRange(0.5, 0.8),
|
1287
|
-
size: randomInRange(elementSize * 0.8, elementSize * 1.2),
|
1288
|
-
rotation: randomInRange(-15, 15),
|
1289
|
-
color,
|
1290
|
-
});
|
1291
|
-
}
|
1292
|
-
return particles;
|
1293
|
-
};
|
1294
|
-
const renderGhostParticle = (particle) => {
|
1295
|
-
// Calculate wave effect for tail
|
1296
|
-
const waveOffset = Math.sin(Date.now() * 0.003 + particle.x * 0.01) * 3;
|
1297
|
-
return (React.createElement("div", { key: particle.id, style: {
|
1298
|
-
width: `${particle.size}px`,
|
1299
|
-
height: `${particle.size * 1.4}px`,
|
1300
|
-
position: 'relative',
|
1301
|
-
transform: `rotate(${particle.rotation}deg)`,
|
1302
|
-
} },
|
1303
|
-
React.createElement("div", { style: {
|
1304
|
-
position: 'absolute',
|
1305
|
-
width: '100%',
|
1306
|
-
height: '70%',
|
1307
|
-
backgroundColor: particle.color,
|
1308
|
-
borderRadius: '50% 50% 0 0',
|
1309
|
-
boxShadow: `0 0 20px rgba(255, 255, 255, 0.5), inset 0 0 10px rgba(0, 0, 0, 0.1)`,
|
1310
|
-
} }),
|
1311
|
-
React.createElement("div", { style: {
|
1312
|
-
position: 'absolute',
|
1313
|
-
bottom: 0,
|
1314
|
-
width: '100%',
|
1315
|
-
height: '40%',
|
1316
|
-
backgroundColor: particle.color,
|
1317
|
-
clipPath: `polygon(
|
1318
|
-
0 0,
|
1319
|
-
100% 0,
|
1320
|
-
100% 60%,
|
1321
|
-
${75 + waveOffset}% 80%,
|
1322
|
-
${50 - waveOffset}% 100%,
|
1323
|
-
${25 + waveOffset}% 80%,
|
1324
|
-
0 60%
|
1325
|
-
)`,
|
1326
|
-
} }),
|
1327
|
-
React.createElement("div", { style: {
|
1328
|
-
position: 'absolute',
|
1329
|
-
top: '30%',
|
1330
|
-
left: '25%',
|
1331
|
-
width: '15%',
|
1332
|
-
height: '15%',
|
1333
|
-
backgroundColor: '#000',
|
1334
|
-
borderRadius: '50%',
|
1335
|
-
} }),
|
1336
|
-
React.createElement("div", { style: {
|
1337
|
-
position: 'absolute',
|
1338
|
-
top: '30%',
|
1339
|
-
right: '25%',
|
1340
|
-
width: '15%',
|
1341
|
-
height: '15%',
|
1342
|
-
backgroundColor: '#000',
|
1343
|
-
borderRadius: '50%',
|
1344
|
-
} }),
|
1345
|
-
React.createElement("div", { style: {
|
1346
|
-
position: 'absolute',
|
1347
|
-
top: '45%',
|
1348
|
-
left: '50%',
|
1349
|
-
transform: 'translateX(-50%)',
|
1350
|
-
width: '25%',
|
1351
|
-
height: '15%',
|
1352
|
-
border: '2px solid #000',
|
1353
|
-
borderTop: 'none',
|
1354
|
-
borderRadius: '0 0 50% 50%',
|
1355
|
-
} })));
|
1356
|
-
};
|
1357
|
-
|
1358
|
-
const defaultColors$c = ['#FF1493', '#00CED1', '#FFD700', '#FF69B4', '#7B68EE', '#00FA9A', '#FF6347', '#4169E1'];
|
945
|
+
const defaultColors$1 = ['#FF1493', '#00CED1', '#FFD700', '#FF69B4', '#7B68EE', '#00FA9A', '#FF6347', '#4169E1'];
|
1359
946
|
const createCrystalParticles = (origin, config) => {
|
1360
|
-
const { particleCount = 15, startVelocity = 15, colors = defaultColors$
|
947
|
+
const { particleCount = 15, startVelocity = 15, colors = defaultColors$1, elementSize = 25 } = config;
|
1361
948
|
const particles = [];
|
1362
949
|
for (let i = 0; i < particleCount; i++) {
|
1363
950
|
// Crystals explode outward and fall with gravity
|
@@ -1429,288 +1016,9 @@ const renderCrystalParticle = (particle) => {
|
|
1429
1016
|
} })));
|
1430
1017
|
};
|
1431
1018
|
|
1432
|
-
const defaultColors
|
1433
|
-
const createDragonParticles = (origin, config) => {
|
1434
|
-
const { particleCount = 6, startVelocity = 12, colors = defaultColors$b, elementSize = 40 } = config;
|
1435
|
-
const particles = [];
|
1436
|
-
for (let i = 0; i < particleCount; i++) {
|
1437
|
-
// Dragons fly in various directions with swooping motion
|
1438
|
-
const angle = randomInRange(0, 360);
|
1439
|
-
const velocity = randomInRange(startVelocity * 0.7, startVelocity);
|
1440
|
-
const color = getRandomColor(colors);
|
1441
|
-
particles.push({
|
1442
|
-
id: generateId(),
|
1443
|
-
x: origin.x + randomInRange(-30, 30),
|
1444
|
-
y: origin.y + randomInRange(-30, 30),
|
1445
|
-
vx: Math.cos(degreesToRadians(angle)) * velocity,
|
1446
|
-
vy: Math.sin(degreesToRadians(angle)) * velocity,
|
1447
|
-
life: config.lifetime || 180,
|
1448
|
-
opacity: 1,
|
1449
|
-
size: randomInRange(elementSize * 0.8, elementSize),
|
1450
|
-
rotation: angle,
|
1451
|
-
color,
|
1452
|
-
});
|
1453
|
-
}
|
1454
|
-
return particles;
|
1455
|
-
};
|
1456
|
-
const renderDragonParticle = (particle) => {
|
1457
|
-
// Calculate wing flap animation
|
1458
|
-
const wingFlap = Math.sin(Date.now() * 0.01 + particle.x) * 10;
|
1459
|
-
// Calculate fire breath pulse
|
1460
|
-
const firePulse = (Math.sin(Date.now() * 0.005 + particle.y) + 1) / 2;
|
1461
|
-
return (React.createElement("div", { key: particle.id, style: {
|
1462
|
-
width: `${particle.size}px`,
|
1463
|
-
height: `${particle.size}px`,
|
1464
|
-
position: 'relative',
|
1465
|
-
transform: `rotate(${particle.rotation}deg)`,
|
1466
|
-
} },
|
1467
|
-
React.createElement("div", { style: {
|
1468
|
-
position: 'absolute',
|
1469
|
-
width: '60%',
|
1470
|
-
height: '40%',
|
1471
|
-
top: '30%',
|
1472
|
-
left: '20%',
|
1473
|
-
backgroundColor: particle.color,
|
1474
|
-
borderRadius: '50% 40% 40% 50%',
|
1475
|
-
boxShadow: `0 2px 10px rgba(0, 0, 0, 0.3)`,
|
1476
|
-
} }),
|
1477
|
-
React.createElement("div", { style: {
|
1478
|
-
position: 'absolute',
|
1479
|
-
width: '35%',
|
1480
|
-
height: '35%',
|
1481
|
-
top: '25%',
|
1482
|
-
right: '15%',
|
1483
|
-
backgroundColor: particle.color,
|
1484
|
-
borderRadius: '40% 50% 50% 40%',
|
1485
|
-
transform: 'rotate(-10deg)',
|
1486
|
-
} },
|
1487
|
-
React.createElement("div", { style: {
|
1488
|
-
position: 'absolute',
|
1489
|
-
width: '20%',
|
1490
|
-
height: '20%',
|
1491
|
-
top: '30%',
|
1492
|
-
right: '25%',
|
1493
|
-
backgroundColor: '#FFD700',
|
1494
|
-
borderRadius: '50%',
|
1495
|
-
boxShadow: '0 0 4px #FFD700',
|
1496
|
-
} })),
|
1497
|
-
React.createElement("div", { style: {
|
1498
|
-
position: 'absolute',
|
1499
|
-
width: '40%',
|
1500
|
-
height: '50%',
|
1501
|
-
top: '15%',
|
1502
|
-
left: '30%',
|
1503
|
-
backgroundColor: `${particle.color}CC`,
|
1504
|
-
clipPath: 'polygon(0% 100%, 50% 0%, 100% 30%, 90% 60%, 100% 90%, 50% 100%)',
|
1505
|
-
transform: `rotateX(${wingFlap}deg)`,
|
1506
|
-
transformOrigin: 'bottom center',
|
1507
|
-
} }),
|
1508
|
-
React.createElement("div", { style: {
|
1509
|
-
position: 'absolute',
|
1510
|
-
width: '40%',
|
1511
|
-
height: '50%',
|
1512
|
-
top: '35%',
|
1513
|
-
left: '30%',
|
1514
|
-
backgroundColor: `${particle.color}AA`,
|
1515
|
-
clipPath: 'polygon(0% 0%, 50% 0%, 100% 30%, 90% 60%, 100% 90%, 50% 100%)',
|
1516
|
-
transform: `rotateX(${-wingFlap}deg)`,
|
1517
|
-
transformOrigin: 'top center',
|
1518
|
-
} }),
|
1519
|
-
React.createElement("div", { style: {
|
1520
|
-
position: 'absolute',
|
1521
|
-
width: '40%',
|
1522
|
-
height: '15%',
|
1523
|
-
top: '35%',
|
1524
|
-
left: '5%',
|
1525
|
-
backgroundColor: particle.color,
|
1526
|
-
clipPath: 'polygon(0% 50%, 70% 0%, 100% 20%, 100% 80%, 70% 100%, 0% 50%)',
|
1527
|
-
} }),
|
1528
|
-
React.createElement("div", { style: {
|
1529
|
-
position: 'absolute',
|
1530
|
-
width: '30%',
|
1531
|
-
height: '20%',
|
1532
|
-
top: '35%',
|
1533
|
-
right: '5%',
|
1534
|
-
background: `radial-gradient(ellipse, #FFD700 0%, #FF4500 50%, transparent 100%)`,
|
1535
|
-
transform: `scale(${0.8 + firePulse * 0.4})`,
|
1536
|
-
opacity: 0.8 + firePulse * 0.2,
|
1537
|
-
filter: 'blur(1px)',
|
1538
|
-
} }),
|
1539
|
-
React.createElement("div", { style: {
|
1540
|
-
position: 'absolute',
|
1541
|
-
width: '25%',
|
1542
|
-
height: '15%',
|
1543
|
-
top: '37%',
|
1544
|
-
right: '0%',
|
1545
|
-
background: `radial-gradient(ellipse, #FFA500 0%, #FF6347 50%, transparent 100%)`,
|
1546
|
-
transform: `scale(${0.6 + firePulse * 0.6})`,
|
1547
|
-
opacity: 0.6 + firePulse * 0.4,
|
1548
|
-
filter: 'blur(2px)',
|
1549
|
-
} })));
|
1550
|
-
};
|
1551
|
-
|
1552
|
-
const defaultColors$a = ['#9C27B0', '#673AB7', '#3F51B5', '#00BCD4', '#4CAF50', '#FFEB3B', '#FF9800'];
|
1553
|
-
// Ancient rune symbols
|
1554
|
-
const runeSymbols = [
|
1555
|
-
'ᚠ', 'ᚢ', 'ᚦ', 'ᚨ', 'ᚱ', 'ᚲ', 'ᚷ', 'ᚹ', 'ᚺ', 'ᚾ', 'ᛁ', 'ᛃ', 'ᛇ', 'ᛈ', 'ᛉ', 'ᛋ', 'ᛏ', 'ᛒ', 'ᛖ', 'ᛗ', 'ᛚ', 'ᛜ', 'ᛞ', 'ᛟ'
|
1556
|
-
];
|
1557
|
-
const createRuneParticles = (origin, config) => {
|
1558
|
-
const { particleCount = 12, startVelocity = 6, colors = defaultColors$a, elementSize = 35 } = config;
|
1559
|
-
const particles = [];
|
1560
|
-
for (let i = 0; i < particleCount; i++) {
|
1561
|
-
// Runes float upward in a mystical pattern
|
1562
|
-
const angle = randomInRange(250, 290); // Mostly upward
|
1563
|
-
const velocity = randomInRange(startVelocity * 0.3, startVelocity * 0.7);
|
1564
|
-
const color = getRandomColor(colors);
|
1565
|
-
// Create circular spawn pattern
|
1566
|
-
const spawnAngle = (i / particleCount) * 360;
|
1567
|
-
const spawnRadius = randomInRange(20, 60);
|
1568
|
-
const runeIndex = Math.floor(Math.random() * runeSymbols.length);
|
1569
|
-
particles.push({
|
1570
|
-
id: generateId(),
|
1571
|
-
x: origin.x + Math.cos(degreesToRadians(spawnAngle)) * spawnRadius,
|
1572
|
-
y: origin.y + Math.sin(degreesToRadians(spawnAngle)) * spawnRadius,
|
1573
|
-
vx: Math.cos(degreesToRadians(angle)) * velocity + randomInRange(-1, 1),
|
1574
|
-
vy: Math.sin(degreesToRadians(angle)) * velocity,
|
1575
|
-
life: config.lifetime || 160,
|
1576
|
-
opacity: 0,
|
1577
|
-
size: randomInRange(elementSize * 0.8, elementSize * 1.2),
|
1578
|
-
// Store runeIndex in lower bits of rotation, keep rotation angle in upper bits
|
1579
|
-
rotation: runeIndex + (Math.floor(randomInRange(0, 360)) * 100),
|
1580
|
-
color,
|
1581
|
-
});
|
1582
|
-
}
|
1583
|
-
return particles;
|
1584
|
-
};
|
1585
|
-
const renderRuneParticle = (particle) => {
|
1586
|
-
// Extract rune index and rotation from encoded value
|
1587
|
-
const runeIndex = particle.rotation % 100;
|
1588
|
-
const rotationAngle = Math.floor(particle.rotation / 100);
|
1589
|
-
const runeSymbol = runeSymbols[runeIndex] || runeSymbols[0];
|
1590
|
-
// Calculate pulsing glow effect
|
1591
|
-
const glowIntensity = (Math.sin(Date.now() * 0.003 + particle.x * 0.01) + 1) / 2;
|
1592
|
-
// Fade in and out based on life
|
1593
|
-
const fadeProgress = particle.life > 120 ? (160 - particle.life) / 40 : particle.life < 40 ? particle.life / 40 : 1;
|
1594
|
-
return (React.createElement("div", { key: particle.id, style: {
|
1595
|
-
width: `${particle.size}px`,
|
1596
|
-
height: `${particle.size}px`,
|
1597
|
-
position: 'relative',
|
1598
|
-
transform: `rotate(${rotationAngle}deg)`,
|
1599
|
-
opacity: fadeProgress,
|
1600
|
-
} },
|
1601
|
-
React.createElement("div", { style: {
|
1602
|
-
position: 'absolute',
|
1603
|
-
width: '100%',
|
1604
|
-
height: '100%',
|
1605
|
-
borderRadius: '50%',
|
1606
|
-
background: `radial-gradient(circle, ${particle.color}44 0%, transparent 70%)`,
|
1607
|
-
transform: `scale(${1.5 + glowIntensity * 0.5})`,
|
1608
|
-
filter: 'blur(4px)',
|
1609
|
-
} }),
|
1610
|
-
React.createElement("div", { style: {
|
1611
|
-
position: 'absolute',
|
1612
|
-
width: '100%',
|
1613
|
-
height: '100%',
|
1614
|
-
borderRadius: '50%',
|
1615
|
-
background: `radial-gradient(circle, ${particle.color}88 0%, ${particle.color}44 50%, transparent 100%)`,
|
1616
|
-
transform: `scale(${1.2 + glowIntensity * 0.3})`,
|
1617
|
-
} }),
|
1618
|
-
React.createElement("div", { style: {
|
1619
|
-
position: 'absolute',
|
1620
|
-
width: '100%',
|
1621
|
-
height: '100%',
|
1622
|
-
display: 'flex',
|
1623
|
-
alignItems: 'center',
|
1624
|
-
justifyContent: 'center',
|
1625
|
-
fontSize: `${particle.size * 0.7}px`,
|
1626
|
-
fontWeight: 'bold',
|
1627
|
-
color: '#FFFFFF',
|
1628
|
-
textShadow: `
|
1629
|
-
0 0 10px ${particle.color},
|
1630
|
-
0 0 20px ${particle.color},
|
1631
|
-
0 0 30px ${particle.color},
|
1632
|
-
0 0 40px ${particle.color}
|
1633
|
-
`,
|
1634
|
-
filter: `brightness(${1.5 + glowIntensity * 0.5})`,
|
1635
|
-
} }, runeSymbol),
|
1636
|
-
[0, 72, 144, 216, 288].map((angle, index) => (React.createElement("div", { key: index, style: {
|
1637
|
-
position: 'absolute',
|
1638
|
-
width: '4px',
|
1639
|
-
height: '4px',
|
1640
|
-
backgroundColor: '#FFFFFF',
|
1641
|
-
borderRadius: '50%',
|
1642
|
-
top: '50%',
|
1643
|
-
left: '50%',
|
1644
|
-
transform: `
|
1645
|
-
translate(-50%, -50%)
|
1646
|
-
rotate(${angle + rotationAngle}deg)
|
1647
|
-
translateY(-${particle.size * 0.6}px)
|
1648
|
-
scale(${0.5 + glowIntensity})
|
1649
|
-
`,
|
1650
|
-
boxShadow: '0 0 6px #FFFFFF',
|
1651
|
-
opacity: glowIntensity,
|
1652
|
-
} })))));
|
1653
|
-
};
|
1654
|
-
|
1655
|
-
const defaultColors$9 = ['#FF6B6B', '#4ECDC4', '#45B7D1', '#F7DC6F', '#BB8FCE'];
|
1656
|
-
const createButterflyParticles = (origin, config) => {
|
1657
|
-
const { particleCount = 6, startVelocity = 3, colors = defaultColors$9, elementSize = 40 } = config;
|
1658
|
-
const particles = [];
|
1659
|
-
for (let i = 0; i < particleCount; i++) {
|
1660
|
-
const angle = randomInRange(0, 360);
|
1661
|
-
const velocity = randomInRange(startVelocity * 0.5, startVelocity);
|
1662
|
-
particles.push({
|
1663
|
-
id: generateId(),
|
1664
|
-
x: origin.x + randomInRange(-50, 50),
|
1665
|
-
y: origin.y + randomInRange(-30, 30),
|
1666
|
-
vx: Math.cos(angle * Math.PI / 180) * velocity,
|
1667
|
-
vy: -Math.abs(Math.sin(angle * Math.PI / 180) * velocity * 0.5), // Float upward
|
1668
|
-
life: config.lifetime || 200,
|
1669
|
-
opacity: 1,
|
1670
|
-
size: randomInRange(elementSize * 0.8, elementSize * 1.2),
|
1671
|
-
// Encode wing phase (0-360), wobble phase (0-360), and rotation speed (-10 to 10)
|
1672
|
-
rotation: Math.floor(randomInRange(0, 360)) + (Math.floor(randomInRange(0, 360)) * 1000) + ((Math.floor(randomInRange(-10, 10)) + 10) * 1000000),
|
1673
|
-
color: getRandomColor(colors),
|
1674
|
-
});
|
1675
|
-
}
|
1676
|
-
return particles;
|
1677
|
-
};
|
1678
|
-
const renderButterflyParticle = (particle) => {
|
1679
|
-
// Extract encoded values
|
1680
|
-
const wingPhase = (particle.rotation % 1000);
|
1681
|
-
const wobblePhase = Math.floor((particle.rotation % 1000000) / 1000);
|
1682
|
-
const rotationSpeed = (Math.floor(particle.rotation / 1000000) - 10) / 10;
|
1683
|
-
// Calculate wing flapping and wobble
|
1684
|
-
const wingAngle = Math.sin((Date.now() * 0.01 + wingPhase) * Math.PI / 180) * 30;
|
1685
|
-
const wobbleX = Math.sin((Date.now() * 0.003 + wobblePhase) * Math.PI / 180) * 10;
|
1686
|
-
const rotation = (Date.now() * rotationSpeed * 0.01) % 360;
|
1687
|
-
return (React.createElement("div", { key: particle.id, style: {
|
1688
|
-
width: `${particle.size}px`,
|
1689
|
-
height: `${particle.size}px`,
|
1690
|
-
position: 'relative',
|
1691
|
-
transform: `translateX(${wobbleX}px) rotate(${rotation}deg)`,
|
1692
|
-
} },
|
1693
|
-
React.createElement("svg", { width: particle.size, height: particle.size, viewBox: "-25 -25 50 50", style: {
|
1694
|
-
position: 'absolute',
|
1695
|
-
top: 0,
|
1696
|
-
left: 0,
|
1697
|
-
} },
|
1698
|
-
React.createElement("ellipse", { cx: "-8", cy: "0", rx: "12", ry: "18", fill: particle.color, opacity: "0.8", transform: `rotate(${-wingAngle} 0 0)` }),
|
1699
|
-
React.createElement("ellipse", { cx: "-6", cy: "-10", rx: "8", ry: "12", fill: particle.color, opacity: "0.6", transform: `rotate(${-wingAngle - 15} 0 0)` }),
|
1700
|
-
React.createElement("ellipse", { cx: "8", cy: "0", rx: "12", ry: "18", fill: particle.color, opacity: "0.8", transform: `rotate(${wingAngle} 0 0)` }),
|
1701
|
-
React.createElement("ellipse", { cx: "6", cy: "-10", rx: "8", ry: "12", fill: particle.color, opacity: "0.6", transform: `rotate(${wingAngle + 15} 0 0)` }),
|
1702
|
-
React.createElement("ellipse", { cx: "0", cy: "0", rx: "3", ry: "15", fill: "#333" }),
|
1703
|
-
React.createElement("line", { x1: "0", y1: "-12", x2: "-3", y2: "-18", stroke: "#333", strokeWidth: "1" }),
|
1704
|
-
React.createElement("line", { x1: "0", y1: "-12", x2: "3", y2: "-18", stroke: "#333", strokeWidth: "1" }),
|
1705
|
-
React.createElement("circle", { cx: "-8", cy: "0", r: "3", fill: "white", opacity: "0.4" }),
|
1706
|
-
React.createElement("circle", { cx: "8", cy: "0", r: "3", fill: "white", opacity: "0.4" }),
|
1707
|
-
React.createElement("circle", { cx: "-6", cy: "-8", r: "2", fill: "black", opacity: "0.3" }),
|
1708
|
-
React.createElement("circle", { cx: "6", cy: "-8", r: "2", fill: "black", opacity: "0.3" }))));
|
1709
|
-
};
|
1710
|
-
|
1711
|
-
const defaultColors$8 = ['#D2691E', '#CD853F', '#8B4513', '#A0522D', '#FF8C00', '#FF6347'];
|
1019
|
+
const defaultColors = ['#D2691E', '#CD853F', '#8B4513', '#A0522D', '#FF8C00', '#FF6347'];
|
1712
1020
|
const createLeafParticles = (origin, config) => {
|
1713
|
-
const { particleCount = 10, colors = defaultColors
|
1021
|
+
const { particleCount = 10, colors = defaultColors, elementSize = 25 } = config;
|
1714
1022
|
const particles = [];
|
1715
1023
|
for (let i = 0; i < particleCount; i++) {
|
1716
1024
|
particles.push({
|
@@ -1765,428 +1073,6 @@ const renderLeafParticle = (particle) => {
|
|
1765
1073
|
React.createElement("line", { x1: "0", y1: particle.size / 4, x2: particle.size / 4, y2: particle.size / 8, stroke: "#8B4513", strokeWidth: "0.5", opacity: "0.5" }))));
|
1766
1074
|
};
|
1767
1075
|
|
1768
|
-
const defaultColors$7 = ['#4A90E2', '#5BA0F2', '#6BB0FF', '#3A80D2'];
|
1769
|
-
const createRainParticles = (origin, config) => {
|
1770
|
-
const { particleCount = 50, colors = defaultColors$7, elementSize = 300 } = config;
|
1771
|
-
const particles = [];
|
1772
|
-
for (let i = 0; i < particleCount; i++) {
|
1773
|
-
particles.push({
|
1774
|
-
id: generateId(),
|
1775
|
-
x: randomInRange(origin.x - elementSize / 2, origin.x + elementSize / 2),
|
1776
|
-
y: origin.y - randomInRange(0, elementSize),
|
1777
|
-
vx: randomInRange(-0.5, 0.5),
|
1778
|
-
vy: randomInRange(8, 12),
|
1779
|
-
life: config.lifetime || 150,
|
1780
|
-
opacity: randomInRange(0.3, 0.7),
|
1781
|
-
size: randomInRange(2, 4),
|
1782
|
-
// Encode: length (15-25) + splashing state (0 or 1) * 100 + splash frame (0-15) * 1000
|
1783
|
-
rotation: Math.floor(randomInRange(15, 25)),
|
1784
|
-
color: getRandomColor(colors),
|
1785
|
-
});
|
1786
|
-
}
|
1787
|
-
return particles;
|
1788
|
-
};
|
1789
|
-
const renderRainParticle = (particle) => {
|
1790
|
-
// Extract encoded values
|
1791
|
-
const length = particle.rotation % 100;
|
1792
|
-
const isSplashing = Math.floor((particle.rotation % 1000) / 100) === 1;
|
1793
|
-
const splashFrame = Math.floor(particle.rotation / 1000);
|
1794
|
-
// Render splash effect
|
1795
|
-
if (isSplashing && splashFrame < 15) {
|
1796
|
-
const splashRadius = splashFrame * 2;
|
1797
|
-
const splashOpacity = Math.max(0, 1 - splashFrame / 15) * 0.5;
|
1798
|
-
return (React.createElement("div", { key: particle.id, style: { position: 'relative' } },
|
1799
|
-
React.createElement("svg", { width: splashRadius * 4, height: splashRadius * 2, style: {
|
1800
|
-
position: 'absolute',
|
1801
|
-
left: -splashRadius * 2,
|
1802
|
-
top: -splashRadius,
|
1803
|
-
} },
|
1804
|
-
React.createElement("ellipse", { cx: splashRadius * 2, cy: splashRadius, rx: splashRadius, ry: splashRadius / 3, fill: "none", stroke: particle.color, strokeWidth: "1", opacity: splashOpacity }),
|
1805
|
-
[0, 1, 2, 3].map((i) => {
|
1806
|
-
const angle = (i * 90 + 45) * Math.PI / 180;
|
1807
|
-
const distance = splashFrame * 1.5;
|
1808
|
-
const dropX = splashRadius * 2 + Math.cos(angle) * distance;
|
1809
|
-
const dropY = splashRadius - Math.sin(angle) * distance + splashFrame * 0.5;
|
1810
|
-
return (React.createElement("circle", { key: i, cx: dropX, cy: dropY, r: "1.5", fill: particle.color, opacity: splashOpacity }));
|
1811
|
-
}))));
|
1812
|
-
}
|
1813
|
-
// Render falling raindrop
|
1814
|
-
return (React.createElement("div", { key: particle.id, style: { position: 'relative' } },
|
1815
|
-
React.createElement("svg", { width: particle.size * 2, height: length + particle.size * 3, style: {
|
1816
|
-
position: 'absolute',
|
1817
|
-
left: -particle.size,
|
1818
|
-
top: -length,
|
1819
|
-
} },
|
1820
|
-
React.createElement("line", { x1: particle.size, y1: 0, x2: particle.size, y2: length, stroke: particle.color, strokeWidth: particle.size, strokeLinecap: "round", opacity: particle.opacity * 0.3 }),
|
1821
|
-
React.createElement("ellipse", { cx: particle.size, cy: length + particle.size * 1.5, rx: particle.size, ry: particle.size * 1.5, fill: particle.color, opacity: particle.opacity }))));
|
1822
|
-
};
|
1823
|
-
|
1824
|
-
const defaultColors$6 = ['#FFFFFF', '#F5F5F5', '#FAFAFA'];
|
1825
|
-
const createDandelionParticles = (origin, config) => {
|
1826
|
-
const { particleCount = 15, colors = defaultColors$6, elementSize = 15 } = config;
|
1827
|
-
const particles = [];
|
1828
|
-
for (let i = 0; i < particleCount; i++) {
|
1829
|
-
particles.push({
|
1830
|
-
id: generateId(),
|
1831
|
-
x: origin.x + randomInRange(-20, 20),
|
1832
|
-
y: origin.y + randomInRange(-20, 20),
|
1833
|
-
vx: randomInRange(-2, 2),
|
1834
|
-
vy: randomInRange(-1, -0.3),
|
1835
|
-
life: config.lifetime || 200,
|
1836
|
-
opacity: 1,
|
1837
|
-
size: randomInRange(elementSize * 0.8, elementSize * 1.2),
|
1838
|
-
// Encode: rotation angle + float phase * 1000 + drift phase * 1000000
|
1839
|
-
rotation: Math.floor(randomInRange(0, 360)) +
|
1840
|
-
(Math.floor(randomInRange(0, 360)) * 1000) +
|
1841
|
-
(Math.floor(randomInRange(0, 360)) * 1000000),
|
1842
|
-
color: getRandomColor(colors),
|
1843
|
-
});
|
1844
|
-
}
|
1845
|
-
return particles;
|
1846
|
-
};
|
1847
|
-
const renderDandelionParticle = (particle) => {
|
1848
|
-
// Extract encoded values
|
1849
|
-
const rotationAngle = particle.rotation % 1000;
|
1850
|
-
const floatPhase = Math.floor((particle.rotation % 1000000) / 1000);
|
1851
|
-
const driftPhase = Math.floor(particle.rotation / 1000000);
|
1852
|
-
// Calculate floating effects
|
1853
|
-
const floatY = Math.sin((Date.now() * 0.002 + floatPhase) * Math.PI / 180) * 5;
|
1854
|
-
const driftX = Math.sin((Date.now() * 0.001 + driftPhase) * Math.PI / 180) * 3;
|
1855
|
-
const rotation = (Date.now() * 0.01 + rotationAngle) % 360;
|
1856
|
-
const seedCount = 7;
|
1857
|
-
return (React.createElement("div", { key: particle.id, style: {
|
1858
|
-
width: `${particle.size * 2}px`,
|
1859
|
-
height: `${particle.size * 2}px`,
|
1860
|
-
position: 'relative',
|
1861
|
-
transform: `translate(${driftX}px, ${floatY}px) rotate(${rotation}deg)`,
|
1862
|
-
opacity: particle.opacity,
|
1863
|
-
} },
|
1864
|
-
React.createElement("svg", { width: particle.size * 2, height: particle.size * 2, viewBox: `-${particle.size} -${particle.size} ${particle.size * 2} ${particle.size * 2}`, style: {
|
1865
|
-
position: 'absolute',
|
1866
|
-
top: 0,
|
1867
|
-
left: 0,
|
1868
|
-
} },
|
1869
|
-
React.createElement("circle", { cx: "0", cy: "0", r: "2", fill: "#F5F5DC" }),
|
1870
|
-
Array.from({ length: seedCount }).map((_, i) => {
|
1871
|
-
const angle = (i * 360 / seedCount) * Math.PI / 180;
|
1872
|
-
const endX = Math.cos(angle) * particle.size;
|
1873
|
-
const endY = Math.sin(angle) * particle.size;
|
1874
|
-
const midX = Math.cos(angle) * particle.size * 0.7;
|
1875
|
-
const midY = Math.sin(angle) * particle.size * 0.7;
|
1876
|
-
return (React.createElement("g", { key: i },
|
1877
|
-
React.createElement("line", { x1: "0", y1: "0", x2: endX, y2: endY, stroke: "#E5E5E5", strokeWidth: "0.5", opacity: "0.8" }),
|
1878
|
-
React.createElement("circle", { cx: endX, cy: endY, r: "3", fill: particle.color, opacity: "0.6" }),
|
1879
|
-
React.createElement("circle", { cx: midX, cy: midY, r: "2", fill: particle.color, opacity: "0.4" }),
|
1880
|
-
[0, 1, 2].map((j) => {
|
1881
|
-
const filamentAngle = angle + (j - 1) * 0.1;
|
1882
|
-
const filamentX = endX + Math.cos(filamentAngle) * 2;
|
1883
|
-
const filamentY = endY + Math.sin(filamentAngle) * 2;
|
1884
|
-
return (React.createElement("line", { key: j, x1: endX, y1: endY, x2: filamentX, y2: filamentY, stroke: "#E5E5E5", strokeWidth: "0.3", opacity: "0.6" }));
|
1885
|
-
})));
|
1886
|
-
}))));
|
1887
|
-
};
|
1888
|
-
|
1889
|
-
const defaultColors$5 = ['#FFD700', '#FFA500'];
|
1890
|
-
const createBeeParticles = (origin, config) => {
|
1891
|
-
const { particleCount = 5, colors = defaultColors$5, elementSize = 18 } = config;
|
1892
|
-
const particles = [];
|
1893
|
-
for (let i = 0; i < particleCount; i++) {
|
1894
|
-
particles.push({
|
1895
|
-
id: generateId(),
|
1896
|
-
x: origin.x + randomInRange(-50, 50),
|
1897
|
-
y: origin.y + randomInRange(-50, 50),
|
1898
|
-
vx: randomInRange(2, 4),
|
1899
|
-
vy: randomInRange(-1, 1),
|
1900
|
-
life: config.lifetime || 300,
|
1901
|
-
opacity: 1,
|
1902
|
-
size: randomInRange(elementSize * 0.8, elementSize * 1.1),
|
1903
|
-
// Encode: zigzag phase (0-360) + wing phase (0-360) * 1000 + buzz phase (0-360) * 1000000
|
1904
|
-
rotation: Math.floor(randomInRange(0, 360)) +
|
1905
|
-
(Math.floor(randomInRange(0, 360)) * 1000) +
|
1906
|
-
(Math.floor(randomInRange(0, 360)) * 1000000),
|
1907
|
-
color: getRandomColor(colors),
|
1908
|
-
});
|
1909
|
-
}
|
1910
|
-
return particles;
|
1911
|
-
};
|
1912
|
-
const renderBeeParticle = (particle) => {
|
1913
|
-
// Extract encoded values
|
1914
|
-
const zigzagPhase = particle.rotation % 1000;
|
1915
|
-
const wingPhase = Math.floor((particle.rotation % 1000000) / 1000);
|
1916
|
-
const buzzPhase = Math.floor(particle.rotation / 1000000);
|
1917
|
-
// Calculate animations
|
1918
|
-
const zigzagY = Math.sin((Date.now() * 0.005 + zigzagPhase) * Math.PI / 180) * 15;
|
1919
|
-
const wingAngle = Math.sin((Date.now() * 0.02 + wingPhase) * Math.PI / 180) * 20;
|
1920
|
-
const buzzOffset = Math.sin((Date.now() * 0.015 + buzzPhase) * Math.PI / 180) * 2;
|
1921
|
-
// Calculate rotation based on movement direction
|
1922
|
-
const movementAngle = Math.atan2(particle.vy, particle.vx) * 180 / Math.PI;
|
1923
|
-
return (React.createElement("div", { key: particle.id, style: {
|
1924
|
-
width: `${particle.size * 2}px`,
|
1925
|
-
height: `${particle.size * 2}px`,
|
1926
|
-
position: 'relative',
|
1927
|
-
transform: `translate(${buzzOffset}px, ${zigzagY}px) rotate(${movementAngle}deg)`,
|
1928
|
-
} },
|
1929
|
-
React.createElement("svg", { width: particle.size * 2, height: particle.size * 2, viewBox: "-15 -10 30 20", style: {
|
1930
|
-
position: 'absolute',
|
1931
|
-
top: 0,
|
1932
|
-
left: 0,
|
1933
|
-
} },
|
1934
|
-
React.createElement("ellipse", { cx: "-2", cy: "-3", rx: "8", ry: "4", fill: "#E5E5E5", opacity: "0.7", transform: `rotate(${-wingAngle - 20} -2 -3)` }),
|
1935
|
-
React.createElement("ellipse", { cx: "-2", cy: "3", rx: "8", ry: "4", fill: "#E5E5E5", opacity: "0.7", transform: `rotate(${wingAngle + 20} -2 3)` }),
|
1936
|
-
React.createElement("ellipse", { cx: "0", cy: "0", rx: "8", ry: "6", fill: particle.color }),
|
1937
|
-
React.createElement("ellipse", { cx: "-6", cy: "0", rx: "6", ry: "5", fill: "#333" }),
|
1938
|
-
React.createElement("rect", { x: "-3", y: "-6", width: "2", height: "12", fill: "#333" }),
|
1939
|
-
React.createElement("rect", { x: "1", y: "-6", width: "2", height: "12", fill: "#333" }),
|
1940
|
-
React.createElement("rect", { x: "5", y: "-5", width: "2", height: "10", fill: "#333" }),
|
1941
|
-
React.createElement("circle", { cx: "8", cy: "0", r: "4", fill: "#333" }),
|
1942
|
-
React.createElement("circle", { cx: "9", cy: "-1.5", r: "1", fill: "#FFF" }),
|
1943
|
-
React.createElement("circle", { cx: "9", cy: "1.5", r: "1", fill: "#FFF" }),
|
1944
|
-
React.createElement("line", { x1: "10", y1: "-2", x2: "12", y2: "-4", stroke: "#333", strokeWidth: "0.5" }),
|
1945
|
-
React.createElement("line", { x1: "10", y1: "2", x2: "12", y2: "4", stroke: "#333", strokeWidth: "0.5" }),
|
1946
|
-
React.createElement("polygon", { points: "-10,0 -12,1 -12,-1", fill: "#333" }))));
|
1947
|
-
};
|
1948
|
-
|
1949
|
-
const defaultColors$4 = ['#FFE5B4', '#FFF8DC', '#FFFACD', '#FFF5EE'];
|
1950
|
-
const createPopcornParticles = (origin, config) => {
|
1951
|
-
const { particleCount = 20, startVelocity = 25, colors = defaultColors$4, elementSize = 20 } = config;
|
1952
|
-
const particles = [];
|
1953
|
-
for (let i = 0; i < particleCount; i++) {
|
1954
|
-
const angle = randomInRange(0, 360);
|
1955
|
-
const velocity = randomInRange(startVelocity * 0.5, startVelocity);
|
1956
|
-
particles.push({
|
1957
|
-
id: generateId(),
|
1958
|
-
x: origin.x,
|
1959
|
-
y: origin.y,
|
1960
|
-
vx: Math.cos(degreesToRadians(angle)) * velocity,
|
1961
|
-
vy: Math.sin(degreesToRadians(angle)) * velocity - 10, // Initial upward boost
|
1962
|
-
life: config.lifetime || 150,
|
1963
|
-
opacity: 1,
|
1964
|
-
size: randomInRange(elementSize * 0.8, elementSize * 1.2),
|
1965
|
-
rotation: randomInRange(0, 360),
|
1966
|
-
color: getRandomColor(colors),
|
1967
|
-
});
|
1968
|
-
}
|
1969
|
-
return particles;
|
1970
|
-
};
|
1971
|
-
const renderPopcornParticle = (particle) => {
|
1972
|
-
// Add some rotation animation
|
1973
|
-
const rotation = particle.rotation + (150 - particle.life) * 3;
|
1974
|
-
// Add bounce effect
|
1975
|
-
const bounceProgress = (150 - particle.life) / 150;
|
1976
|
-
const scale = 0.5 + Math.sin(bounceProgress * Math.PI) * 0.5;
|
1977
|
-
return (React.createElement("div", { key: particle.id, style: {
|
1978
|
-
fontSize: `${particle.size}px`,
|
1979
|
-
transform: `rotate(${rotation}deg) scale(${scale})`,
|
1980
|
-
opacity: particle.opacity,
|
1981
|
-
userSelect: 'none',
|
1982
|
-
} }, "\uD83C\uDF7F"));
|
1983
|
-
};
|
1984
|
-
|
1985
|
-
const defaultColors$3 = ['#F0E68C', '#FFD700', '#FFF8DC', '#FFFACD', '#F5DEB3'];
|
1986
|
-
const createChampagneParticles = (origin, config) => {
|
1987
|
-
const { particleCount = 40, startVelocity = 30, colors = defaultColors$3, elementSize = 12 } = config;
|
1988
|
-
const particles = [];
|
1989
|
-
for (let i = 0; i < particleCount; i++) {
|
1990
|
-
const isBubble = i < particleCount * 0.7;
|
1991
|
-
const angle = isBubble
|
1992
|
-
? randomInRange(60, 120) // Mostly upward for bubbles
|
1993
|
-
: randomInRange(0, 360); // Any direction for cork
|
1994
|
-
const velocity = randomInRange(startVelocity * 0.5, startVelocity);
|
1995
|
-
particles.push({
|
1996
|
-
id: generateId(),
|
1997
|
-
x: origin.x,
|
1998
|
-
y: origin.y,
|
1999
|
-
vx: Math.cos(degreesToRadians(angle)) * velocity,
|
2000
|
-
vy: Math.sin(degreesToRadians(angle)) * velocity * (isBubble ? -1 : 1),
|
2001
|
-
life: config.lifetime || 200,
|
2002
|
-
opacity: isBubble ? 0.6 : 1,
|
2003
|
-
size: isBubble ? randomInRange(4, 8) : elementSize,
|
2004
|
-
// Encode: isBubble (0 or 1) + wobble phase * 10
|
2005
|
-
rotation: (isBubble ? 0 : 1) + Math.floor(randomInRange(0, 360)) * 10,
|
2006
|
-
color: getRandomColor(colors),
|
2007
|
-
});
|
2008
|
-
}
|
2009
|
-
return particles;
|
2010
|
-
};
|
2011
|
-
const renderChampagneParticle = (particle) => {
|
2012
|
-
const isBubble = (particle.rotation % 10) === 0;
|
2013
|
-
const wobblePhase = Math.floor(particle.rotation / 10);
|
2014
|
-
if (isBubble) {
|
2015
|
-
// Render bubble
|
2016
|
-
const wobble = Math.sin((Date.now() * 0.003 + wobblePhase) * Math.PI / 180) * 10;
|
2017
|
-
return (React.createElement("div", { key: particle.id, style: {
|
2018
|
-
width: `${particle.size}px`,
|
2019
|
-
height: `${particle.size}px`,
|
2020
|
-
borderRadius: '50%',
|
2021
|
-
backgroundColor: particle.color,
|
2022
|
-
opacity: particle.opacity,
|
2023
|
-
border: `1px solid ${particle.color}`,
|
2024
|
-
transform: `translateX(${wobble}px)`,
|
2025
|
-
boxShadow: `inset -2px -2px 4px rgba(0,0,0,0.1), inset 2px 2px 4px rgba(255,255,255,0.5)`,
|
2026
|
-
} }));
|
2027
|
-
}
|
2028
|
-
// Render cork (champagne bottle)
|
2029
|
-
const rotation = (Date.now() * 0.2 + wobblePhase) % 360;
|
2030
|
-
return (React.createElement("div", { key: particle.id, style: {
|
2031
|
-
fontSize: `${particle.size}px`,
|
2032
|
-
transform: `rotate(${rotation}deg)`,
|
2033
|
-
opacity: particle.opacity,
|
2034
|
-
userSelect: 'none',
|
2035
|
-
} }, "\uD83C\uDF7E"));
|
2036
|
-
};
|
2037
|
-
|
2038
|
-
const defaultColors$2 = ['#FF69B4', '#FF1493', '#FFB6C1', '#FFC0CB', '#FF6347', '#FFA500', '#FFD700', '#98FB98', '#87CEEB', '#DDA0DD'];
|
2039
|
-
const candyEmojis = ['🍬', '🍭', '🍮', '🍯'];
|
2040
|
-
const createCandyParticles = (origin, config) => {
|
2041
|
-
const { particleCount = 20, startVelocity = 20, colors = defaultColors$2, elementSize = 25 } = config;
|
2042
|
-
const particles = [];
|
2043
|
-
for (let i = 0; i < particleCount; i++) {
|
2044
|
-
const angle = randomInRange(-30, 30); // Mostly falling down
|
2045
|
-
const velocity = randomInRange(startVelocity * 0.5, startVelocity);
|
2046
|
-
particles.push({
|
2047
|
-
id: generateId(),
|
2048
|
-
x: origin.x,
|
2049
|
-
y: origin.y - 50, // Start above origin
|
2050
|
-
vx: Math.sin(angle * Math.PI / 180) * velocity * 0.5,
|
2051
|
-
vy: randomInRange(3, 6), // Fall down
|
2052
|
-
life: config.lifetime || 180,
|
2053
|
-
opacity: 1,
|
2054
|
-
size: randomInRange(elementSize * 0.7, elementSize * 1.3),
|
2055
|
-
// Encode candy type (0-3) + initial rotation * 10
|
2056
|
-
rotation: Math.floor(Math.random() * candyEmojis.length) + (Math.floor(randomInRange(0, 360)) * 10),
|
2057
|
-
color: getRandomColor(colors),
|
2058
|
-
});
|
2059
|
-
}
|
2060
|
-
return particles;
|
2061
|
-
};
|
2062
|
-
const renderCandyParticle = (particle) => {
|
2063
|
-
const candyIndex = particle.rotation % 10;
|
2064
|
-
const initialRotation = Math.floor(particle.rotation / 10);
|
2065
|
-
const candy = candyEmojis[candyIndex] || candyEmojis[0];
|
2066
|
-
// Add tumbling rotation
|
2067
|
-
const tumbleSpeed = 5;
|
2068
|
-
const rotation = initialRotation + (180 - particle.life) * tumbleSpeed;
|
2069
|
-
// Add sway effect
|
2070
|
-
const swayAmount = Math.sin((180 - particle.life) * 0.05) * 20;
|
2071
|
-
return (React.createElement("div", { key: particle.id, style: {
|
2072
|
-
fontSize: `${particle.size}px`,
|
2073
|
-
transform: `translateX(${swayAmount}px) rotate(${rotation}deg)`,
|
2074
|
-
opacity: particle.opacity,
|
2075
|
-
userSelect: 'none',
|
2076
|
-
} }, candy));
|
2077
|
-
};
|
2078
|
-
|
2079
|
-
const defaultColors$1 = ['#FFB6C1', '#FF69B4', '#FFD700', '#FF6347', '#98D8C8', '#F7DC6F', '#BB8FCE', '#85C1E2'];
|
2080
|
-
const createDonutParticles = (origin, config) => {
|
2081
|
-
const { particleCount = 15, startVelocity = 25, colors = defaultColors$1, elementSize = 30 } = config;
|
2082
|
-
const particles = [];
|
2083
|
-
for (let i = 0; i < particleCount; i++) {
|
2084
|
-
const angle = randomInRange(0, 360);
|
2085
|
-
const velocity = randomInRange(startVelocity * 0.5, startVelocity);
|
2086
|
-
particles.push({
|
2087
|
-
id: generateId(),
|
2088
|
-
x: origin.x,
|
2089
|
-
y: origin.y,
|
2090
|
-
vx: Math.cos(degreesToRadians(angle)) * velocity,
|
2091
|
-
vy: Math.sin(degreesToRadians(angle)) * velocity - 10, // Initial upward boost
|
2092
|
-
life: config.lifetime || 200,
|
2093
|
-
opacity: 1,
|
2094
|
-
size: randomInRange(elementSize * 0.6, elementSize * 1.4),
|
2095
|
-
rotation: randomInRange(0, 360),
|
2096
|
-
color: getRandomColor(colors),
|
2097
|
-
});
|
2098
|
-
}
|
2099
|
-
return particles;
|
2100
|
-
};
|
2101
|
-
const renderDonutParticle = (particle) => {
|
2102
|
-
// Add spinning animation
|
2103
|
-
const spinSpeed = 8;
|
2104
|
-
const rotation = particle.rotation + (200 - particle.life) * spinSpeed;
|
2105
|
-
// Add bounce effect
|
2106
|
-
const bounceProgress = (200 - particle.life) / 200;
|
2107
|
-
const scale = 0.9 + Math.sin(bounceProgress * Math.PI * 2) * 0.1;
|
2108
|
-
return (React.createElement("div", { key: particle.id, style: {
|
2109
|
-
fontSize: `${particle.size}px`,
|
2110
|
-
transform: `rotate(${rotation}deg) scale(${scale})`,
|
2111
|
-
opacity: particle.opacity,
|
2112
|
-
userSelect: 'none',
|
2113
|
-
position: 'relative',
|
2114
|
-
} },
|
2115
|
-
"\uD83C\uDF69",
|
2116
|
-
[0, 120, 240].map((angle, i) => (React.createElement("div", { key: i, style: {
|
2117
|
-
position: 'absolute',
|
2118
|
-
width: '3px',
|
2119
|
-
height: '8px',
|
2120
|
-
backgroundColor: particle.color,
|
2121
|
-
borderRadius: '40%',
|
2122
|
-
top: '50%',
|
2123
|
-
left: '50%',
|
2124
|
-
transform: `
|
2125
|
-
translate(-50%, -50%)
|
2126
|
-
rotate(${angle + rotation}deg)
|
2127
|
-
translateY(${particle.size * 0.3}px)
|
2128
|
-
scale(${scale})
|
2129
|
-
`,
|
2130
|
-
opacity: particle.opacity * 0.8,
|
2131
|
-
} })))));
|
2132
|
-
};
|
2133
|
-
|
2134
|
-
const defaultColors = ['#FF6347', '#FFD700', '#98D8C8', '#FF8C00', '#DC143C'];
|
2135
|
-
const createPizzaParticles = (origin, config) => {
|
2136
|
-
const { particleCount = 12, startVelocity = 30, colors = defaultColors, elementSize = 35 } = config;
|
2137
|
-
const particles = [];
|
2138
|
-
for (let i = 0; i < particleCount; i++) {
|
2139
|
-
const angle = randomInRange(0, 360);
|
2140
|
-
const velocity = randomInRange(startVelocity * 0.5, startVelocity);
|
2141
|
-
particles.push({
|
2142
|
-
id: generateId(),
|
2143
|
-
x: origin.x,
|
2144
|
-
y: origin.y,
|
2145
|
-
vx: Math.cos(degreesToRadians(angle)) * velocity,
|
2146
|
-
vy: Math.sin(degreesToRadians(angle)) * velocity - 15, // Initial upward boost
|
2147
|
-
life: config.lifetime || 180,
|
2148
|
-
opacity: 1,
|
2149
|
-
size: randomInRange(elementSize * 0.5, elementSize * 1.2),
|
2150
|
-
rotation: randomInRange(0, 360),
|
2151
|
-
color: getRandomColor(colors),
|
2152
|
-
});
|
2153
|
-
}
|
2154
|
-
return particles;
|
2155
|
-
};
|
2156
|
-
const renderPizzaParticle = (particle) => {
|
2157
|
-
// Add spinning and flipping animation
|
2158
|
-
const spinSpeed = 10;
|
2159
|
-
const rotation = particle.rotation + (180 - particle.life) * spinSpeed;
|
2160
|
-
const flipAngle = (180 - particle.life) * 2;
|
2161
|
-
// Add wobble effect
|
2162
|
-
const wobble = Math.sin((180 - particle.life) * 0.1) * 10;
|
2163
|
-
// Scale animation
|
2164
|
-
const progress = (180 - particle.life) / 180;
|
2165
|
-
const scale = 0.8 + Math.sin(progress * Math.PI) * 0.2;
|
2166
|
-
return (React.createElement("div", { key: particle.id, style: {
|
2167
|
-
fontSize: `${particle.size}px`,
|
2168
|
-
transform: `
|
2169
|
-
translateX(${wobble}px)
|
2170
|
-
rotate(${rotation}deg)
|
2171
|
-
rotateX(${flipAngle}deg)
|
2172
|
-
scale(${scale})
|
2173
|
-
`,
|
2174
|
-
transformStyle: 'preserve-3d',
|
2175
|
-
opacity: particle.opacity,
|
2176
|
-
userSelect: 'none',
|
2177
|
-
position: 'relative',
|
2178
|
-
} },
|
2179
|
-
"\uD83C\uDF55",
|
2180
|
-
Math.random() > 0.5 && (React.createElement("div", { style: {
|
2181
|
-
position: 'absolute',
|
2182
|
-
fontSize: `${particle.size * 0.4}px`,
|
2183
|
-
top: `${10 + Math.random() * 30}%`,
|
2184
|
-
left: `${10 + Math.random() * 30}%`,
|
2185
|
-
transform: `rotate(${Math.random() * 360}deg)`,
|
2186
|
-
opacity: particle.opacity * 0.8,
|
2187
|
-
} }, ['🍅', '🧀', '🌶️'][Math.floor(Math.random() * 3)]))));
|
2188
|
-
};
|
2189
|
-
|
2190
1076
|
const animations = {
|
2191
1077
|
confetti: {
|
2192
1078
|
createParticles: createConfettiParticles,
|
@@ -2224,10 +1110,6 @@ const animations = {
|
|
2224
1110
|
createParticles: createCoinParticles,
|
2225
1111
|
renderParticle: renderCoinParticle,
|
2226
1112
|
},
|
2227
|
-
lightning: {
|
2228
|
-
createParticles: createLightningParticles,
|
2229
|
-
renderParticle: renderLightningParticle,
|
2230
|
-
},
|
2231
1113
|
petals: {
|
2232
1114
|
createParticles: createPetalParticles,
|
2233
1115
|
renderParticle: renderPetalParticle,
|
@@ -2244,10 +1126,6 @@ const animations = {
|
|
2244
1126
|
createParticles: createPaintParticles,
|
2245
1127
|
renderParticle: renderPaintParticle,
|
2246
1128
|
},
|
2247
|
-
music: {
|
2248
|
-
createParticles: createMusicParticles,
|
2249
|
-
renderParticle: renderMusicParticle,
|
2250
|
-
},
|
2251
1129
|
balloons: {
|
2252
1130
|
createParticles: createBalloonParticles,
|
2253
1131
|
renderParticle: renderBalloonParticle,
|
@@ -2256,86 +1134,22 @@ const animations = {
|
|
2256
1134
|
createParticles: createGalaxyParticles,
|
2257
1135
|
renderParticle: renderGalaxyParticle,
|
2258
1136
|
},
|
2259
|
-
matrix: {
|
2260
|
-
createParticles: createMatrixParticles,
|
2261
|
-
renderParticle: renderMatrixParticle,
|
2262
|
-
},
|
2263
|
-
pixels: {
|
2264
|
-
createParticles: createPixelParticles,
|
2265
|
-
renderParticle: renderPixelParticle,
|
2266
|
-
},
|
2267
1137
|
glitch: {
|
2268
1138
|
createParticles: createGlitchParticles,
|
2269
1139
|
renderParticle: renderGlitchParticle,
|
2270
1140
|
},
|
2271
|
-
dice: {
|
2272
|
-
createParticles: createDiceParticles,
|
2273
|
-
renderParticle: renderDiceParticle,
|
2274
|
-
},
|
2275
|
-
levelup: {
|
2276
|
-
createParticles: createLevelUpParticles,
|
2277
|
-
renderParticle: renderLevelUpParticle,
|
2278
|
-
},
|
2279
1141
|
magicdust: {
|
2280
1142
|
createParticles: createMagicDustParticles,
|
2281
1143
|
renderParticle: renderMagicDustParticle,
|
2282
1144
|
},
|
2283
|
-
ghosts: {
|
2284
|
-
createParticles: createGhostParticles,
|
2285
|
-
renderParticle: renderGhostParticle,
|
2286
|
-
},
|
2287
1145
|
crystals: {
|
2288
1146
|
createParticles: createCrystalParticles,
|
2289
1147
|
renderParticle: renderCrystalParticle,
|
2290
1148
|
},
|
2291
|
-
dragons: {
|
2292
|
-
createParticles: createDragonParticles,
|
2293
|
-
renderParticle: renderDragonParticle,
|
2294
|
-
},
|
2295
|
-
runes: {
|
2296
|
-
createParticles: createRuneParticles,
|
2297
|
-
renderParticle: renderRuneParticle,
|
2298
|
-
},
|
2299
|
-
butterflies: {
|
2300
|
-
createParticles: createButterflyParticles,
|
2301
|
-
renderParticle: renderButterflyParticle,
|
2302
|
-
},
|
2303
1149
|
leaves: {
|
2304
1150
|
createParticles: createLeafParticles,
|
2305
1151
|
renderParticle: renderLeafParticle,
|
2306
1152
|
},
|
2307
|
-
rain: {
|
2308
|
-
createParticles: createRainParticles,
|
2309
|
-
renderParticle: renderRainParticle,
|
2310
|
-
},
|
2311
|
-
dandelion: {
|
2312
|
-
createParticles: createDandelionParticles,
|
2313
|
-
renderParticle: renderDandelionParticle,
|
2314
|
-
},
|
2315
|
-
bees: {
|
2316
|
-
createParticles: createBeeParticles,
|
2317
|
-
renderParticle: renderBeeParticle,
|
2318
|
-
},
|
2319
|
-
popcorn: {
|
2320
|
-
createParticles: createPopcornParticles,
|
2321
|
-
renderParticle: renderPopcornParticle,
|
2322
|
-
},
|
2323
|
-
champagne: {
|
2324
|
-
createParticles: createChampagneParticles,
|
2325
|
-
renderParticle: renderChampagneParticle,
|
2326
|
-
},
|
2327
|
-
candy: {
|
2328
|
-
createParticles: createCandyParticles,
|
2329
|
-
renderParticle: renderCandyParticle,
|
2330
|
-
},
|
2331
|
-
donuts: {
|
2332
|
-
createParticles: createDonutParticles,
|
2333
|
-
renderParticle: renderDonutParticle,
|
2334
|
-
},
|
2335
|
-
pizza: {
|
2336
|
-
createParticles: createPizzaParticles,
|
2337
|
-
renderParticle: renderPizzaParticle,
|
2338
|
-
},
|
2339
1153
|
};
|
2340
1154
|
|
2341
1155
|
const useReward = (elementId, animationType, config) => {
|