partycles 0.3.0 → 1.0.0

package/dist/index.js

@@ -13,7 +13,7 @@ const generateId = () => {
     return Math.random().toString(36).substring(2, 9);
 };
 const getRandomColor = (colors) => {
-    return colors[Math.floor(Math.random() * colors.length)] || colors[0];
+    return colors[Math.floor(Math.random() * colors.length)] || colors[0] || '#ffffff';
 };
 const createParticleStyle = (particle, containerRect) => {
     return {
@@ -28,9 +28,9 @@ const createParticleStyle = (particle, containerRect) => {
     };
 };
 
-const defaultColors = ['#f44336', '#e91e63', '#9c27b0', '#673ab7', '#3f51b5', '#2196f3', '#03a9f4', '#00bcd4', '#009688', '#4caf50', '#8bc34a', '#cddc39', '#ffeb3b', '#ffc107', '#ff9800', '#ff5722'];
+const defaultColors$3 = ['#f44336', '#e91e63', '#9c27b0', '#673ab7', '#3f51b5', '#2196f3', '#03a9f4', '#00bcd4', '#009688', '#4caf50', '#8bc34a', '#cddc39', '#ffeb3b', '#ffc107', '#ff9800', '#ff5722'];
 const createConfettiParticles = (origin, config) => {
-    const { particleCount = 50, startVelocity = 20, colors = defaultColors, elementSize = 20 } = config;
+    const { particleCount = 50, startVelocity = 20, colors = defaultColors$3, elementSize = 20 } = config;
     const particles = [];
     for (let i = 0; i < particleCount; i++) {
         const angle = randomInRange(0, 360);
@@ -76,7 +76,7 @@ const createSparkleParticles = (origin, config) => {
             opacity: 0,
             size: randomInRange(elementSize * 0.4, elementSize * 1.2),
             rotation: randomInRange(0, 360),
-            color: colors[Math.floor(Math.random() * colors.length)] || colors[0],
+            color: colors[Math.floor(Math.random() * colors.length)] || colors[0] || '#ffffff',
         });
     }
     return particles;
@@ -168,13 +168,13 @@ const createBubbleParticles = (origin, config) => {
             id: generateId(),
             x: origin.x + randomInRange(-spread, spread),
             y: origin.y,
-            vx: randomInRange(-2, 2),
-            vy: -randomInRange(startVelocity * 0.3, startVelocity * 0.6),
+            vx: randomInRange(-3, 3),
+            vy: -randomInRange(startVelocity * 0.7, startVelocity * 1.2),
             life: config.lifetime || 160,
             opacity: 0.7,
             size: randomInRange(elementSize * 0.4, elementSize * 1.2),
             rotation: 0,
-            color: colors[Math.floor(Math.random() * colors.length)] || colors[0],
+            color: colors[Math.floor(Math.random() * colors.length)] || colors[0] || '#ffffff',
         });
     }
     return particles;
@@ -211,7 +211,7 @@ const createStarParticles = (origin, config) => {
             opacity: 1,
             size: randomInRange(elementSize * 0.5, elementSize * 1.3),
             rotation: randomInRange(0, 360),
-            color: colors[Math.floor(Math.random() * colors.length)] || colors[0],
+            color: colors[Math.floor(Math.random() * colors.length)] || colors[0] || '#ffffff',
         });
     }
     return particles;
@@ -241,7 +241,7 @@ const createSnowParticles = (origin, config) => {
             opacity: randomInRange(0.4, 0.9),
             size: randomInRange(elementSize * 0.3, elementSize),
             rotation: randomInRange(0, 360),
-            color: colors[Math.floor(Math.random() * colors.length)] || colors[0],
+            color: colors[Math.floor(Math.random() * colors.length)] || colors[0] || '#ffffff',
         });
     }
     return particles;
@@ -324,7 +324,7 @@ const createCoinParticles = (origin, config) => {
             opacity: 1,
             size: randomInRange(elementSize * 0.8, elementSize * 1.2),
             rotation: randomInRange(0, 360),
-            color: colors[Math.floor(Math.random() * colors.length)] || colors[0],
+            color: colors[Math.floor(Math.random() * colors.length)] || colors[0] || '#ffffff',
         });
     }
     return particles;
