partycles 0.3.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;
@@ -166,13 +166,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;
@@ -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;
@@ -489,7 +489,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;
@@ -546,7 +546,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;
@@ -616,7 +616,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;
@@ -697,7 +697,7 @@ const createMusicParticles = (origin, config) => {
             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],
+            color: colors[Math.floor(Math.random() * colors.length)] || colors[0] || '#ffffff',
         });
     }
     return particles;
@@ -708,9 +708,13 @@ const renderMusicParticle = (particle) => {
     // 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;
+    // 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: {
@@ -762,15 +766,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;
@@ -866,7 +870,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;
@@ -934,74 +938,1401 @@ const renderGalaxyParticle = (particle) => {
             } }))));
 };
 
-const animations = {
-    confetti: {
-        createParticles: createConfettiParticles,
-        renderParticle: renderConfettiParticle,
-    },
-    sparkles: {
-        createParticles: createSparkleParticles,
-        renderParticle: renderSparkleParticle,
-    },
-    hearts: {
-        createParticles: createHeartParticles,
-        renderParticle: renderHeartParticle,
-    },
-    fireworks: {
-        createParticles: createFireworkParticles,
-        renderParticle: renderFireworkParticle,
-    },
-    bubbles: {
-        createParticles: createBubbleParticles,
-        renderParticle: renderBubbleParticle,
-    },
-    stars: {
-        createParticles: createStarParticles,
-        renderParticle: renderStarParticle,
-    },
-    snow: {
-        createParticles: createSnowParticles,
-        renderParticle: renderSnowParticle,
-    },
-    emoji: {
-        createParticles: createEmojiParticles,
-        renderParticle: renderEmojiParticle,
-    },
-    coins: {
-        createParticles: createCoinParticles,
-        renderParticle: renderCoinParticle,
-    },
-    lightning: {
-        createParticles: createLightningParticles,
-        renderParticle: renderLightningParticle,
-    },
-    petals: {
-        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,
+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,
+        renderParticle: renderConfettiParticle,
+    },
+    sparkles: {
+        createParticles: createSparkleParticles,
+        renderParticle: renderSparkleParticle,
+    },
+    hearts: {
+        createParticles: createHeartParticles,
+        renderParticle: renderHeartParticle,
+    },
+    fireworks: {
+        createParticles: createFireworkParticles,
+        renderParticle: renderFireworkParticle,
+    },
+    bubbles: {
+        createParticles: createBubbleParticles,
+        renderParticle: renderBubbleParticle,
+    },
+    stars: {
+        createParticles: createStarParticles,
+        renderParticle: renderStarParticle,
+    },
+    snow: {
+        createParticles: createSnowParticles,
+        renderParticle: renderSnowParticle,
+    },
+    emoji: {
+        createParticles: createEmojiParticles,
+        renderParticle: renderEmojiParticle,
+    },
+    coins: {
+        createParticles: createCoinParticles,
+        renderParticle: renderCoinParticle,
+    },
+    lightning: {
+        createParticles: createLightningParticles,
+        renderParticle: renderLightningParticle,
+    },
+    petals: {
+        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,
     },
 };