partycles 0.4.0 → 1.1.0

package/dist/index.esm.js

@@ -1,4 +1,4 @@
-import React, { useState, useRef, useCallback, useEffect } from 'react';
+import React, { useState, useRef, useEffect, useCallback } from 'react';
 import { createRoot } from 'react-dom/client';
 
 const randomInRange = (min, max) => {
@@ -26,9 +26,9 @@ const createParticleStyle = (particle, containerRect) => {
     };
 };
 
-const defaultColors$f = ['#f44336', '#e91e63', '#9c27b0', '#673ab7', '#3f51b5', '#2196f3', '#03a9f4', '#00bcd4', '#009688', '#4caf50', '#8bc34a', '#cddc39', '#ffeb3b', '#ffc107', '#ff9800', '#ff5722'];
+const defaultColors$3 = ['#f44336', '#e91e63', '#9c27b0', '#673ab7', '#3f51b5', '#2196f3', '#03a9f4', '#00bcd4', '#009688', '#4caf50', '#8bc34a', '#cddc39', '#ffeb3b', '#ffc107', '#ff9800', '#ff5722'];
 const createConfettiParticles = (origin, config) => {
-    const { particleCount = 50, startVelocity = 20, colors = defaultColors$f, elementSize = 20 } = config;
+    const { particleCount = 50, startVelocity = 20, colors = defaultColors$3, elementSize = 20 } = config;
     const particles = [];
     for (let i = 0; i < particleCount; i++) {
         const angle = randomInRange(0, 360);
@@ -359,61 +359,6 @@ const renderCoinParticle = (particle) => {
             } }, "$")));
 };
 
-const lightningColors = ['#FFFF00', '#FFFFFF', '#00FFFF', '#FF00FF'];
-const createLightningParticles = (origin, config) => {
-    const { particleCount = 20, spread = 360, startVelocity = 50, colors = lightningColors, elementSize = 30 } = config;
-    const particles = [];
-    for (let i = 0; i < particleCount; i++) {
-        const angle = randomInRange(0, spread) * (Math.PI / 180);
-        const velocity = randomInRange(startVelocity * 0.7, startVelocity * 1.3);
-        particles.push({
-            id: generateId(),
-            x: origin.x,
-            y: origin.y,
-            vx: Math.sin(angle) * velocity,
-            vy: -Math.abs(Math.cos(angle) * velocity * 0.5), // Mostly horizontal movement
-            life: config.lifetime || 60, // Quick flashes
-            opacity: 1,
-            size: randomInRange(elementSize * 0.5, elementSize * 1.5),
-            rotation: randomInRange(0, 360),
-            color: colors[Math.floor(Math.random() * colors.length)] || colors[0] || '#ffffff',
-        });
-    }
-    return particles;
-};
-const renderLightningParticle = (particle) => {
-    // Create zigzag pattern based on particle life
-    const zigzagOffset = Math.sin(particle.life * 0.5) * 10;
-    return (React.createElement("div", { key: particle.id, style: {
-            width: `${particle.size}px`,
-            height: `${particle.size * 0.3}px`,
-            position: 'relative',
-            filter: `blur(0.5px) brightness(2)`,
-            transform: `translateX(${zigzagOffset}px) rotate(${particle.rotation}deg)`,
-        } },
-        React.createElement("div", { style: {
-                position: 'absolute',
-                width: '100%',
-                height: '100%',
-                background: particle.color,
-                clipPath: 'polygon(0% 0%, 60% 0%, 40% 45%, 100% 45%, 0% 100%, 40% 55%, 20% 55%, 35% 100%)',
-                boxShadow: `
-            0 0 10px ${particle.color},
-            0 0 20px ${particle.color},
-            0 0 30px ${particle.color}
-          `,
-            } }),
-        React.createElement("div", { style: {
-                position: 'absolute',
-                top: '-50%',
-                left: '-50%',
-                width: '200%',
-                height: '200%',
-                background: `radial-gradient(circle, ${particle.color}88 0%, transparent 70%)`,
-                animation: `electricPulse ${randomInRange(100, 200)}ms infinite`,
-            } })));
-};
-
 const petalColors = ['#FFB6C1', '#FFC0CB', '#FF69B4', '#FF1493', '#FFF0F5'];
 const createPetalParticles = (origin, config) => {
     const { particleCount = 40, spread = 100, startVelocity = 8, colors = petalColors, elementSize = 20 } = config;
@@ -679,84 +624,6 @@ const renderPaintParticle = (particle) => {
             } }))));
 };
 