@@ -361,61 +361,6 @@ const renderCoinParticle = (particle) => {
             } }, "$")));
 };
 
-const lightningColors = ['#FFFF00', '#FFFFFF', '#00FFFF', '#FF00FF'];
-const createLightningParticles = (origin, config) => {
-    const { particleCount = 20, spread = 360, startVelocity = 50, colors = lightningColors, elementSize = 30 } = config;
-    const particles = [];
-    for (let i = 0; i < particleCount; i++) {
-        const angle = randomInRange(0, spread) * (Math.PI / 180);
-        const velocity = randomInRange(startVelocity * 0.7, startVelocity * 1.3);
-        particles.push({
-            id: generateId(),
-            x: origin.x,
-            y: origin.y,
-            vx: Math.sin(angle) * velocity,
-            vy: -Math.abs(Math.cos(angle) * velocity * 0.5), // Mostly horizontal movement
-            life: config.lifetime || 60, // Quick flashes
-            opacity: 1,
-            size: randomInRange(elementSize * 0.5, elementSize * 1.5),
-            rotation: randomInRange(0, 360),
-            color: colors[Math.floor(Math.random() * colors.length)] || colors[0],
-        });
-    }
-    return particles;
-};
-const renderLightningParticle = (particle) => {
-    // Create zigzag pattern based on particle life
-    const zigzagOffset = Math.sin(particle.life * 0.5) * 10;
-    return (React.createElement("div", { key: particle.id, style: {
-            width: `${particle.size}px`,
-            height: `${particle.size * 0.3}px`,
-            position: 'relative',
-            filter: `blur(0.5px) brightness(2)`,
-            transform: `translateX(${zigzagOffset}px) rotate(${particle.rotation}deg)`,
-        } },
-        React.createElement("div", { style: {
-                position: 'absolute',
-                width: '100%',
-                height: '100%',
-                background: particle.color,
-                clipPath: 'polygon(0% 0%, 60% 0%, 40% 45%, 100% 45%, 0% 100%, 40% 55%, 20% 55%, 35% 100%)',
-                boxShadow: `
-            0 0 10px ${particle.color},
-            0 0 20px ${particle.color},
-            0 0 30px ${particle.color}
-          `,
-            } }),
-        React.createElement("div", { style: {
-                position: 'absolute',
-                top: '-50%',
-                left: '-50%',
-                width: '200%',
-                height: '200%',
-                background: `radial-gradient(circle, ${particle.color}88 0%, transparent 70%)`,
-                animation: `electricPulse ${randomInRange(100, 200)}ms infinite`,
-            } })));
-};
-
 const petalColors = ['#FFB6C1', '#FFC0CB', '#FF69B4', '#FF1493', '#FFF0F5'];
 const createPetalParticles = (origin, config) => {
     const { particleCount = 40, spread = 100, startVelocity = 8, colors = petalColors, elementSize = 20 } = config;
@@ -433,7 +378,7 @@ const createPetalParticles = (origin, config) => {
             opacity: randomInRange(0.7, 1),
             size: randomInRange(elementSize * 0.7, elementSize * 1.3),
             rotation: randomInRange(0, 360),
-            color: colors[Math.floor(Math.random() * colors.length)] || colors[0],
+            color: colors[Math.floor(Math.random() * colors.length)] || colors[0] || '#ffffff',
         });
     }
     return particles;
@@ -491,7 +436,7 @@ const createAuroraParticles = (origin, config) => {
             opacity: 0,
             size: randomInRange(elementSize * 0.8, elementSize * 1.2),
             rotation: randomInRange(-15, 15),
-            color: colors[Math.floor(Math.random() * colors.length)] || colors[0],
+            color: colors[Math.floor(Math.random() * colors.length)] || colors[0] || '#ffffff',
         });
     }
     return particles;
