partycles 0.2.0 → 0.4.0

package/dist/index.esm.js

@@ -11,7 +11,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 {
@@ -26,9 +26,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$f = ['#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$f, elementSize = 20 } = config;
     const particles = [];
     for (let i = 0; i < particleCount; i++) {
         const angle = randomInRange(0, 360);
@@ -74,7 +74,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;
@@ -172,7 +172,7 @@ const createBubbleParticles = (origin, config) => {
             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;
@@ -209,7 +209,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;
@@ -239,7 +239,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;
@@ -322,7 +322,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;
@@ -376,7 +376,7 @@ const createLightningParticles = (origin, config) => {
             opacity: 1,
             size: randomInRange(elementSize * 0.5, elementSize * 1.5),
             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;
@@ -431,7 +431,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;
@@ -472,6 +472,1719 @@ const renderPetalParticle = (particle) => {
             } })));
 };
 
+const auroraColors = ['#00ff88', '#00ffaa', '#00ddff', '#0099ff', '#0066ff', '#9933ff', '#ff00ff'];
+const createAuroraParticles = (origin, config) => {
+    const { particleCount = 15, spread = 200, startVelocity = 3, colors = auroraColors, elementSize = 100 } = config;
+    const particles = [];
+    for (let i = 0; i < particleCount; i++) {
+        const angle = (i / particleCount) * spread - spread / 2;
+        const offset = randomInRange(-30, 30);
+        particles.push({
+            id: generateId(),
+            x: origin.x + angle + offset,
+            y: origin.y,
+            vx: randomInRange(-1, 1),
+            vy: -startVelocity,
+            life: config.lifetime || 250,
+            opacity: 0,
+            size: randomInRange(elementSize * 0.8, elementSize * 1.2),
+            rotation: randomInRange(-15, 15),
+            color: colors[Math.floor(Math.random() * colors.length)] || colors[0] || '#ffffff',
+        });
+    }
+    return particles;
+};
+const renderAuroraParticle = (particle) => {
+    // Create flowing wave motion
+    const wave = Math.sin(particle.life * 0.05) * 20;
+    const fadeIn = Math.min(1, (250 - particle.life) / 50);
+    const fadeOut = particle.life / 250;
+    const opacity = Math.min(fadeIn, fadeOut) * 0.4;
+    return (React.createElement("div", { key: particle.id, style: {
+            width: `${particle.size}px`,
+            height: `${particle.size * 0.3}px`,
+            position: 'relative',
+            transform: `translateX(${wave}px) rotate(${particle.rotation}deg)`,
+            filter: 'blur(2px)',
+        } },
+        React.createElement("div", { style: {
+                width: '100%',
+                height: '100%',
+                background: `linear-gradient(90deg, transparent, ${particle.color}, transparent)`,
+                borderRadius: '50%',
+                opacity,
+                boxShadow: `0 0 ${particle.size * 0.5}px ${particle.color}`,
+                animation: 'shimmer 2s infinite',
+            } }),
+        React.createElement("div", { style: {
+                position: 'absolute',
+                top: '20%',
+                left: '10%',
+                width: '80%',
+                height: '60%',
+                background: `radial-gradient(ellipse at center, ${particle.color}44, transparent)`,
+                borderRadius: '50%',
+                opacity: opacity * 0.5,
+                filter: 'blur(4px)',
+            } })));
+};
+
+const fireflyColors = ['#FFFF99', '#FFFFCC', '#FFFF66', '#FFFFAA'];
+const createFireflyParticles = (origin, config) => {
+    const { particleCount = 20, spread = 150, startVelocity = 2, colors = fireflyColors, elementSize = 8 } = config;
+    const particles = [];
+    for (let i = 0; i < particleCount; i++) {
+        const angle = randomInRange(0, 360) * (Math.PI / 180);
+        const velocity = randomInRange(startVelocity * 0.3, startVelocity);
+        particles.push({
+            id: generateId(),
+            x: origin.x + randomInRange(-spread / 2, spread / 2),
+            y: origin.y + randomInRange(-20, 20),
+            vx: Math.cos(angle) * velocity,
+            vy: Math.sin(angle) * velocity * 0.5, // More horizontal movement
+            life: config.lifetime || 300,
+            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] || '#ffffff',
+        });
+    }
+    return particles;
+};
+const renderFireflyParticle = (particle) => {
+    // Create organic floating motion
+    const floatX = Math.sin(particle.life * 0.02 + particle.rotation) * 15;
+    const floatY = Math.cos(particle.life * 0.03 + particle.rotation) * 10;
+    // Blinking effect - each firefly has its own rhythm based on rotation
+    const blinkCycle = Math.sin(particle.life * 0.1 + particle.rotation * 0.1);
+    const isBlinking = blinkCycle > 0.3;
+    const glowIntensity = isBlinking ? 1 : 0.1;
+    // Fade in/out
+    const fadeIn = Math.min(1, (300 - particle.life) / 30);
+    const fadeOut = particle.life / 300;
+    const baseFade = Math.min(fadeIn, fadeOut);
+    return (React.createElement("div", { key: particle.id, style: {
+            width: `${particle.size}px`,
+            height: `${particle.size}px`,
+            position: 'relative',
+            transform: `translate(${floatX}px, ${floatY}px)`,
+        } },
+        React.createElement("div", { style: {
+                width: '100%',
+                height: '100%',
+                background: particle.color,
+                borderRadius: '50%',
+                opacity: baseFade * glowIntensity,
+                boxShadow: `
+            0 0 ${particle.size}px ${particle.color},
+            0 0 ${particle.size * 2}px ${particle.color},
+            0 0 ${particle.size * 3}px ${particle.color}88
+          `,
+                transition: 'opacity 0.3s ease',
+            } }),
+        React.createElement("div", { style: {
+                position: 'absolute',
+                top: '50%',
+                left: '50%',
+                width: `${particle.size * 4}px`,
+                height: `${particle.size * 4}px`,
+                background: `radial-gradient(circle, ${particle.color}44 0%, transparent 70%)`,
+                borderRadius: '50%',
+                transform: 'translate(-50%, -50%)',
+                opacity: baseFade * glowIntensity * 0.5,
+                transition: 'opacity 0.3s ease',
+            } })));
+};
+
+const paintColors = ['#FF006E', '#FB5607', '#FFBE0B', '#8338EC', '#3A86FF', '#06FFB4'];
+const createPaintParticles = (origin, config) => {
+    const { particleCount = 25, spread = 120, startVelocity = 35, colors = paintColors, elementSize = 30 } = config;
+    const particles = [];
+    for (let i = 0; i < particleCount; i++) {
+        const angle = randomInRange(-spread / 2, spread / 2) * (Math.PI / 180);
+        const velocity = randomInRange(startVelocity * 0.5, startVelocity);
+        const isMainSplat = i < 5; // First few particles are bigger splats
+        particles.push({
+            id: generateId(),
+            x: origin.x,
+            y: origin.y,
+            vx: Math.sin(angle) * velocity * (isMainSplat ? 0.3 : 1),
+            vy: -Math.cos(angle) * velocity * 0.7 + (isMainSplat ? 5 : 0),
+            life: config.lifetime || 150,
+            opacity: 1,
+            size: isMainSplat
+                ? 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] || '#ffffff',
+        });
+    }
+    return particles;
+};
+const renderPaintParticle = (particle) => {
+    // Paint splatter gets more stretched as it flies
+    const stretch = 1 + (Math.abs(particle.vx) + Math.abs(particle.vy)) * 0.01;
+    const squish = 1 / stretch;
+    // Drip effect for some particles
+    const isDripping = particle.size > 15 && particle.rotation > 180;
+    const dripLength = isDripping ? particle.size * 0.5 : 0;
+    return (React.createElement("div", { key: particle.id, style: {
+            width: `${particle.size}px`,
+            height: `${particle.size}px`,
+            position: 'relative',
+            transform: `
+          scaleX(${stretch}) 
+          scaleY(${squish}) 
+          rotate(${Math.atan2(particle.vy, particle.vx) * 180 / Math.PI}deg)
+        `,
+        } },
+        React.createElement("div", { style: {
+                width: '100%',
+                height: '100%',
+                background: particle.color,
+                borderRadius: '50%',
+                position: 'relative',
+                boxShadow: `inset -2px -2px 4px rgba(0,0,0,0.2)`,
+            } },
+            React.createElement("div", { style: {
+                    position: 'absolute',
+                    top: '20%',
+                    left: '20%',
+                    width: '30%',
+                    height: '30%',
+                    background: particle.color,
+                    borderRadius: '50%',
+                    opacity: 0.8,
+                    transform: `translate(${randomInRange(-5, 5)}px, ${randomInRange(-5, 5)}px)`,
+                } }),
+            React.createElement("div", { style: {
+                    position: 'absolute',
+                    bottom: '15%',
+                    right: '15%',
+                    width: '25%',
+                    height: '25%',
+                    background: particle.color,
+                    borderRadius: '50%',
+                    opacity: 0.7,
+                } })),
+        isDripping && (React.createElement("div", { style: {
+                position: 'absolute',
+                bottom: `-${dripLength}px`,
+                left: '40%',
+                width: '20%',
+                height: `${dripLength}px`,
+                background: particle.color,
+                borderRadius: '0 0 50% 50%',
+                opacity: 0.9,
+            } }))));
+};
+
+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] || '#ffffff',
+        });
+    }
+    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;
+    // Simple fade based on particle life
+    // Assume default lifetime of 300 if not set
+    const totalLife = 300;
+    const age = totalLife - particle.life; // How old the particle is
+    // Fade in during first 20 frames
+    const fadeIn = age < 20 ? age / 20 : 1;
+    // Fade out during last 50 frames
+    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;
+    const particles = [];
+    for (let i = 0; i < particleCount; i++) {
+        const angle = randomInRange(-spread / 2, spread / 2) * (Math.PI / 180);
+        const velocity = randomInRange(startVelocity * 0.7, startVelocity);
+        particles.push({
+            id: generateId(),
+            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] || '#ffffff',
+        });
+    }
+    return particles;
+};
+const renderBalloonParticle = (particle) => {
+    // Gentle swaying motion
+    const sway = Math.sin(particle.life * 0.03) * 15;
+    const bob = Math.sin(particle.life * 0.05) * 5;
+    // Fade out near the end
+    const fadeOut = particle.life > 50 ? 1 : particle.life / 50;
+    return (React.createElement("div", { key: particle.id, style: {
+            width: `${particle.size}px`,
+            height: `${particle.size * 1.2}px`,
+            position: 'relative',
+            transform: `
+          translateX(${sway}px) 
+          translateY(${bob}px)
+          rotate(${particle.rotation + sway * 0.2}deg)
+        `,
+            opacity: particle.opacity * fadeOut,
+        } },
+        React.createElement("div", { style: {
+                width: '100%',
+                height: '100%',
+                background: `radial-gradient(circle at 30% 30%, ${particle.color}ee, ${particle.color})`,
+                borderRadius: '50% 50% 50% 50% / 60% 60% 40% 40%',
+                position: 'relative',
+                boxShadow: `
+            inset -5px -5px 10px rgba(0,0,0,0.2),
+            0 4px 8px rgba(0,0,0,0.2)
+          `,
+            } },
+            React.createElement("div", { style: {
+                    position: 'absolute',
+                    top: '15%',
+                    left: '20%',
+                    width: '25%',
+                    height: '30%',
+                    background: 'radial-gradient(circle, rgba(255,255,255,0.8) 0%, transparent 70%)',
+                    borderRadius: '50%',
+                    transform: 'rotate(-20deg)',
+                } }),
+            React.createElement("div", { style: {
+                    position: 'absolute',
+                    bottom: '-5px',
+                    left: '50%',
+                    transform: 'translateX(-50%)',
+                    width: '0',
+                    height: '0',
+                    borderLeft: '4px solid transparent',
+                    borderRight: '4px solid transparent',
+                    borderTop: `8px solid ${particle.color}`,
+                } })),
+        React.createElement("svg", { style: {
+                position: 'absolute',
+                top: '100%',
+                left: '50%',
+                transform: 'translateX(-50%)',
+                width: '2px',
+                height: `${particle.size * 2}px`,
+                opacity: 0.6,
+            } },
+            React.createElement("path", { d: `M1 0 Q ${1 + Math.sin(particle.life * 0.1) * 3} ${particle.size} 1 ${particle.size * 2}`, stroke: particle.color, strokeWidth: "1.5", fill: "none", opacity: "0.4" }))));
+};
+
+const galaxyColors = ['#FFFFFF', '#FFF9C4', '#BBDEFB', '#C5CAE9', '#D1C4E9', '#FFE082', '#FFCCBC'];
+const createGalaxyParticles = (origin, config) => {
+    const { particleCount = 60, spread = 200, startVelocity = 15, colors = galaxyColors, elementSize = 8 } = config;
+    const particles = [];
+    for (let i = 0; i < particleCount; i++) {
+        // Create spiral distribution
+        const progress = i / particleCount;
+        const spiralAngle = progress * Math.PI * 4; // 2 full rotations
+        const radius = progress * spread;
+        // Add some randomness to make it look natural
+        const angleOffset = randomInRange(-0.3, 0.3);
+        const radiusOffset = randomInRange(-10, 10);
+        const finalAngle = spiralAngle + angleOffset;
+        const finalRadius = radius + radiusOffset;
+        // Position based on spiral
+        const offsetX = Math.cos(finalAngle) * finalRadius;
+        const offsetY = Math.sin(finalAngle) * finalRadius;
+        // Velocity follows the spiral tangent
+        const tangentAngle = finalAngle + Math.PI / 2;
+        const speed = startVelocity * (1 - progress * 0.5); // Outer stars move slower
+        particles.push({
+            id: generateId(),
+            x: origin.x,
+            y: origin.y,
+            vx: Math.cos(tangentAngle) * speed * 0.3 + offsetX * 0.02,
+            vy: Math.sin(tangentAngle) * speed * 0.3 + offsetY * 0.02,
+            life: config.lifetime || 250,
+            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] || '#ffffff',
+        });
+    }
+    return particles;
+};
+const renderGalaxyParticle = (particle) => {
+    // Particles slowly rotate around center while expanding
+    const age = (250 - particle.life) / 250;
+    const expansionRate = 1 + age * 0.5;
+    // Fade in quickly, fade out slowly
+    const fadeIn = Math.min(1, (250 - particle.life) / 30);
+    const fadeOut = particle.life / 250;
+    const opacity = Math.min(fadeIn, fadeOut);
+    // Twinkle effect
+    const twinkle = Math.sin(particle.life * 0.2 + particle.rotation) * 0.3 + 0.7;
+    return (React.createElement("div", { key: particle.id, style: {
+            width: `${particle.size}px`,
+            height: `${particle.size}px`,
+            position: 'relative',
+            transform: `scale(${expansionRate})`,
+            opacity: opacity * twinkle,
+        } },
+        React.createElement("div", { style: {
+                width: '100%',
+                height: '100%',
+                background: particle.color,
+                borderRadius: '50%',
+                boxShadow: `
+            0 0 ${particle.size}px ${particle.color},
+            0 0 ${particle.size * 2}px ${particle.color}88,
+            0 0 ${particle.size * 3}px ${particle.color}44
+          `,
+                position: 'relative',
+            } },
+            React.createElement("div", { style: {
+                    position: 'absolute',
+                    top: '50%',
+                    left: '50%',
+                    width: `${particle.size * 3}px`,
+                    height: '1px',
+                    background: `linear-gradient(90deg, transparent, ${particle.color}, transparent)`,
+                    transform: `translate(-50%, -50%) rotate(${particle.rotation}deg)`,
+                    opacity: twinkle,
+                } }),
+            React.createElement("div", { style: {
+                    position: 'absolute',
+                    top: '50%',
+                    left: '50%',
+                    width: '1px',
+                    height: `${particle.size * 3}px`,
+                    background: `linear-gradient(180deg, transparent, ${particle.color}, transparent)`,
+                    transform: `translate(-50%, -50%) rotate(${particle.rotation}deg)`,
+                    opacity: twinkle,
+                } })),
+        particle.size > 5 && (React.createElement("div", { style: {
+                position: 'absolute',
+                top: '50%',
+                left: '50%',
+                width: `${particle.size * 6}px`,
+                height: `${particle.size * 6}px`,
+                background: `radial-gradient(circle, ${particle.color}22 0%, transparent 70%)`,
+                borderRadius: '50%',
+                transform: 'translate(-50%, -50%)',
+                opacity: opacity * 0.3,
+                filter: 'blur(3px)',
+            } }))));
+};
+
+const matrixChars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZアイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワン';
+const createMatrixParticles = (origin, config) => {
+    const { particleCount = 50, elementSize = 300 } = config;
+    const particles = [];
+    const columns = Math.floor(elementSize / 20);
+    for (let i = 0; i < columns; i++) {
+        const columnX = origin.x - elementSize / 2 + (i / columns) * elementSize;
+        const columnParticles = Math.floor(Math.random() * 15) + 10;
+        for (let j = 0; j < columnParticles; j++) {
+            const charIndex = Math.floor(Math.random() * matrixChars.length);
+            const speed = randomInRange(80, 120);
+            particles.push({
+                id: generateId(),
+                x: columnX + randomInRange(-10, 10),
+                y: origin.y - elementSize / 2 - j * 25 - randomInRange(0, 100),
+                vx: columnParticles, // Store columnHeight in vx (since we don't use horizontal movement)
+                vy: speed,
+                life: config.lifetime || 150,
+                opacity: 1,
+                size: 20 + (j * 0.1), // Store fadeDelay as decimal part
+                rotation: charIndex + (columnParticles * 1000), // Store charIndex and columnHeight
+                color: '#00ff00',
+            });
+        }
+    }
+    return particles.slice(0, particleCount);
+};
+const renderMatrixParticle = (particle) => {
+    // Extract stored values
+    const charIndex = Math.floor(particle.rotation % 1000);
+    const columnHeight = Math.floor(particle.rotation / 1000);
+    const fadeDelay = (particle.size - Math.floor(particle.size));
+    const character = matrixChars[charIndex] || matrixChars[0];
+    const brightness = 1 - (fadeDelay / columnHeight) * 0.5;
+    return (React.createElement("div", { key: particle.id, style: {
+            fontSize: '20px',
+            fontFamily: 'monospace',
+            fontWeight: 'bold',
+            color: `rgba(${0}, ${255 * brightness}, ${0}, ${particle.opacity})`,
+            textShadow: `0 0 10px rgba(0, ${255 * brightness}, 0, ${particle.opacity * 0.8})`,
+            userSelect: 'none',
+        } }, character));
+};
+
+const pixelColors = ['#FF0000', '#00FF00', '#0000FF', '#FFFF00', '#FF00FF', '#00FFFF', '#FFA500', '#FF1493'];
+const createPixelParticles = (origin, config) => {
+    const { particleCount = 30, colors = pixelColors, elementSize = 20 } = config;
+    const particles = [];
+    const gridSize = Math.floor(Math.sqrt(particleCount));
+    const spacing = 30;
+    for (let i = 0; i < gridSize; i++) {
+        for (let j = 0; j < gridSize; j++) {
+            const targetX = origin.x + (i - gridSize / 2) * spacing;
+            const targetY = origin.y + (j - gridSize / 2) * spacing;
+            const angle = randomInRange(0, 360);
+            const velocity = randomInRange(150, 300);
+            particles.push({
+                id: generateId(),
+                x: targetX,
+                y: targetY,
+                vx: Math.cos(degreesToRadians(angle)) * velocity,
+                vy: Math.sin(degreesToRadians(angle)) * velocity,
+                life: config.lifetime || 150,
+                opacity: 1,
+                size: randomInRange(elementSize * 0.6, elementSize),
+                // Store targetX offset in rotation (from -500 to 500, add 1000 to make positive)
+                rotation: ((targetX - origin.x) + 500) + ((targetY - origin.y) + 500) * 1000,
+                color: getRandomColor(colors),
+            });
+        }
+    }
+    return particles.slice(0, particleCount);
+};
+const renderPixelParticle = (particle) => {
+    return (React.createElement("div", { key: particle.id, style: {
+            width: `${particle.size}px`,
+            height: `${particle.size}px`,
+            backgroundColor: particle.color,
+            boxShadow: `0 0 ${particle.size / 2}px ${particle.color}`,
+        } }));
+};
+
+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 getDiceFace = (value) => {
+    const faces = ['⚀', '⚁', '⚂', '⚃', '⚄', '⚅'];
+    return faces[value - 1] || '⚀';
+};
+const createDiceParticles = (origin, config) => {
+    const { particleCount = 8, startVelocity = 25, elementSize = 40 } = config;
+    const particles = [];
+    for (let i = 0; i < particleCount; i++) {
+        const angle = randomInRange(0, 360);
+        const velocity = randomInRange(startVelocity * 0.5, startVelocity);
+        const diceValue = Math.floor(randomInRange(1, 7));
+        particles.push({
+            id: generateId(),
+            x: origin.x,
+            y: origin.y,
+            vx: Math.cos(degreesToRadians(angle)) * velocity,
+            vy: Math.sin(degreesToRadians(angle)) * velocity - 30,
+            life: config.lifetime || 150,
+            opacity: 1,
+            size: randomInRange(elementSize * 0.8, elementSize * 1.2),
+            // Store dice value (1-6) in lower bits, and rotation angles in upper bits
+            rotation: diceValue + (Math.floor(randomInRange(0, 360)) * 10),
+            color: '#ffffff',
+        });
+    }
+    return particles;
+};
+const renderDiceParticle = (particle) => {
+    const diceValue = particle.rotation % 10;
+    const rotationAngle = Math.floor(particle.rotation / 10);
+    return (React.createElement("div", { key: particle.id, style: {
+            width: `${particle.size}px`,
+            height: `${particle.size}px`,
+            fontSize: `${particle.size * 0.8}px`,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            backgroundColor: '#fff',
+            color: '#000',
+            borderRadius: `${particle.size * 0.2}px`,
+            transform: `rotate(${rotationAngle}deg)`,
+            transformStyle: 'preserve-3d',
+            boxShadow: '0 4px 8px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.5)',
+            border: '2px solid #333',
+            fontWeight: 'bold',
+        } }, getDiceFace(diceValue)));
+};
+
+const levelUpTexts = ['+1', '+10', '+100', 'XP', '+XP', 'LEVEL UP!', 'CRITICAL!', 'COMBO!', 'PERFECT!'];
+const levelUpColors = [
+    { text: '#FFD700', glow: '#FFA500' }, // Gold
+    { text: '#00FF00', glow: '#00AA00' }, // Green
+    { text: '#00FFFF', glow: '#0088FF' }, // Cyan
+    { text: '#FF00FF', glow: '#AA00AA' }, // Magenta
+    { text: '#FFFF00', glow: '#FFAA00' }, // Yellow
+];
+const createLevelUpParticles = (origin, config) => {
+    const { particleCount = 10, startVelocity = 20, elementSize = 30 } = config;
+    const particles = [];
+    for (let i = 0; i < particleCount; i++) {
+        const angle = randomInRange(-45, 45);
+        const velocity = randomInRange(startVelocity * 0.5, startVelocity * 1.5);
+        const colorSetIndex = Math.floor(Math.random() * levelUpColors.length);
+        const colorSet = levelUpColors[colorSetIndex] || levelUpColors[0];
+        const textIndex = Math.floor(Math.random() * levelUpTexts.length);
+        const text = levelUpTexts[textIndex];
+        const isMainText = text === 'LEVEL UP!' || text === 'CRITICAL!';
+        const fontSize = isMainText ? randomInRange(elementSize * 1.3, elementSize * 2) : randomInRange(elementSize * 0.7, elementSize * 1.2);
+        particles.push({
+            id: generateId(),
+            x: origin.x,
+            y: origin.y,
+            vx: Math.sin(degreesToRadians(angle)) * velocity,
+            vy: -Math.cos(degreesToRadians(angle)) * velocity - 10,
+            life: config.lifetime || 150,
+            opacity: 1,
+            size: fontSize, // Store fontSize in size
+            // Store textIndex (0-8) + colorSetIndex (0-4) * 10 + delay (0-50) * 100
+            rotation: textIndex + (colorSetIndex * 10) + (Math.floor(i * 5) * 100),
+            color: colorSet.text,
+        });
+    }
+    return particles;
+};
+const renderLevelUpParticle = (particle) => {
+    // Extract encoded values
+    const textIndex = particle.rotation % 10;
+    const colorSetIndex = Math.floor((particle.rotation % 100) / 10);
+    const delay = Math.floor(particle.rotation / 100) / 100;
+    const text = levelUpTexts[textIndex] || levelUpTexts[0];
+    const colorSet = levelUpColors[colorSetIndex] || levelUpColors[0];
+    return (React.createElement("div", { key: particle.id, style: {
+            fontSize: `${particle.size}px`,
+            fontWeight: 'bold',
+            fontFamily: 'Arial, sans-serif',
+            color: particle.color,
+            textShadow: `
+          0 0 10px ${colorSet.glow},
+          0 0 20px ${colorSet.glow},
+          0 0 30px ${particle.color},
+          0 2px 4px rgba(0,0,0,0.5)
+        `,
+            letterSpacing: '2px',
+            textTransform: 'uppercase',
+            whiteSpace: 'nowrap',
+            userSelect: 'none',
+            animationDelay: `${delay}s`,
+        } }, text));
+};
+
+const defaultColors$e = ['#9C27B0', '#E91E63', '#FF00FF', '#00FFFF', '#FFD700', '#FF69B4', '#DA70D6', '#9370DB'];
+const createMagicDustParticles = (origin, config) => {
+    const { particleCount = 40, startVelocity = 8, colors = defaultColors$e, 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$d = ['#FFFFFF', '#F0F0F0', '#E8E8E8', '#F5F5F5', '#FAFAFA'];
+const createGhostParticles = (origin, config) => {
+    const { particleCount = 8, startVelocity = 5, colors = defaultColors$d, elementSize = 30 } = config;
+    const particles = [];
+    for (let i = 0; i < particleCount; i++) {
+        // Ghosts float upward with slight horizontal movement
+        const angle = randomInRange(250, 290); // Mostly upward
+        const velocity = randomInRange(startVelocity * 0.5, startVelocity);
+        const color = getRandomColor(colors);
+        particles.push({
+            id: generateId(),
+            x: origin.x + randomInRange(-50, 50),
+            y: origin.y + randomInRange(-20, 20),
+            vx: Math.cos(degreesToRadians(angle)) * velocity,
+            vy: Math.sin(degreesToRadians(angle)) * velocity,
+            life: config.lifetime || 200,
+            opacity: randomInRange(0.5, 0.8),
+            size: randomInRange(elementSize * 0.8, elementSize * 1.2),
+            rotation: randomInRange(-15, 15),
+            color,
+        });
+    }
+    return particles;
+};
+const renderGhostParticle = (particle) => {
+    // Calculate wave effect for tail
+    const waveOffset = Math.sin(Date.now() * 0.003 + particle.x * 0.01) * 3;
+    return (React.createElement("div", { key: particle.id, style: {
+            width: `${particle.size}px`,
+            height: `${particle.size * 1.4}px`,
+            position: 'relative',
+            transform: `rotate(${particle.rotation}deg)`,
+        } },
+        React.createElement("div", { style: {
+                position: 'absolute',
+                width: '100%',
+                height: '70%',
+                backgroundColor: particle.color,
+                borderRadius: '50% 50% 0 0',
+                boxShadow: `0 0 20px rgba(255, 255, 255, 0.5), inset 0 0 10px rgba(0, 0, 0, 0.1)`,
+            } }),
+        React.createElement("div", { style: {
+                position: 'absolute',
+                bottom: 0,
+                width: '100%',
+                height: '40%',
+                backgroundColor: particle.color,
+                clipPath: `polygon(
+            0 0,
+            100% 0,
+            100% 60%,
+            ${75 + waveOffset}% 80%,
+            ${50 - waveOffset}% 100%,
+            ${25 + waveOffset}% 80%,
+            0 60%
+          )`,
+            } }),
+        React.createElement("div", { style: {
+                position: 'absolute',
+                top: '30%',
+                left: '25%',
+                width: '15%',
+                height: '15%',
+                backgroundColor: '#000',
+                borderRadius: '50%',
+            } }),
+        React.createElement("div", { style: {
+                position: 'absolute',
+                top: '30%',
+                right: '25%',
+                width: '15%',
+                height: '15%',
+                backgroundColor: '#000',
+                borderRadius: '50%',
+            } }),
+        React.createElement("div", { style: {
+                position: 'absolute',
+                top: '45%',
+                left: '50%',
+                transform: 'translateX(-50%)',
+                width: '25%',
+                height: '15%',
+                border: '2px solid #000',
+                borderTop: 'none',
+                borderRadius: '0 0 50% 50%',
+            } })));
+};
+
+const defaultColors$c = ['#FF1493', '#00CED1', '#FFD700', '#FF69B4', '#7B68EE', '#00FA9A', '#FF6347', '#4169E1'];
+const createCrystalParticles = (origin, config) => {
+    const { particleCount = 15, startVelocity = 15, colors = defaultColors$c, 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$b = ['#FF4500', '#DC143C', '#B22222', '#8B0000', '#FF6347', '#FF8C00'];
+const createDragonParticles = (origin, config) => {
+    const { particleCount = 6, startVelocity = 12, colors = defaultColors$b, elementSize = 40 } = config;
+    const particles = [];
+    for (let i = 0; i < particleCount; i++) {
+        // Dragons fly in various directions with swooping motion
+        const angle = randomInRange(0, 360);
+        const velocity = randomInRange(startVelocity * 0.7, startVelocity);
+        const color = getRandomColor(colors);
+        particles.push({
+            id: generateId(),
+            x: origin.x + randomInRange(-30, 30),
+            y: origin.y + randomInRange(-30, 30),
+            vx: Math.cos(degreesToRadians(angle)) * velocity,
+            vy: Math.sin(degreesToRadians(angle)) * velocity,
+            life: config.lifetime || 180,
+            opacity: 1,
+            size: randomInRange(elementSize * 0.8, elementSize),
+            rotation: angle,
+            color,
+        });
+    }
+    return particles;
+};
+const renderDragonParticle = (particle) => {
+    // Calculate wing flap animation
+    const wingFlap = Math.sin(Date.now() * 0.01 + particle.x) * 10;
+    // Calculate fire breath pulse
+    const firePulse = (Math.sin(Date.now() * 0.005 + particle.y) + 1) / 2;
+    return (React.createElement("div", { key: particle.id, style: {
+            width: `${particle.size}px`,
+            height: `${particle.size}px`,
+            position: 'relative',
+            transform: `rotate(${particle.rotation}deg)`,
+        } },
+        React.createElement("div", { style: {
+                position: 'absolute',
+                width: '60%',
+                height: '40%',
+                top: '30%',
+                left: '20%',
+                backgroundColor: particle.color,
+                borderRadius: '50% 40% 40% 50%',
+                boxShadow: `0 2px 10px rgba(0, 0, 0, 0.3)`,
+            } }),
+        React.createElement("div", { style: {
+                position: 'absolute',
+                width: '35%',
+                height: '35%',
+                top: '25%',
+                right: '15%',
+                backgroundColor: particle.color,
+                borderRadius: '40% 50% 50% 40%',
+                transform: 'rotate(-10deg)',
+            } },
+            React.createElement("div", { style: {
+                    position: 'absolute',
+                    width: '20%',
+                    height: '20%',
+                    top: '30%',
+                    right: '25%',
+                    backgroundColor: '#FFD700',
+                    borderRadius: '50%',
+                    boxShadow: '0 0 4px #FFD700',
+                } })),
+        React.createElement("div", { style: {
+                position: 'absolute',
+                width: '40%',
+                height: '50%',
+                top: '15%',
+                left: '30%',
+                backgroundColor: `${particle.color}CC`,
+                clipPath: 'polygon(0% 100%, 50% 0%, 100% 30%, 90% 60%, 100% 90%, 50% 100%)',
+                transform: `rotateX(${wingFlap}deg)`,
+                transformOrigin: 'bottom center',
+            } }),
+        React.createElement("div", { style: {
+                position: 'absolute',
+                width: '40%',
+                height: '50%',
+                top: '35%',
+                left: '30%',
+                backgroundColor: `${particle.color}AA`,
+                clipPath: 'polygon(0% 0%, 50% 0%, 100% 30%, 90% 60%, 100% 90%, 50% 100%)',
+                transform: `rotateX(${-wingFlap}deg)`,
+                transformOrigin: 'top center',
+            } }),
+        React.createElement("div", { style: {
+                position: 'absolute',
+                width: '40%',
+                height: '15%',
+                top: '35%',
+                left: '5%',
+                backgroundColor: particle.color,
+                clipPath: 'polygon(0% 50%, 70% 0%, 100% 20%, 100% 80%, 70% 100%, 0% 50%)',
+            } }),
+        React.createElement("div", { style: {
+                position: 'absolute',
+                width: '30%',
+                height: '20%',
+                top: '35%',
+                right: '5%',
+                background: `radial-gradient(ellipse, #FFD700 0%, #FF4500 50%, transparent 100%)`,
+                transform: `scale(${0.8 + firePulse * 0.4})`,
+                opacity: 0.8 + firePulse * 0.2,
+                filter: 'blur(1px)',
+            } }),
+        React.createElement("div", { style: {
+                position: 'absolute',
+                width: '25%',
+                height: '15%',
+                top: '37%',
+                right: '0%',
+                background: `radial-gradient(ellipse, #FFA500 0%, #FF6347 50%, transparent 100%)`,
+                transform: `scale(${0.6 + firePulse * 0.6})`,
+                opacity: 0.6 + firePulse * 0.4,
+                filter: 'blur(2px)',
+            } })));
+};
+
+const defaultColors$a = ['#9C27B0', '#673AB7', '#3F51B5', '#00BCD4', '#4CAF50', '#FFEB3B', '#FF9800'];
+// Ancient rune symbols
+const runeSymbols = [
+    'ᚠ', 'ᚢ', 'ᚦ', 'ᚨ', 'ᚱ', 'ᚲ', 'ᚷ', 'ᚹ', 'ᚺ', 'ᚾ', 'ᛁ', 'ᛃ', 'ᛇ', 'ᛈ', 'ᛉ', 'ᛋ', 'ᛏ', 'ᛒ', 'ᛖ', 'ᛗ', 'ᛚ', 'ᛜ', 'ᛞ', 'ᛟ'
+];
+const createRuneParticles = (origin, config) => {
+    const { particleCount = 12, startVelocity = 6, colors = defaultColors$a, elementSize = 35 } = config;
+    const particles = [];
+    for (let i = 0; i < particleCount; i++) {
+        // Runes float upward in a mystical pattern
+        const angle = randomInRange(250, 290); // Mostly upward
+        const velocity = randomInRange(startVelocity * 0.3, startVelocity * 0.7);
+        const color = getRandomColor(colors);
+        // Create circular spawn pattern
+        const spawnAngle = (i / particleCount) * 360;
+        const spawnRadius = randomInRange(20, 60);
+        const runeIndex = Math.floor(Math.random() * runeSymbols.length);
+        particles.push({
+            id: generateId(),
+            x: origin.x + Math.cos(degreesToRadians(spawnAngle)) * spawnRadius,
+            y: origin.y + Math.sin(degreesToRadians(spawnAngle)) * spawnRadius,
+            vx: Math.cos(degreesToRadians(angle)) * velocity + randomInRange(-1, 1),
+            vy: Math.sin(degreesToRadians(angle)) * velocity,
+            life: config.lifetime || 160,
+            opacity: 0,
+            size: randomInRange(elementSize * 0.8, elementSize * 1.2),
+            // Store runeIndex in lower bits of rotation, keep rotation angle in upper bits
+            rotation: runeIndex + (Math.floor(randomInRange(0, 360)) * 100),
+            color,
+        });
+    }
+    return particles;
+};
+const renderRuneParticle = (particle) => {
+    // Extract rune index and rotation from encoded value
+    const runeIndex = particle.rotation % 100;
+    const rotationAngle = Math.floor(particle.rotation / 100);
+    const runeSymbol = runeSymbols[runeIndex] || runeSymbols[0];
+    // Calculate pulsing glow effect
+    const glowIntensity = (Math.sin(Date.now() * 0.003 + particle.x * 0.01) + 1) / 2;
+    // Fade in and out based on life
+    const fadeProgress = particle.life > 120 ? (160 - particle.life) / 40 : particle.life < 40 ? particle.life / 40 : 1;
+    return (React.createElement("div", { key: particle.id, style: {
+            width: `${particle.size}px`,
+            height: `${particle.size}px`,
+            position: 'relative',
+            transform: `rotate(${rotationAngle}deg)`,
+            opacity: fadeProgress,
+        } },
+        React.createElement("div", { style: {
+                position: 'absolute',
+                width: '100%',
+                height: '100%',
+                borderRadius: '50%',
+                background: `radial-gradient(circle, ${particle.color}44 0%, transparent 70%)`,
+                transform: `scale(${1.5 + glowIntensity * 0.5})`,
+                filter: 'blur(4px)',
+            } }),
+        React.createElement("div", { style: {
+                position: 'absolute',
+                width: '100%',
+                height: '100%',
+                borderRadius: '50%',
+                background: `radial-gradient(circle, ${particle.color}88 0%, ${particle.color}44 50%, transparent 100%)`,
+                transform: `scale(${1.2 + glowIntensity * 0.3})`,
+            } }),
+        React.createElement("div", { style: {
+                position: 'absolute',
+                width: '100%',
+                height: '100%',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                fontSize: `${particle.size * 0.7}px`,
+                fontWeight: 'bold',
+                color: '#FFFFFF',
+                textShadow: `
+            0 0 10px ${particle.color},
+            0 0 20px ${particle.color},
+            0 0 30px ${particle.color},
+            0 0 40px ${particle.color}
+          `,
+                filter: `brightness(${1.5 + glowIntensity * 0.5})`,
+            } }, runeSymbol),
+        [0, 72, 144, 216, 288].map((angle, index) => (React.createElement("div", { key: index, style: {
+                position: 'absolute',
+                width: '4px',
+                height: '4px',
+                backgroundColor: '#FFFFFF',
+                borderRadius: '50%',
+                top: '50%',
+                left: '50%',
+                transform: `
+              translate(-50%, -50%) 
+              rotate(${angle + rotationAngle}deg) 
+              translateY(-${particle.size * 0.6}px)
+              scale(${0.5 + glowIntensity})
+            `,
+                boxShadow: '0 0 6px #FFFFFF',
+                opacity: glowIntensity,
+            } })))));
+};
+
+const defaultColors$9 = ['#FF6B6B', '#4ECDC4', '#45B7D1', '#F7DC6F', '#BB8FCE'];
+const createButterflyParticles = (origin, config) => {
+    const { particleCount = 6, startVelocity = 3, colors = defaultColors$9, elementSize = 40 } = config;
+    const particles = [];
+    for (let i = 0; i < particleCount; i++) {
+        const angle = randomInRange(0, 360);
+        const velocity = randomInRange(startVelocity * 0.5, startVelocity);
+        particles.push({
+            id: generateId(),
+            x: origin.x + randomInRange(-50, 50),
+            y: origin.y + randomInRange(-30, 30),
+            vx: Math.cos(angle * Math.PI / 180) * velocity,
+            vy: -Math.abs(Math.sin(angle * Math.PI / 180) * velocity * 0.5), // Float upward
+            life: config.lifetime || 200,
+            opacity: 1,
+            size: randomInRange(elementSize * 0.8, elementSize * 1.2),
+            // Encode wing phase (0-360), wobble phase (0-360), and rotation speed (-10 to 10)
+            rotation: Math.floor(randomInRange(0, 360)) + (Math.floor(randomInRange(0, 360)) * 1000) + ((Math.floor(randomInRange(-10, 10)) + 10) * 1000000),
+            color: getRandomColor(colors),
+        });
+    }
+    return particles;
+};
+const renderButterflyParticle = (particle) => {
+    // Extract encoded values
+    const wingPhase = (particle.rotation % 1000);
+    const wobblePhase = Math.floor((particle.rotation % 1000000) / 1000);
+    const rotationSpeed = (Math.floor(particle.rotation / 1000000) - 10) / 10;
+    // Calculate wing flapping and wobble
+    const wingAngle = Math.sin((Date.now() * 0.01 + wingPhase) * Math.PI / 180) * 30;
+    const wobbleX = Math.sin((Date.now() * 0.003 + wobblePhase) * Math.PI / 180) * 10;
+    const rotation = (Date.now() * rotationSpeed * 0.01) % 360;
+    return (React.createElement("div", { key: particle.id, style: {
+            width: `${particle.size}px`,
+            height: `${particle.size}px`,
+            position: 'relative',
+            transform: `translateX(${wobbleX}px) rotate(${rotation}deg)`,
+        } },
+        React.createElement("svg", { width: particle.size, height: particle.size, viewBox: "-25 -25 50 50", style: {
+                position: 'absolute',
+                top: 0,
+                left: 0,
+            } },
+            React.createElement("ellipse", { cx: "-8", cy: "0", rx: "12", ry: "18", fill: particle.color, opacity: "0.8", transform: `rotate(${-wingAngle} 0 0)` }),
+            React.createElement("ellipse", { cx: "-6", cy: "-10", rx: "8", ry: "12", fill: particle.color, opacity: "0.6", transform: `rotate(${-wingAngle - 15} 0 0)` }),
+            React.createElement("ellipse", { cx: "8", cy: "0", rx: "12", ry: "18", fill: particle.color, opacity: "0.8", transform: `rotate(${wingAngle} 0 0)` }),
+            React.createElement("ellipse", { cx: "6", cy: "-10", rx: "8", ry: "12", fill: particle.color, opacity: "0.6", transform: `rotate(${wingAngle + 15} 0 0)` }),
+            React.createElement("ellipse", { cx: "0", cy: "0", rx: "3", ry: "15", fill: "#333" }),
+            React.createElement("line", { x1: "0", y1: "-12", x2: "-3", y2: "-18", stroke: "#333", strokeWidth: "1" }),
+            React.createElement("line", { x1: "0", y1: "-12", x2: "3", y2: "-18", stroke: "#333", strokeWidth: "1" }),
+            React.createElement("circle", { cx: "-8", cy: "0", r: "3", fill: "white", opacity: "0.4" }),
+            React.createElement("circle", { cx: "8", cy: "0", r: "3", fill: "white", opacity: "0.4" }),
+            React.createElement("circle", { cx: "-6", cy: "-8", r: "2", fill: "black", opacity: "0.3" }),
+            React.createElement("circle", { cx: "6", cy: "-8", r: "2", fill: "black", opacity: "0.3" }))));
+};
+
+const defaultColors$8 = ['#D2691E', '#CD853F', '#8B4513', '#A0522D', '#FF8C00', '#FF6347'];
+const createLeafParticles = (origin, config) => {
+    const { particleCount = 10, colors = defaultColors$8, 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 defaultColors$7 = ['#4A90E2', '#5BA0F2', '#6BB0FF', '#3A80D2'];
+const createRainParticles = (origin, config) => {
+    const { particleCount = 50, colors = defaultColors$7, elementSize = 300 } = config;
+    const particles = [];
+    for (let i = 0; i < particleCount; i++) {
+        particles.push({
+            id: generateId(),
+            x: randomInRange(origin.x - elementSize / 2, origin.x + elementSize / 2),
+            y: origin.y - randomInRange(0, elementSize),
+            vx: randomInRange(-0.5, 0.5),
+            vy: randomInRange(8, 12),
+            life: config.lifetime || 150,
+            opacity: randomInRange(0.3, 0.7),
+            size: randomInRange(2, 4),
+            // Encode: length (15-25) + splashing state (0 or 1) * 100 + splash frame (0-15) * 1000
+            rotation: Math.floor(randomInRange(15, 25)),
+            color: getRandomColor(colors),
+        });
+    }
+    return particles;
+};
+const renderRainParticle = (particle) => {
+    // Extract encoded values
+    const length = particle.rotation % 100;
+    const isSplashing = Math.floor((particle.rotation % 1000) / 100) === 1;
+    const splashFrame = Math.floor(particle.rotation / 1000);
+    // Render splash effect
+    if (isSplashing && splashFrame < 15) {
+        const splashRadius = splashFrame * 2;
+        const splashOpacity = Math.max(0, 1 - splashFrame / 15) * 0.5;
+        return (React.createElement("div", { key: particle.id, style: { position: 'relative' } },
+            React.createElement("svg", { width: splashRadius * 4, height: splashRadius * 2, style: {
+                    position: 'absolute',
+                    left: -splashRadius * 2,
+                    top: -splashRadius,
+                } },
+                React.createElement("ellipse", { cx: splashRadius * 2, cy: splashRadius, rx: splashRadius, ry: splashRadius / 3, fill: "none", stroke: particle.color, strokeWidth: "1", opacity: splashOpacity }),
+                [0, 1, 2, 3].map((i) => {
+                    const angle = (i * 90 + 45) * Math.PI / 180;
+                    const distance = splashFrame * 1.5;
+                    const dropX = splashRadius * 2 + Math.cos(angle) * distance;
+                    const dropY = splashRadius - Math.sin(angle) * distance + splashFrame * 0.5;
+                    return (React.createElement("circle", { key: i, cx: dropX, cy: dropY, r: "1.5", fill: particle.color, opacity: splashOpacity }));
+                }))));
+    }
+    // Render falling raindrop
+    return (React.createElement("div", { key: particle.id, style: { position: 'relative' } },
+        React.createElement("svg", { width: particle.size * 2, height: length + particle.size * 3, style: {
+                position: 'absolute',
+                left: -particle.size,
+                top: -length,
+            } },
+            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 }),
+            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 }))));
+};
+
+const defaultColors$6 = ['#FFFFFF', '#F5F5F5', '#FAFAFA'];
+const createDandelionParticles = (origin, config) => {
+    const { particleCount = 15, colors = defaultColors$6, elementSize = 15 } = config;
+    const particles = [];
+    for (let i = 0; i < particleCount; i++) {
+        particles.push({
+            id: generateId(),
+            x: origin.x + randomInRange(-20, 20),
+            y: origin.y + randomInRange(-20, 20),
+            vx: randomInRange(-2, 2),
+            vy: randomInRange(-1, -0.3),
+            life: config.lifetime || 200,
+            opacity: 1,
+            size: randomInRange(elementSize * 0.8, elementSize * 1.2),
+            // Encode: rotation angle + float phase * 1000 + drift phase * 1000000
+            rotation: Math.floor(randomInRange(0, 360)) +
+                (Math.floor(randomInRange(0, 360)) * 1000) +
+                (Math.floor(randomInRange(0, 360)) * 1000000),
+            color: getRandomColor(colors),
+        });
+    }
+    return particles;
+};
+const renderDandelionParticle = (particle) => {
+    // Extract encoded values
+    const rotationAngle = particle.rotation % 1000;
+    const floatPhase = Math.floor((particle.rotation % 1000000) / 1000);
+    const driftPhase = Math.floor(particle.rotation / 1000000);
+    // Calculate floating effects
+    const floatY = Math.sin((Date.now() * 0.002 + floatPhase) * Math.PI / 180) * 5;
+    const driftX = Math.sin((Date.now() * 0.001 + driftPhase) * Math.PI / 180) * 3;
+    const rotation = (Date.now() * 0.01 + rotationAngle) % 360;
+    const seedCount = 7;
+    return (React.createElement("div", { key: particle.id, style: {
+            width: `${particle.size * 2}px`,
+            height: `${particle.size * 2}px`,
+            position: 'relative',
+            transform: `translate(${driftX}px, ${floatY}px) rotate(${rotation}deg)`,
+            opacity: particle.opacity,
+        } },
+        React.createElement("svg", { width: particle.size * 2, height: particle.size * 2, viewBox: `-${particle.size} -${particle.size} ${particle.size * 2} ${particle.size * 2}`, style: {
+                position: 'absolute',
+                top: 0,
+                left: 0,
+            } },
+            React.createElement("circle", { cx: "0", cy: "0", r: "2", fill: "#F5F5DC" }),
+            Array.from({ length: seedCount }).map((_, i) => {
+                const angle = (i * 360 / seedCount) * Math.PI / 180;
+                const endX = Math.cos(angle) * particle.size;
+                const endY = Math.sin(angle) * particle.size;
+                const midX = Math.cos(angle) * particle.size * 0.7;
+                const midY = Math.sin(angle) * particle.size * 0.7;
+                return (React.createElement("g", { key: i },
+                    React.createElement("line", { x1: "0", y1: "0", x2: endX, y2: endY, stroke: "#E5E5E5", strokeWidth: "0.5", opacity: "0.8" }),
+                    React.createElement("circle", { cx: endX, cy: endY, r: "3", fill: particle.color, opacity: "0.6" }),
+                    React.createElement("circle", { cx: midX, cy: midY, r: "2", fill: particle.color, opacity: "0.4" }),
+                    [0, 1, 2].map((j) => {
+                        const filamentAngle = angle + (j - 1) * 0.1;
+                        const filamentX = endX + Math.cos(filamentAngle) * 2;
+                        const filamentY = endY + Math.sin(filamentAngle) * 2;
+                        return (React.createElement("line", { key: j, x1: endX, y1: endY, x2: filamentX, y2: filamentY, stroke: "#E5E5E5", strokeWidth: "0.3", opacity: "0.6" }));
+                    })));
+            }))));
+};
+
+const defaultColors$5 = ['#FFD700', '#FFA500'];
+const createBeeParticles = (origin, config) => {
+    const { particleCount = 5, colors = defaultColors$5, elementSize = 18 } = config;
+    const particles = [];
+    for (let i = 0; i < particleCount; i++) {
+        particles.push({
+            id: generateId(),
+            x: origin.x + randomInRange(-50, 50),
+            y: origin.y + randomInRange(-50, 50),
+            vx: randomInRange(2, 4),
+            vy: randomInRange(-1, 1),
+            life: config.lifetime || 300,
+            opacity: 1,
+            size: randomInRange(elementSize * 0.8, elementSize * 1.1),
+            // Encode: zigzag phase (0-360) + wing phase (0-360) * 1000 + buzz phase (0-360) * 1000000
+            rotation: Math.floor(randomInRange(0, 360)) +
+                (Math.floor(randomInRange(0, 360)) * 1000) +
+                (Math.floor(randomInRange(0, 360)) * 1000000),
+            color: getRandomColor(colors),
+        });
+    }
+    return particles;
+};
+const renderBeeParticle = (particle) => {
+    // Extract encoded values
+    const zigzagPhase = particle.rotation % 1000;
+    const wingPhase = Math.floor((particle.rotation % 1000000) / 1000);
+    const buzzPhase = Math.floor(particle.rotation / 1000000);
+    // Calculate animations
+    const zigzagY = Math.sin((Date.now() * 0.005 + zigzagPhase) * Math.PI / 180) * 15;
+    const wingAngle = Math.sin((Date.now() * 0.02 + wingPhase) * Math.PI / 180) * 20;
+    const buzzOffset = Math.sin((Date.now() * 0.015 + buzzPhase) * Math.PI / 180) * 2;
+    // Calculate rotation based on movement direction
+    const movementAngle = Math.atan2(particle.vy, particle.vx) * 180 / Math.PI;
+    return (React.createElement("div", { key: particle.id, style: {
+            width: `${particle.size * 2}px`,
+            height: `${particle.size * 2}px`,
+            position: 'relative',
+            transform: `translate(${buzzOffset}px, ${zigzagY}px) rotate(${movementAngle}deg)`,
+        } },
+        React.createElement("svg", { width: particle.size * 2, height: particle.size * 2, viewBox: "-15 -10 30 20", style: {
+                position: 'absolute',
+                top: 0,
+                left: 0,
+            } },
+            React.createElement("ellipse", { cx: "-2", cy: "-3", rx: "8", ry: "4", fill: "#E5E5E5", opacity: "0.7", transform: `rotate(${-wingAngle - 20} -2 -3)` }),
+            React.createElement("ellipse", { cx: "-2", cy: "3", rx: "8", ry: "4", fill: "#E5E5E5", opacity: "0.7", transform: `rotate(${wingAngle + 20} -2 3)` }),
+            React.createElement("ellipse", { cx: "0", cy: "0", rx: "8", ry: "6", fill: particle.color }),
+            React.createElement("ellipse", { cx: "-6", cy: "0", rx: "6", ry: "5", fill: "#333" }),
+            React.createElement("rect", { x: "-3", y: "-6", width: "2", height: "12", fill: "#333" }),
+            React.createElement("rect", { x: "1", y: "-6", width: "2", height: "12", fill: "#333" }),
+            React.createElement("rect", { x: "5", y: "-5", width: "2", height: "10", fill: "#333" }),
+            React.createElement("circle", { cx: "8", cy: "0", r: "4", fill: "#333" }),
+            React.createElement("circle", { cx: "9", cy: "-1.5", r: "1", fill: "#FFF" }),
+            React.createElement("circle", { cx: "9", cy: "1.5", r: "1", fill: "#FFF" }),
+            React.createElement("line", { x1: "10", y1: "-2", x2: "12", y2: "-4", stroke: "#333", strokeWidth: "0.5" }),
+            React.createElement("line", { x1: "10", y1: "2", x2: "12", y2: "4", stroke: "#333", strokeWidth: "0.5" }),
+            React.createElement("polygon", { points: "-10,0 -12,1 -12,-1", fill: "#333" }))));
+};
+
+const defaultColors$4 = ['#FFE5B4', '#FFF8DC', '#FFFACD', '#FFF5EE'];
+const createPopcornParticles = (origin, config) => {
+    const { particleCount = 20, startVelocity = 25, colors = defaultColors$4, elementSize = 20 } = config;
+    const particles = [];
+    for (let i = 0; i < particleCount; i++) {
+        const angle = randomInRange(0, 360);
+        const velocity = randomInRange(startVelocity * 0.5, startVelocity);
+        particles.push({
+            id: generateId(),
+            x: origin.x,
+            y: origin.y,
+            vx: Math.cos(degreesToRadians(angle)) * velocity,
+            vy: Math.sin(degreesToRadians(angle)) * velocity - 10, // Initial upward boost
+            life: config.lifetime || 150,
+            opacity: 1,
+            size: randomInRange(elementSize * 0.8, elementSize * 1.2),
+            rotation: randomInRange(0, 360),
+            color: getRandomColor(colors),
+        });
+    }
+    return particles;
+};
+const renderPopcornParticle = (particle) => {
+    // Add some rotation animation
+    const rotation = particle.rotation + (150 - particle.life) * 3;
+    // Add bounce effect
+    const bounceProgress = (150 - particle.life) / 150;
+    const scale = 0.5 + Math.sin(bounceProgress * Math.PI) * 0.5;
+    return (React.createElement("div", { key: particle.id, style: {
+            fontSize: `${particle.size}px`,
+            transform: `rotate(${rotation}deg) scale(${scale})`,
+            opacity: particle.opacity,
+            userSelect: 'none',
+        } }, "\uD83C\uDF7F"));
+};
+
+const defaultColors$3 = ['#F0E68C', '#FFD700', '#FFF8DC', '#FFFACD', '#F5DEB3'];
+const createChampagneParticles = (origin, config) => {
+    const { particleCount = 40, startVelocity = 30, colors = defaultColors$3, elementSize = 12 } = config;
+    const particles = [];
+    for (let i = 0; i < particleCount; i++) {
+        const isBubble = i < particleCount * 0.7;
+        const angle = isBubble
+            ? randomInRange(60, 120) // Mostly upward for bubbles
+            : randomInRange(0, 360); // Any direction for cork
+        const velocity = randomInRange(startVelocity * 0.5, startVelocity);
+        particles.push({
+            id: generateId(),
+            x: origin.x,
+            y: origin.y,
+            vx: Math.cos(degreesToRadians(angle)) * velocity,
+            vy: Math.sin(degreesToRadians(angle)) * velocity * (isBubble ? -1 : 1),
+            life: config.lifetime || 200,
+            opacity: isBubble ? 0.6 : 1,
+            size: isBubble ? randomInRange(4, 8) : elementSize,
+            // Encode: isBubble (0 or 1) + wobble phase * 10
+            rotation: (isBubble ? 0 : 1) + Math.floor(randomInRange(0, 360)) * 10,
+            color: getRandomColor(colors),
+        });
+    }
+    return particles;
+};
+const renderChampagneParticle = (particle) => {
+    const isBubble = (particle.rotation % 10) === 0;
+    const wobblePhase = Math.floor(particle.rotation / 10);
+    if (isBubble) {
+        // Render bubble
+        const wobble = Math.sin((Date.now() * 0.003 + wobblePhase) * Math.PI / 180) * 10;
+        return (React.createElement("div", { key: particle.id, style: {
+                width: `${particle.size}px`,
+                height: `${particle.size}px`,
+                borderRadius: '50%',
+                backgroundColor: particle.color,
+                opacity: particle.opacity,
+                border: `1px solid ${particle.color}`,
+                transform: `translateX(${wobble}px)`,
+                boxShadow: `inset -2px -2px 4px rgba(0,0,0,0.1), inset 2px 2px 4px rgba(255,255,255,0.5)`,
+            } }));
+    }
+    // Render cork (champagne bottle)
+    const rotation = (Date.now() * 0.2 + wobblePhase) % 360;
+    return (React.createElement("div", { key: particle.id, style: {
+            fontSize: `${particle.size}px`,
+            transform: `rotate(${rotation}deg)`,
+            opacity: particle.opacity,
+            userSelect: 'none',
+        } }, "\uD83C\uDF7E"));
+};
+
+const defaultColors$2 = ['#FF69B4', '#FF1493', '#FFB6C1', '#FFC0CB', '#FF6347', '#FFA500', '#FFD700', '#98FB98', '#87CEEB', '#DDA0DD'];
+const candyEmojis = ['🍬', '🍭', '🍮', '🍯'];
+const createCandyParticles = (origin, config) => {
+    const { particleCount = 20, startVelocity = 20, colors = defaultColors$2, elementSize = 25 } = config;
+    const particles = [];
+    for (let i = 0; i < particleCount; i++) {
+        const angle = randomInRange(-30, 30); // Mostly falling down
+        const velocity = randomInRange(startVelocity * 0.5, startVelocity);
+        particles.push({
+            id: generateId(),
+            x: origin.x,
+            y: origin.y - 50, // Start above origin
+            vx: Math.sin(angle * Math.PI / 180) * velocity * 0.5,
+            vy: randomInRange(3, 6), // Fall down
+            life: config.lifetime || 180,
+            opacity: 1,
+            size: randomInRange(elementSize * 0.7, elementSize * 1.3),
+            // Encode candy type (0-3) + initial rotation * 10
+            rotation: Math.floor(Math.random() * candyEmojis.length) + (Math.floor(randomInRange(0, 360)) * 10),
+            color: getRandomColor(colors),
+        });
+    }
+    return particles;
+};
+const renderCandyParticle = (particle) => {
+    const candyIndex = particle.rotation % 10;
+    const initialRotation = Math.floor(particle.rotation / 10);
+    const candy = candyEmojis[candyIndex] || candyEmojis[0];
+    // Add tumbling rotation
+    const tumbleSpeed = 5;
+    const rotation = initialRotation + (180 - particle.life) * tumbleSpeed;
+    // Add sway effect
+    const swayAmount = Math.sin((180 - particle.life) * 0.05) * 20;
+    return (React.createElement("div", { key: particle.id, style: {
+            fontSize: `${particle.size}px`,
+            transform: `translateX(${swayAmount}px) rotate(${rotation}deg)`,
+            opacity: particle.opacity,
+            userSelect: 'none',
+        } }, candy));
+};
+
+const defaultColors$1 = ['#FFB6C1', '#FF69B4', '#FFD700', '#FF6347', '#98D8C8', '#F7DC6F', '#BB8FCE', '#85C1E2'];
+const createDonutParticles = (origin, config) => {
+    const { particleCount = 15, startVelocity = 25, colors = defaultColors$1, elementSize = 30 } = config;
+    const particles = [];
+    for (let i = 0; i < particleCount; i++) {
+        const angle = randomInRange(0, 360);
+        const velocity = randomInRange(startVelocity * 0.5, startVelocity);
+        particles.push({
+            id: generateId(),
+            x: origin.x,
+            y: origin.y,
+            vx: Math.cos(degreesToRadians(angle)) * velocity,
+            vy: Math.sin(degreesToRadians(angle)) * velocity - 10, // Initial upward boost
+            life: config.lifetime || 200,
+            opacity: 1,
+            size: randomInRange(elementSize * 0.6, elementSize * 1.4),
+            rotation: randomInRange(0, 360),
+            color: getRandomColor(colors),
+        });
+    }
+    return particles;
+};
+const renderDonutParticle = (particle) => {
+    // Add spinning animation
+    const spinSpeed = 8;
+    const rotation = particle.rotation + (200 - particle.life) * spinSpeed;
+    // Add bounce effect
+    const bounceProgress = (200 - particle.life) / 200;
+    const scale = 0.9 + Math.sin(bounceProgress * Math.PI * 2) * 0.1;
+    return (React.createElement("div", { key: particle.id, style: {
+            fontSize: `${particle.size}px`,
+            transform: `rotate(${rotation}deg) scale(${scale})`,
+            opacity: particle.opacity,
+            userSelect: 'none',
+            position: 'relative',
+        } },
+        "\uD83C\uDF69",
+        [0, 120, 240].map((angle, i) => (React.createElement("div", { key: i, style: {
+                position: 'absolute',
+                width: '3px',
+                height: '8px',
+                backgroundColor: particle.color,
+                borderRadius: '40%',
+                top: '50%',
+                left: '50%',
+                transform: `
+              translate(-50%, -50%) 
+              rotate(${angle + rotation}deg) 
+              translateY(${particle.size * 0.3}px)
+              scale(${scale})
+            `,
+                opacity: particle.opacity * 0.8,
+            } })))));
+};
+
+const defaultColors = ['#FF6347', '#FFD700', '#98D8C8', '#FF8C00', '#DC143C'];
+const createPizzaParticles = (origin, config) => {
+    const { particleCount = 12, startVelocity = 30, colors = defaultColors, elementSize = 35 } = config;
+    const particles = [];
+    for (let i = 0; i < particleCount; i++) {
+        const angle = randomInRange(0, 360);
+        const velocity = randomInRange(startVelocity * 0.5, startVelocity);
+        particles.push({
+            id: generateId(),
+            x: origin.x,
+            y: origin.y,
+            vx: Math.cos(degreesToRadians(angle)) * velocity,
+            vy: Math.sin(degreesToRadians(angle)) * velocity - 15, // Initial upward boost
+            life: config.lifetime || 180,
+            opacity: 1,
+            size: randomInRange(elementSize * 0.5, elementSize * 1.2),
+            rotation: randomInRange(0, 360),
+            color: getRandomColor(colors),
+        });
+    }
+    return particles;
+};
+const renderPizzaParticle = (particle) => {
+    // Add spinning and flipping animation
+    const spinSpeed = 10;
+    const rotation = particle.rotation + (180 - particle.life) * spinSpeed;
+    const flipAngle = (180 - particle.life) * 2;
+    // Add wobble effect
+    const wobble = Math.sin((180 - particle.life) * 0.1) * 10;
+    // Scale animation
+    const progress = (180 - particle.life) / 180;
+    const scale = 0.8 + Math.sin(progress * Math.PI) * 0.2;
+    return (React.createElement("div", { key: particle.id, style: {
+            fontSize: `${particle.size}px`,
+            transform: `
+          translateX(${wobble}px) 
+          rotate(${rotation}deg) 
+          rotateX(${flipAngle}deg)
+          scale(${scale})
+        `,
+            transformStyle: 'preserve-3d',
+            opacity: particle.opacity,
+            userSelect: 'none',
+            position: 'relative',
+        } },
+        "\uD83C\uDF55",
+        Math.random() > 0.5 && (React.createElement("div", { style: {
+                position: 'absolute',
+                fontSize: `${particle.size * 0.4}px`,
+                top: `${10 + Math.random() * 30}%`,
+                left: `${10 + Math.random() * 30}%`,
+                transform: `rotate(${Math.random() * 360}deg)`,
+                opacity: particle.opacity * 0.8,
+            } }, ['🍅', '🧀', '🌶️'][Math.floor(Math.random() * 3)]))));
+};
+
 const animations = {
     confetti: {
         createParticles: createConfettiParticles,
@@ -517,6 +2230,110 @@ const animations = {
         createParticles: createPetalParticles,
         renderParticle: renderPetalParticle,
     },
+    aurora: {
+        createParticles: createAuroraParticles,
+        renderParticle: renderAuroraParticle,
+    },
+    fireflies: {
+        createParticles: createFireflyParticles,
+        renderParticle: renderFireflyParticle,
+    },
+    paint: {
+        createParticles: createPaintParticles,
+        renderParticle: renderPaintParticle,
+    },
+    music: {
+        createParticles: createMusicParticles,
+        renderParticle: renderMusicParticle,
+    },
+    balloons: {
+        createParticles: createBalloonParticles,
+        renderParticle: renderBalloonParticle,
+    },
+    galaxy: {
+        createParticles: createGalaxyParticles,
+        renderParticle: renderGalaxyParticle,
+    },
+    matrix: {
+        createParticles: createMatrixParticles,
+        renderParticle: renderMatrixParticle,
+    },
+    pixels: {
+        createParticles: createPixelParticles,
+        renderParticle: renderPixelParticle,
+    },
+    glitch: {
+        createParticles: createGlitchParticles,
+        renderParticle: renderGlitchParticle,
+    },
+    dice: {
+        createParticles: createDiceParticles,
+        renderParticle: renderDiceParticle,
+    },
+    levelup: {
+        createParticles: createLevelUpParticles,
+        renderParticle: renderLevelUpParticle,
+    },
+    magicdust: {
+        createParticles: createMagicDustParticles,
+        renderParticle: renderMagicDustParticle,
+    },
+    ghosts: {
+        createParticles: createGhostParticles,
+        renderParticle: renderGhostParticle,
+    },
+    crystals: {
+        createParticles: createCrystalParticles,
+        renderParticle: renderCrystalParticle,
+    },
+    dragons: {
+        createParticles: createDragonParticles,
+        renderParticle: renderDragonParticle,
+    },
+    runes: {
+        createParticles: createRuneParticles,
+        renderParticle: renderRuneParticle,
+    },
+    butterflies: {
+        createParticles: createButterflyParticles,
+        renderParticle: renderButterflyParticle,
+    },
+    leaves: {
+        createParticles: createLeafParticles,
+        renderParticle: renderLeafParticle,
+    },
+    rain: {
+        createParticles: createRainParticles,
+        renderParticle: renderRainParticle,
+    },
+    dandelion: {
+        createParticles: createDandelionParticles,
+        renderParticle: renderDandelionParticle,
+    },
+    bees: {
+        createParticles: createBeeParticles,
+        renderParticle: renderBeeParticle,
+    },
+    popcorn: {
+        createParticles: createPopcornParticles,
+        renderParticle: renderPopcornParticle,
+    },
+    champagne: {
+        createParticles: createChampagneParticles,
+        renderParticle: renderChampagneParticle,
+    },
+    candy: {
+        createParticles: createCandyParticles,
+        renderParticle: renderCandyParticle,
+    },
+    donuts: {
+        createParticles: createDonutParticles,
+        renderParticle: renderDonutParticle,
+    },
+    pizza: {
+        createParticles: createPizzaParticles,
+        renderParticle: renderPizzaParticle,
+    },
 };
 
 const useReward = (elementId, animationType, config) => {