-const musicColors = ['#FF006E', '#8338EC', '#3A86FF', '#FB5607', '#FFBE0B'];
-const createMusicParticles = (origin, config) => {
-    const { particleCount = 20, spread = 100, startVelocity = 8, colors = musicColors, elementSize = 25 } = config;
-    const particles = [];
-    const notes = ['♪', '♫', '♬', '♩', '♭', '♯'];
-    for (let i = 0; i < particleCount; i++) {
-        const angle = randomInRange(-spread / 2, spread / 2) * (Math.PI / 180);
-        const velocity = randomInRange(startVelocity * 0.5, startVelocity);
-        particles.push({
-            id: generateId(),
-            x: origin.x + randomInRange(-20, 20),
-            y: origin.y,
-            vx: Math.sin(angle) * velocity * 0.3,
-            vy: -Math.abs(Math.cos(angle)) * velocity * 0.5, // Always go up slowly
-            life: config.lifetime || 200,
-            opacity: 1,
-            size: randomInRange(elementSize * 0.8, elementSize * 1.2),
-            rotation: i % notes.length, // Store which note to use
-            color: colors[Math.floor(Math.random() * colors.length)] || colors[0] || '#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;
@@ -938,88 +805,6 @@ const renderGalaxyParticle = (particle) => {
             } }))));
 };
 
-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 = [];
@@ -1082,119 +867,9 @@ const renderGlitchParticle = (particle) => {
         } }));
 };
 
-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 defaultColors$2 = ['#9C27B0', '#E91E63', '#FF00FF', '#00FFFF', '#FFD700', '#FF69B4', '#DA70D6', '#9370DB'];
 const createMagicDustParticles = (origin, config) => {
-    const { particleCount = 40, startVelocity = 8, colors = defaultColors$e, elementSize = 12 } = config;
+    const { particleCount = 40, startVelocity = 8, colors = defaultColors$2, elementSize = 12 } = config;
     const particles = [];
     for (let i = 0; i < particleCount; i++) {
         // Create particles in a circular pattern with some randomness
@@ -1265,97 +940,9 @@ const renderMagicDustParticle = (particle) => {
                 } }))));
 };
 
-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 defaultColors$1 = ['#FF1493', '#00CED1', '#FFD700', '#FF69B4', '#7B68EE', '#00FA9A', '#FF6347', '#4169E1'];
 const createCrystalParticles = (origin, config) => {
-    const { particleCount = 15, startVelocity = 15, colors = defaultColors$c, elementSize = 25 } = config;
+    const { particleCount = 15, startVelocity = 15, colors = defaultColors$1, elementSize = 25 } = config;
     const particles = [];
     for (let i = 0; i < particleCount; i++) {
         // Crystals explode outward and fall with gravity
@@ -1427,762 +1014,61 @@ const renderCrystalParticle = (particle) => {
             } })));
 };
 