@@ -548,7 +493,7 @@ const createFireflyParticles = (origin, config) => {
             opacity: 0,
             size: randomInRange(elementSize * 0.6, elementSize),
             rotation: randomInRange(0, 360), // Used for blink timing
-            color: colors[Math.floor(Math.random() * colors.length)] || colors[0],
+            color: colors[Math.floor(Math.random() * colors.length)] || colors[0] || '#ffffff',
         });
     }
     return particles;
@@ -618,7 +563,7 @@ const createPaintParticles = (origin, config) => {
                 ? randomInRange(elementSize * 1.5, elementSize * 2.5)
                 : randomInRange(elementSize * 0.3, elementSize),
             rotation: randomInRange(0, 360),
-            color: colors[Math.floor(Math.random() * colors.length)] || colors[0],
+            color: colors[Math.floor(Math.random() * colors.length)] || colors[0] || '#ffffff',
         });
     }
     return particles;
@@ -681,80 +626,6 @@ const renderPaintParticle = (particle) => {
             } }))));
 };
 
-const musicColors = ['#FF006E', '#8338EC', '#3A86FF', '#FB5607', '#FFBE0B'];
-const createMusicParticles = (origin, config) => {
-    const { particleCount = 20, spread = 100, startVelocity = 8, colors = musicColors, elementSize = 25 } = config;
-    const particles = [];
-    const notes = ['♪', '♫', '♬', '♩', '♭', '♯'];
-    for (let i = 0; i < particleCount; i++) {
-        const angle = randomInRange(-spread / 2, spread / 2) * (Math.PI / 180);
-        const velocity = randomInRange(startVelocity * 0.5, startVelocity);
-        particles.push({
-            id: generateId(),
-            x: origin.x + randomInRange(-20, 20),
-            y: origin.y,
-            vx: Math.sin(angle) * velocity * 0.3,
-            vy: -Math.abs(Math.cos(angle)) * velocity * 0.5, // Always go up slowly
-            life: config.lifetime || 200,
-            opacity: 1,
-            size: randomInRange(elementSize * 0.8, elementSize * 1.2),
-            rotation: i % notes.length, // Store which note to use
-            color: colors[Math.floor(Math.random() * colors.length)] || colors[0],
-        });
-    }
-    return particles;
-};
-const renderMusicParticle = (particle) => {
-    const notes = ['♪', '♫', '♬', '♩', '♭', '♯'];
-    const note = notes[Math.floor(particle.rotation)];
-    // Wave motion as notes float up
-    const waveX = Math.sin(particle.life * 0.05) * 20;
-    const wobble = Math.sin(particle.life * 0.1) * 10;
-    // Fade in/out
-    const maxLife = 300; // Use longer lifetime for proper fading
-    const fadeIn = particle.life > (maxLife - 20) ? (maxLife - particle.life) / 20 : 1;
-    const fadeOut = particle.life < 50 ? particle.life / 50 : 1;
-    const opacity = Math.min(fadeIn, fadeOut) * particle.opacity;
-    return (React.createElement("div", { key: particle.id, style: {
-            fontSize: `${particle.size}px`,
-            fontWeight: 'bold',
-            position: 'relative',
-            transform: `
-          translateX(${waveX}px) 
-          rotate(${wobble}deg)
-          scale(${0.8 + opacity * 0.2})
-        `,
-            color: particle.color,
-            opacity,
-            textShadow: `
-          0 0 10px ${particle.color}88,
-          0 0 20px ${particle.color}44,
-          2px 2px 3px rgba(0,0,0,0.3)
-        `,
-            transition: 'transform 0.3s ease',
-            userSelect: 'none',
-        } },
-        note,
-        React.createElement("div", { style: {
-                position: 'absolute',
-                top: '40%',
-                left: '-20%',
-                width: '140%',
-                height: '1px',
-                background: `linear-gradient(90deg, transparent, ${particle.color}33, transparent)`,
-                opacity: opacity * 0.5,
-            } }),
-        React.createElement("div", { style: {
-                position: 'absolute',
-                top: '60%',
-                left: '-20%',
-                width: '140%',
-                height: '1px',
-                background: `linear-gradient(90deg, transparent, ${particle.color}33, transparent)`,
-                opacity: opacity * 0.3,
-            } })));
-};
-
 const balloonColors = ['#FF006E', '#FB5607', '#FFBE0B', '#8338EC', '#3A86FF', '#06FFB4', '#FF4081'];
 const createBalloonParticles = (origin, config) => {
     const { particleCount = 15, spread = 80, startVelocity = 10, colors = balloonColors, elementSize = 35 } = config;
@@ -764,15 +635,15 @@ const createBalloonParticles = (origin, config) => {
         const velocity = randomInRange(startVelocity * 0.7, startVelocity);
         particles.push({
             id: generateId(),
-            x: origin.x + randomInRange(-30, 30),
-            y: origin.y + randomInRange(0, 20),
-            vx: Math.sin(angle) * velocity * 0.2,
+            x: origin.x + randomInRange(-spread * 0.8, spread * 0.8), // Spread balloons out more
+            y: origin.y + randomInRange(-10, 30),
+            vx: Math.sin(angle) * velocity * 0.3 + randomInRange(-1, 1), // Add horizontal drift
             vy: -velocity * 0.4, // Balloons float up slowly
             life: config.lifetime || 250,
             opacity: 0.9,
             size: randomInRange(elementSize * 0.8, elementSize * 1.2),
             rotation: randomInRange(-10, 10),
-            color: colors[Math.floor(Math.random() * colors.length)] || colors[0],
+            color: colors[Math.floor(Math.random() * colors.length)] || colors[0] || '#ffffff',
         });
     }
     return particles;
@@ -868,7 +739,7 @@ const createGalaxyParticles = (origin, config) => {
             opacity: 0,
             size: randomInRange(elementSize * 0.3, elementSize) * (1 - progress * 0.5), // Smaller at edges
             rotation: randomInRange(0, 360),
-            color: colors[Math.floor(Math.random() * colors.length)] || colors[0],
+            color: colors[Math.floor(Math.random() * colors.length)] || colors[0] || '#ffffff',
         });
     }
     return particles;
@@ -936,6 +807,272 @@ const renderGalaxyParticle = (particle) => {
             } }))));
 };
 
+const createGlitchParticles = (origin, config) => {
+    const { particleCount = 20, elementSize = 200 } = config;
+    const particles = [];
+    const channels = ['r', 'g', 'b'];
+    for (let i = 0; i < particleCount; i++) {
+        const isHorizontal = Math.random() > 0.3;
+        const channelIndex = i % 3;
+        const channel = channels[channelIndex];
+        // Encode all data in rotation:
+        // bits 0-1: channel (0=r, 1=g, 2=b)
+        // bit 2: isHorizontal (0=false, 1=true)
+        // bits 3-10: width (0-255)
+        // bits 11-18: height (0-255)
+        // bits 19-24: glitchOffset + 32 (to make positive)
+        const width = isHorizontal ? randomInRange(50, 200) : randomInRange(2, 8);
+        const height = isHorizontal ? randomInRange(2, 8) : randomInRange(50, 200);
+        const glitchOffset = randomInRange(-20, 20);
+        const encodedData = channelIndex +
+            (isHorizontal ? 4 : 0) +
+            (Math.floor(width) << 3) +
+            (Math.floor(height) << 11) +
+            ((glitchOffset + 32) << 19);
+        particles.push({
+            id: generateId(),
+            x: origin.x + randomInRange(-elementSize / 2, elementSize / 2),
+            y: origin.y + randomInRange(-elementSize / 2, elementSize / 2),
+            vx: randomInRange(-50, 50),
+            vy: randomInRange(-30, 30),
+            life: config.lifetime || 150,
+            opacity: randomInRange(0.3, 1),
+            size: randomInRange(5, 20), // Store distortionAmount
+            rotation: encodedData,
+            color: channel === 'r' ? '#ff0000' : channel === 'g' ? '#00ff00' : '#0000ff',
+        });
+    }
+    return particles;
+};
+const renderGlitchParticle = (particle) => {
+    // Decode data from rotation
+    const channelIndex = particle.rotation & 3;
+    const width = (particle.rotation >> 3) & 255;
+    const height = (particle.rotation >> 11) & 255;
+    const glitchOffset = ((particle.rotation >> 19) & 63) - 32;
+    const channel = ['r', 'g', 'b'][channelIndex];
+    const distortionAmount = particle.size;
+    const colors = {
+        r: channel === 'r' ? 255 : 0,
+        g: channel === 'g' ? 255 : 0,
+        b: channel === 'b' ? 255 : 0,
+    };
+    const mixBlendMode = channel === 'r' ? 'screen' :
+        channel === 'g' ? 'multiply' : 'difference';
+    return (React.createElement("div", { key: particle.id, style: {
+            width: `${width}px`,
+            height: `${height}px`,
+            backgroundColor: `rgba(${colors.r}, ${colors.g}, ${colors.b}, ${particle.opacity})`,
+            mixBlendMode,
+            filter: `blur(${randomInRange(0, 2)}px)`,
+            boxShadow: `${glitchOffset}px 0 ${distortionAmount}px rgba(${colors.r}, ${colors.g}, ${colors.b}, ${particle.opacity * 0.5})`,
+        } }));
+};
+
+const defaultColors$2 = ['#9C27B0', '#E91E63', '#FF00FF', '#00FFFF', '#FFD700', '#FF69B4', '#DA70D6', '#9370DB'];
+const createMagicDustParticles = (origin, config) => {
+    const { particleCount = 40, startVelocity = 8, colors = defaultColors$2, elementSize = 12 } = config;
+    const particles = [];
+    for (let i = 0; i < particleCount; i++) {
+        // Create particles in a circular pattern with some randomness
+        const angle = (i / particleCount) * 360 + randomInRange(-30, 30);
+        const velocity = randomInRange(startVelocity * 0.3, startVelocity);
+        const color = getRandomColor(colors);
+        // Add some particles that trail behind cursor movement
+        const offsetAngle = randomInRange(0, 360);
+        const offsetDistance = randomInRange(0, 30);
+        particles.push({
+            id: generateId(),
+            x: origin.x + Math.cos(degreesToRadians(offsetAngle)) * offsetDistance,
+            y: origin.y + Math.sin(degreesToRadians(offsetAngle)) * offsetDistance,
+            vx: Math.cos(degreesToRadians(angle)) * velocity + randomInRange(-2, 2),
+            vy: Math.sin(degreesToRadians(angle)) * velocity + randomInRange(-2, 2),
+            life: config.lifetime || 120,
+            opacity: randomInRange(0.4, 1),
+            size: randomInRange(elementSize * 0.3, elementSize),
+            rotation: randomInRange(0, 360),
+            color,
+        });
+    }
+    return particles;
+};
+const renderMagicDustParticle = (particle) => {
+    const sparkleSize = particle.size * 0.7;
+    return (React.createElement("div", { key: particle.id, style: {
+            width: `${particle.size}px`,
+            height: `${particle.size}px`,
+            position: 'relative',
+        } },
+        React.createElement("div", { style: {
+                position: 'absolute',
+                width: '100%',
+                height: '100%',
+                backgroundColor: particle.color,
+                borderRadius: '50%',
+                boxShadow: `0 0 ${particle.size}px ${particle.color}, 0 0 ${particle.size * 2}px ${particle.color}`,
+                filter: 'blur(1px)',
+            } }),
+        React.createElement("div", { style: {
+                position: 'absolute',
+                top: '50%',
+                left: '50%',
+                width: `${sparkleSize}px`,
+                height: `${sparkleSize}px`,
+                transform: `translate(-50%, -50%) rotate(${particle.rotation}deg)`,
+            } },
+            React.createElement("div", { style: {
+                    position: 'absolute',
+                    width: '100%',
+                    height: '2px',
+                    backgroundColor: 'white',
+                    top: '50%',
+                    left: '0',
+                    transform: 'translateY(-50%)',
+                    boxShadow: '0 0 4px white',
+                } }),
+            React.createElement("div", { style: {
+                    position: 'absolute',
+                    width: '2px',
+                    height: '100%',
+                    backgroundColor: 'white',
+                    left: '50%',
+                    top: '0',
+                    transform: 'translateX(-50%)',
+                    boxShadow: '0 0 4px white',
+                } }))));
+};
+
+const defaultColors$1 = ['#FF1493', '#00CED1', '#FFD700', '#FF69B4', '#7B68EE', '#00FA9A', '#FF6347', '#4169E1'];
+const createCrystalParticles = (origin, config) => {
+    const { particleCount = 15, startVelocity = 15, colors = defaultColors$1, elementSize = 25 } = config;
+    const particles = [];
+    for (let i = 0; i < particleCount; i++) {
+        // Crystals explode outward and fall with gravity
+        const angle = randomInRange(0, 360);
+        const velocity = randomInRange(startVelocity * 0.5, startVelocity);
+        const color = getRandomColor(colors);
+        particles.push({
+            id: generateId(),
+            x: origin.x,
+            y: origin.y,
+            vx: Math.cos(degreesToRadians(angle)) * velocity,
+            vy: Math.sin(degreesToRadians(angle)) * velocity - 10,
+            life: config.lifetime || 150,
+            opacity: randomInRange(0.7, 1),
+            size: randomInRange(elementSize * 0.6, elementSize),
+            rotation: randomInRange(0, 360),
+            color,
+        });
+    }
+    return particles;
+};
+const renderCrystalParticle = (particle) => {
+    // Create rainbow refraction effect
+    const hue = (Date.now() * 0.5 + particle.x + particle.y) % 360;
+    return (React.createElement("div", { key: particle.id, style: {
+            width: `${particle.size}px`,
+            height: `${particle.size * 1.5}px`,
+            position: 'relative',
+            transform: `rotate(${particle.rotation}deg)`,
+        } },
+        React.createElement("div", { style: {
+                position: 'absolute',
+                width: '100%',
+                height: '100%',
+                background: `linear-gradient(135deg, ${particle.color}, ${particle.color}88, transparent)`,
+                clipPath: 'polygon(50% 0%, 100% 40%, 75% 100%, 25% 100%, 0% 40%)',
+                boxShadow: `0 0 ${particle.size}px ${particle.color}44`,
+            } }),
+        React.createElement("div", { style: {
+                position: 'absolute',
+                width: '80%',
+                height: '80%',
+                top: '10%',
+                left: '10%',
+                background: `linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.4), transparent)`,
+                clipPath: 'polygon(50% 10%, 90% 45%, 65% 90%, 35% 90%, 10% 45%)',
+            } }),
+        React.createElement("div", { style: {
+                position: 'absolute',
+                width: '100%',
+                height: '100%',
+                background: `linear-gradient(${hue}deg, 
+            hsla(${hue}, 100%, 50%, 0.3),
+            hsla(${(hue + 60) % 360}, 100%, 50%, 0.3),
+            hsla(${(hue + 120) % 360}, 100%, 50%, 0.3)
+          )`,
+                clipPath: 'polygon(50% 0%, 100% 40%, 75% 100%, 25% 100%, 0% 40%)',
+                mixBlendMode: 'screen',
+            } }),
+        React.createElement("div", { style: {
+                position: 'absolute',
+                width: '30%',
+                height: '30%',
+                top: '20%',
+                left: '35%',
+                background: 'radial-gradient(circle, rgba(255, 255, 255, 0.8), transparent)',
+                borderRadius: '50%',
+                filter: 'blur(2px)',
+            } })));
+};
+
+const defaultColors = ['#D2691E', '#CD853F', '#8B4513', '#A0522D', '#FF8C00', '#FF6347'];
+const createLeafParticles = (origin, config) => {
+    const { particleCount = 10, colors = defaultColors, elementSize = 25 } = config;
+    const particles = [];
+    for (let i = 0; i < particleCount; i++) {
+        particles.push({
+            id: generateId(),
+            x: origin.x + randomInRange(-100, 100),
+            y: origin.y + randomInRange(-50, 0),
+            vx: randomInRange(-1, 1),
+            vy: randomInRange(0.5, 2),
+            life: config.lifetime || 300,
+            opacity: 1,
+            size: randomInRange(elementSize * 0.6, elementSize),
+            // Encode tumble phase (0-360), sway phase (0-360), and sway amount (20-40) + rotation speed (-3 to 3)
+            rotation: Math.floor(randomInRange(0, 360)) +
+                (Math.floor(randomInRange(0, 360)) * 1000) +
+                (Math.floor(randomInRange(20, 40)) * 1000000) +
+                ((Math.floor(randomInRange(-3, 3)) + 3) * 100000000),
+            color: getRandomColor(colors),
+        });
+    }
+    return particles;
+};
+const renderLeafParticle = (particle) => {
+    // Extract encoded values
+    const tumblePhase = particle.rotation % 1000;
+    const swayPhase = Math.floor((particle.rotation % 1000000) / 1000);
+    const swayAmount = Math.floor((particle.rotation % 100000000) / 1000000);
+    const rotationSpeed = (Math.floor(particle.rotation / 100000000) - 3);
+    // Calculate tumbling and swaying
+    const tumble = Math.sin((Date.now() * 0.002 + tumblePhase) * Math.PI / 180) * 30;
+    const swayX = Math.sin((Date.now() * 0.001 + swayPhase) * Math.PI / 180) * swayAmount;
+    const rotation = (Date.now() * rotationSpeed * 0.01 + tumble) % 360;
+    return (React.createElement("div", { key: particle.id, style: {
+            width: `${particle.size}px`,
+            height: `${particle.size}px`,
+            position: 'relative',
+            transform: `translateX(${swayX}px) rotate(${rotation}deg)`,
+        } },
+        React.createElement("svg", { width: particle.size, height: particle.size, viewBox: `-${particle.size / 2} -${particle.size / 2} ${particle.size} ${particle.size}`, style: {
+                position: 'absolute',
+                top: 0,
+                left: 0,
+            } },
+            React.createElement("path", { d: `
+            M 0,-${particle.size / 2}
+            C -${particle.size / 3},-${particle.size / 3} -${particle.size / 3},${particle.size / 3} 0,${particle.size / 2}
+            C ${particle.size / 3},${particle.size / 3} ${particle.size / 3},-${particle.size / 3} 0,-${particle.size / 2}
+          `, fill: particle.color, opacity: "0.9" }),
+            React.createElement("line", { x1: "0", y1: -particle.size / 2, x2: "0", y2: particle.size / 2, stroke: "#8B4513", strokeWidth: "1", opacity: "0.5" }),
+            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" }),
+            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" }),
+            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" }),
+            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" }))));
+};
+
 const animations = {
     confetti: {
         createParticles: createConfettiParticles,
@@ -973,10 +1110,6 @@ const animations = {
         createParticles: createCoinParticles,
         renderParticle: renderCoinParticle,
     },
-    lightning: {
-        createParticles: createLightningParticles,
-        renderParticle: renderLightningParticle,
-    },
     petals: {
         createParticles: createPetalParticles,
         renderParticle: renderPetalParticle,
@@ -993,10 +1126,6 @@ const animations = {
         createParticles: createPaintParticles,
         renderParticle: renderPaintParticle,
     },
-    music: {
-        createParticles: createMusicParticles,
-        renderParticle: renderMusicParticle,
-    },
     balloons: {
         createParticles: createBalloonParticles,
         renderParticle: renderBalloonParticle,
@@ -1005,6 +1134,22 @@ const animations = {
         createParticles: createGalaxyParticles,
         renderParticle: renderGalaxyParticle,
     },
+    glitch: {
+        createParticles: createGlitchParticles,
+        renderParticle: renderGlitchParticle,
+    },
+    magicdust: {
+        createParticles: createMagicDustParticles,
+        renderParticle: renderMagicDustParticle,
+    },
+    crystals: {
+        createParticles: createCrystalParticles,
+        renderParticle: renderCrystalParticle,
+    },
+    leaves: {
+        createParticles: createLeafParticles,
+        renderParticle: renderLeafParticle,
+    },
 };
 
 const useReward = (elementId, animationType, config) => {