-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 defaultColors = ['#D2691E', '#CD853F', '#8B4513', '#A0522D', '#FF8C00', '#FF6347'];
+const createLeafParticles = (origin, config) => {
+    const { particleCount = 10, colors = defaultColors, elementSize = 25 } = config;
     const particles = [];
     for (let i = 0; i < particleCount; i++) {
-        // 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,
+            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.8, elementSize),
-            rotation: angle,
-            color,
+            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 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;
+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: `rotate(${particle.rotation}deg)`,
+            transform: `translateX(${swayX}px) rotate(${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: {
+        React.createElement("svg", { width: particle.size, height: particle.size, viewBox: `-${particle.size / 2} -${particle.size / 2} ${particle.size} ${particle.size}`, style: {
                 position: 'absolute',
-                width: '35%',
-                height: '35%',
-                top: '25%',
-                right: '15%',
-                backgroundColor: particle.color,
-                borderRadius: '40% 50% 50% 40%',
-                transform: 'rotate(-10deg)',
+                top: 0,
+                left: 0,
             } },
-            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)]))));
+            React.createElement("path", { d: `
+            M 0,-${particle.size / 2}
+            C -${particle.size / 3},-${particle.size / 3} -${particle.size / 3},${particle.size / 3} 0,${particle.size / 2}
+            C ${particle.size / 3},${particle.size / 3} ${particle.size / 3},-${particle.size / 3} 0,-${particle.size / 2}
+          `, fill: particle.color, opacity: "0.9" }),
+            React.createElement("line", { x1: "0", y1: -particle.size / 2, x2: "0", y2: particle.size / 2, stroke: "#8B4513", strokeWidth: "1", opacity: "0.5" }),
+            React.createElement("line", { x1: "0", y1: -particle.size / 4, x2: -particle.size / 4, y2: -particle.size / 8, stroke: "#8B4513", strokeWidth: "0.5", opacity: "0.5" }),
+            React.createElement("line", { x1: "0", y1: -particle.size / 4, x2: particle.size / 4, y2: -particle.size / 8, stroke: "#8B4513", strokeWidth: "0.5", opacity: "0.5" }),
+            React.createElement("line", { x1: "0", y1: particle.size / 4, x2: -particle.size / 4, y2: particle.size / 8, stroke: "#8B4513", strokeWidth: "0.5", opacity: "0.5" }),
+            React.createElement("line", { x1: "0", y1: particle.size / 4, x2: particle.size / 4, y2: particle.size / 8, stroke: "#8B4513", strokeWidth: "0.5", opacity: "0.5" }))));
 };
 
 const animations = {
@@ -2222,10 +1108,6 @@ const animations = {
         createParticles: createCoinParticles,
         renderParticle: renderCoinParticle,
     },
-    lightning: {
-        createParticles: createLightningParticles,
-        renderParticle: renderLightningParticle,
-    },
     petals: {
         createParticles: createPetalParticles,
         renderParticle: renderPetalParticle,
@@ -2242,10 +1124,6 @@ const animations = {
         createParticles: createPaintParticles,
         renderParticle: renderPaintParticle,
     },
-    music: {
-        createParticles: createMusicParticles,
-        renderParticle: renderMusicParticle,
-    },
     balloons: {
         createParticles: createBalloonParticles,
         renderParticle: renderBalloonParticle,
@@ -2254,86 +1132,58 @@ const animations = {
         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 isMobileDevice = () => {
+    if (typeof window === 'undefined')
+        return false;
+    // Check user agent
+    const userAgent = navigator.userAgent || navigator.vendor || window.opera;
+    const isMobileUA = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(userAgent);
+    // Check viewport width
+    const isMobileWidth = window.innerWidth <= 768;
+    // Check touch support
+    const hasTouch = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
+    return isMobileUA || (isMobileWidth && hasTouch);
+};
+const optimizeConfigForMobile = (config) => {
+    var _a, _b, _c;
+    if (!isMobileDevice())
+        return config;
+    return Object.assign(Object.assign({}, config), { 
+        // Reduce particle count by 40%
+        particleCount: Math.floor((config.particleCount || 50) * 0.6), 
+        // Reduce element size by 20%
+        elementSize: Math.floor((config.elementSize || 20) * 0.8), 
+        // Reduce lifetime by 20%
+        lifetime: Math.floor((config.lifetime || 150) * 0.8), 
+        // Simplify physics
+        physics: Object.assign(Object.assign({}, config.physics), { 
+            // Reduce precision for mobile
+            gravity: Math.round((((_a = config.physics) === null || _a === void 0 ? void 0 : _a.gravity) || 0) * 100) / 100, wind: Math.round((((_b = config.physics) === null || _b === void 0 ? void 0 : _b.wind) || 0) * 100) / 100, friction: Math.round((((_c = config.physics) === null || _c === void 0 ? void 0 : _c.friction) || 0.98) * 100) / 100 }) });
+};
+// Frame skipping for mobile
+const shouldSkipFrame = (frameCount) => {
+    if (!isMobileDevice())
+        return false;
+    // Skip every 3rd frame on mobile
+    return frameCount % 3 === 0;
 };
 
 const useReward = (elementId, animationType, config) => {
@@ -2342,6 +1192,15 @@ const useReward = (elementId, animationType, config) => {
     const particlesRef = useRef([]);
     const containerRef = useRef(null);
     const rootRef = useRef(null);
+    const isTabVisible = useRef(true);
+    // Monitor tab visibility
+    useEffect(() => {
+        const handleVisibilityChange = () => {
+            isTabVisible.current = !document.hidden;
+        };
+        document.addEventListener('visibilitychange', handleVisibilityChange);
+        return () => document.removeEventListener('visibilitychange', handleVisibilityChange);
+    }, []);
     const animate = useCallback(() => {
         var _a, _b, _c, _d, _e, _f;
         const element = document.getElementById(elementId);
@@ -2357,8 +1216,10 @@ const useReward = (elementId, animationType, config) => {
             console.error(`Animation type "${animationType}" not found`);
             return;
         }
+        // Apply mobile performance optimizations
+        const optimizedConfig = config ? optimizeConfigForMobile(config) : undefined;
         // Create particles
-        particlesRef.current = animationHandler.createParticles(origin, config || {});
+        particlesRef.current = animationHandler.createParticles(origin, optimizedConfig || {});
         // Create container
         const container = document.createElement('div');
         container.style.position = 'fixed';
@@ -2379,8 +1240,13 @@ const useReward = (elementId, animationType, config) => {
         const gravity = (_b = (_a = config === null || config === void 0 ? void 0 : config.physics) === null || _a === void 0 ? void 0 : _a.gravity) !== null && _b !== void 0 ? _b : defaultGravity;
         const friction = (_d = (_c = config === null || config === void 0 ? void 0 : config.physics) === null || _c === void 0 ? void 0 : _c.friction) !== null && _d !== void 0 ? _d : 0.98;
         const wind = (_f = (_e = config === null || config === void 0 ? void 0 : config.physics) === null || _e === void 0 ? void 0 : _e.wind) !== null && _f !== void 0 ? _f : 0;
+        // Track frame count for mobile optimization
+        let frameCount = 0;
         const updateParticles = () => {
             let activeParticles = 0;
+            frameCount++;
+            // Skip frame rendering on mobile to improve performance
+            const skipFrame = shouldSkipFrame(frameCount);
             particlesRef.current = particlesRef.current.map((particle) => {
                 if (particle.life <= 0)
                     return particle;
@@ -2408,13 +1274,13 @@ const useReward = (elementId, animationType, config) => {
                 }
                 return particle;
             });
-            // Render particles
-            if (rootRef.current) {
+            // Render particles (skip rendering on mobile for some frames)
+            if (rootRef.current && !skipFrame) {
                 rootRef.current.render(React.createElement(React.Fragment, null, particlesRef.current
                     .filter((p) => p.life > 0)
                     .map((particle) => (React.createElement("div", { key: particle.id, style: createParticleStyle(particle, containerRect) }, animationHandler.renderParticle(particle))))));
             }
-            if (activeParticles > 0) {
+            if (activeParticles > 0 && isTabVisible.current) {
                 animationFrameRef.current = requestAnimationFrame(updateParticles);
             }
             else {
@@ -2460,5 +1326,5 @@ const useReward = (elementId, animationType, config) => {
     return { reward, isAnimating };
 };
 
-export { emojiPresets, useReward };
+export { emojiPresets, isMobileDevice, optimizeConfigForMobile, useReward };
 //# sourceMappingURL=index.esm.js.map