partycles 0.1.0 → 0.3.0

package/dist/index.esm.js

@@ -28,7 +28,7 @@ const createParticleStyle = (particle, containerRect) => {
 
 const defaultColors = ['#f44336', '#e91e63', '#9c27b0', '#673ab7', '#3f51b5', '#2196f3', '#03a9f4', '#00bcd4', '#009688', '#4caf50', '#8bc34a', '#cddc39', '#ffeb3b', '#ffc107', '#ff9800', '#ff5722'];
 const createConfettiParticles = (origin, config) => {
-    const { particleCount = 50, startVelocity = 55, colors = defaultColors, elementSize = 20 } = config;
+    const { particleCount = 50, startVelocity = 20, colors = defaultColors, elementSize = 20 } = config;
     const particles = [];
     for (let i = 0; i < particleCount; i++) {
         const angle = randomInRange(0, 360);
@@ -60,7 +60,7 @@ const renderConfettiParticle = (particle) => {
 };
 
 const createSparkleParticles = (origin, config) => {
-    const { particleCount = 35, spread = 120, startVelocity = 45, elementSize = 25, colors = ['#FFD700', '#FFFFFF'] } = config;
+    const { particleCount = 35, spread = 120, startVelocity = 15, elementSize = 25, colors = ['#FFD700', '#FFFFFF'] } = config;
     const particles = [];
     for (let i = 0; i < particleCount; i++) {
         const velocityScale = startVelocity / 45; // Scale based on default
@@ -90,7 +90,7 @@ const renderSparkleParticle = (particle) => {
 
 const heartColors = ['#ff1744', '#e91e63', '#ff4569', '#ff6b6b', '#ee5a70'];
 const createHeartParticles = (origin, config) => {
-    const { particleCount = 25, startVelocity = 30, colors = heartColors, elementSize = 30 } = config;
+    const { particleCount = 25, startVelocity = 12, colors = heartColors, elementSize = 30 } = config;
     const particles = [];
     for (let i = 0; i < particleCount; i++) {
         const angle = randomInRange(-45, -135);
@@ -120,7 +120,7 @@ const renderHeartParticle = (particle) => {
 
 const fireworkColors = ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff', '#00ffff', '#ffffff'];
 const createFireworkParticles = (origin, config) => {
-    const { particleCount = 60, startVelocity = 50, colors = fireworkColors, elementSize = 8 } = config;
+    const { particleCount = 60, startVelocity = 25, colors = fireworkColors, elementSize = 8 } = config;
     const particles = [];
     for (let i = 0; i < particleCount; i++) {
         const angle = (360 / particleCount) * i + randomInRange(-5, 5);
@@ -159,15 +159,15 @@ const renderFireworkParticle = (particle) => {
 
 const bubbleColors = ['rgba(66, 165, 245, 0.4)', 'rgba(41, 182, 246, 0.4)', 'rgba(38, 198, 218, 0.4)', 'rgba(129, 212, 250, 0.4)'];
 const createBubbleParticles = (origin, config) => {
-    const { particleCount = 30, spread = 80, startVelocity = 30, colors = bubbleColors, elementSize = 40 } = config;
+    const { particleCount = 30, spread = 80, startVelocity = 8, colors = bubbleColors, elementSize = 40 } = config;
     const particles = [];
     for (let i = 0; i < particleCount; i++) {
         particles.push({
             id: generateId(),
             x: origin.x + randomInRange(-spread, spread),
             y: origin.y,
-            vx: randomInRange(-3, 3),
-            vy: -randomInRange(startVelocity * 0.7, startVelocity * 1.2),
+            vx: randomInRange(-2, 2),
+            vy: -randomInRange(startVelocity * 0.3, startVelocity * 0.6),
             life: config.lifetime || 160,
             opacity: 0.7,
             size: randomInRange(elementSize * 0.4, elementSize * 1.2),
@@ -194,7 +194,7 @@ const renderBubbleParticle = (particle) => {
 
 const starColors = ['#FFD700', '#FFA500', '#FF6347', '#FFE4B5'];
 const createStarParticles = (origin, config) => {
-    const { particleCount = 40, startVelocity = 35, colors = starColors, elementSize = 30 } = config;
+    const { particleCount = 40, startVelocity = 18, colors = starColors, elementSize = 30 } = config;
     const particles = [];
     for (let i = 0; i < particleCount; i++) {
         const angle = randomInRange(0, 360);
@@ -221,6 +221,719 @@ const renderStarParticle = (particle) => {
         React.createElement("path", { d: "M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z" })));
 };
 
+const snowColors = ['#FFFFFF', '#F0F8FF', '#F5F5F5', '#FAFAFA'];
+const createSnowParticles = (origin, config) => {
+    const { particleCount = 50, spread = 200, startVelocity = 3, colors = snowColors, elementSize = 15 } = config;
+    const particles = [];
+    for (let i = 0; i < particleCount; i++) {
+        // Spread particles across the width, starting from above viewport
+        const x = origin.x + randomInRange(-spread * 2, spread * 2);
+        const y = origin.y - randomInRange(100, 300); // Start above the trigger point
+        particles.push({
+            id: generateId(),
+            x,
+            y,
+            vx: randomInRange(-0.5, 0.5), // Gentle horizontal drift
+            vy: randomInRange(startVelocity * 0.5, startVelocity * 1.2),
+            life: config.lifetime || 300, // Longer lifetime for snow
+            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],
+        });
+    }
+    return particles;
+};
+const renderSnowParticle = (particle) => {
+    return (React.createElement("div", { key: particle.id, style: {
+            width: `${particle.size}px`,
+            height: `${particle.size}px`,
+            backgroundColor: particle.color,
+            borderRadius: '50%',
+            boxShadow: `
+          0 0 ${particle.size * 0.5}px rgba(255, 255, 255, 0.8),
+          inset 0 0 ${particle.size * 0.3}px rgba(255, 255, 255, 0.5)
+        `,
+            filter: 'blur(0.5px)',
+        } }));
+};
+
+// Default emoji sets for different moods
+const defaultEmojis = ['🎉', '🎊', '🎈', '🎁', '✨', '🌟', '💫', '🎯'];
+const celebrationEmojis = ['🎉', '🎊', '🥳', '🎈', '🎁', '🍾', '🥂', '🎆'];
+const loveEmojis = ['❤️', '💕', '💖', '💝', '💗', '💓', '💞', '💘'];
+const happyEmojis = ['😊', '😄', '🥰', '😍', '🤗', '😘', '😁', '🤩'];
+const natureEmojis = ['🌸', '🌺', '🌻', '🌹', '🌷', '🌼', '🍀', '🌿'];
+const foodEmojis = ['🍕', '🍔', '🍟', '🌮', '🍿', '🍩', '🍪', '🧁'];
+const createEmojiParticles = (origin, config) => {
+    const { particleCount = 30, spread = 100, startVelocity = 15, elementSize = 35, emojis = defaultEmojis } = config;
+    const particles = [];
+    for (let i = 0; i < particleCount; i++) {
+        const angle = randomInRange(-45, -135);
+        const velocity = randomInRange(startVelocity * 0.5, startVelocity * 1.2);
+        particles.push({
+            id: generateId(),
+            x: origin.x + randomInRange(-spread, spread),
+            y: origin.y,
+            vx: Math.cos((angle * Math.PI) / 180) * velocity,
+            vy: Math.sin((angle * Math.PI) / 180) * velocity,
+            life: config.lifetime || 180,
+            opacity: 1,
+            size: randomInRange(elementSize * 0.7, elementSize * 1.3),
+            rotation: randomInRange(-45, 45),
+            color: '', // Not used for emojis
+            element: emojis[Math.floor(Math.random() * emojis.length)]
+        });
+    }
+    return particles;
+};
+const renderEmojiParticle = (particle) => {
+    return (React.createElement("div", { key: particle.id, style: {
+            fontSize: `${particle.size}px`,
+            lineHeight: 1,
+            userSelect: 'none',
+            filter: particle.opacity < 0.5 ? 'blur(1px)' : undefined,
+        } }, particle.element));
+};
+// Export preset emoji sets for easy use
+const emojiPresets = {
+    celebration: celebrationEmojis,
+    love: loveEmojis,
+    happy: happyEmojis,
+    nature: natureEmojis,
+    food: foodEmojis,
+    default: defaultEmojis
+};
+
+const coinColors = ['#FFD700', '#FFA500', '#FFB300', '#FFC700'];
+const createCoinParticles = (origin, config) => {
+    const { particleCount = 30, spread = 70, startVelocity = 25, colors = coinColors, elementSize = 25 } = config;
+    const particles = [];
+    for (let i = 0; i < particleCount; i++) {
+        const angle = randomInRange(-spread / 2, spread / 2) * (Math.PI / 180);
+        const velocity = randomInRange(startVelocity * 0.5, startVelocity);
+        particles.push({
+            id: generateId(),
+            x: origin.x,
+            y: origin.y,
+            vx: Math.sin(angle) * velocity,
+            vy: -Math.cos(angle) * velocity,
+            life: config.lifetime || 120,
+            opacity: 1,
+            size: randomInRange(elementSize * 0.8, elementSize * 1.2),
+            rotation: randomInRange(0, 360),
+            color: colors[Math.floor(Math.random() * colors.length)] || colors[0],
+        });
+    }
+    return particles;
+};
+const renderCoinParticle = (particle) => {
+    const spinSpeed = 8; // Degrees per frame
+    const currentRotation = particle.rotation + (120 - particle.life) * spinSpeed;
+    return (React.createElement("div", { key: particle.id, style: {
+            width: `${particle.size}px`,
+            height: `${particle.size}px`,
+            background: `radial-gradient(ellipse at 30% 30%, ${particle.color}, #B8860B)`,
+            borderRadius: '50%',
+            transform: `rotateY(${currentRotation}deg)`,
+            transformStyle: 'preserve-3d',
+            boxShadow: `
+          inset -2px -2px 4px rgba(0, 0, 0, 0.3),
+          inset 2px 2px 4px rgba(255, 255, 255, 0.5),
+          0 2px 4px rgba(0, 0, 0, 0.3)
+        `,
+            border: `1px solid ${particle.color}`,
+            position: 'relative',
+            overflow: 'hidden',
+        } },
+        React.createElement("div", { style: {
+                position: 'absolute',
+                top: '50%',
+                left: '50%',
+                transform: 'translate(-50%, -50%)',
+                fontSize: `${particle.size * 0.5}px`,
+                fontWeight: 'bold',
+                color: '#B8860B',
+                textShadow: '1px 1px 1px rgba(0, 0, 0, 0.3)',
+                fontFamily: 'Arial, sans-serif',
+            } }, "$")));
+};
+
+const lightningColors = ['#FFFF00', '#FFFFFF', '#00FFFF', '#FF00FF'];
+const createLightningParticles = (origin, config) => {
+    const { particleCount = 20, spread = 360, startVelocity = 50, colors = lightningColors, elementSize = 30 } = config;
+    const particles = [];
+    for (let i = 0; i < particleCount; i++) {
+        const angle = randomInRange(0, spread) * (Math.PI / 180);
+        const velocity = randomInRange(startVelocity * 0.7, startVelocity * 1.3);
+        particles.push({
+            id: generateId(),
+            x: origin.x,
+            y: origin.y,
+            vx: Math.sin(angle) * velocity,
+            vy: -Math.abs(Math.cos(angle) * velocity * 0.5), // Mostly horizontal movement
+            life: config.lifetime || 60, // Quick flashes
+            opacity: 1,
+            size: randomInRange(elementSize * 0.5, elementSize * 1.5),
+            rotation: randomInRange(0, 360),
+            color: colors[Math.floor(Math.random() * colors.length)] || colors[0],
+        });
+    }
+    return particles;
+};
+const renderLightningParticle = (particle) => {
+    // Create zigzag pattern based on particle life
+    const zigzagOffset = Math.sin(particle.life * 0.5) * 10;
+    return (React.createElement("div", { key: particle.id, style: {
+            width: `${particle.size}px`,
+            height: `${particle.size * 0.3}px`,
+            position: 'relative',
+            filter: `blur(0.5px) brightness(2)`,
+            transform: `translateX(${zigzagOffset}px) rotate(${particle.rotation}deg)`,
+        } },
+        React.createElement("div", { style: {
+                position: 'absolute',
+                width: '100%',
+                height: '100%',
+                background: particle.color,
+                clipPath: 'polygon(0% 0%, 60% 0%, 40% 45%, 100% 45%, 0% 100%, 40% 55%, 20% 55%, 35% 100%)',
+                boxShadow: `
+            0 0 10px ${particle.color},
+            0 0 20px ${particle.color},
+            0 0 30px ${particle.color}
+          `,
+            } }),
+        React.createElement("div", { style: {
+                position: 'absolute',
+                top: '-50%',
+                left: '-50%',
+                width: '200%',
+                height: '200%',
+                background: `radial-gradient(circle, ${particle.color}88 0%, transparent 70%)`,
+                animation: `electricPulse ${randomInRange(100, 200)}ms infinite`,
+            } })));
+};
+
+const petalColors = ['#FFB6C1', '#FFC0CB', '#FF69B4', '#FF1493', '#FFF0F5'];
+const createPetalParticles = (origin, config) => {
+    const { particleCount = 40, spread = 100, startVelocity = 8, colors = petalColors, elementSize = 20 } = config;
+    const particles = [];
+    for (let i = 0; i < particleCount; i++) {
+        const angle = randomInRange(-spread / 2, spread / 2) * (Math.PI / 180);
+        const velocity = randomInRange(startVelocity * 0.3, startVelocity);
+        particles.push({
+            id: generateId(),
+            x: origin.x + randomInRange(-20, 20),
+            y: origin.y - randomInRange(0, 30),
+            vx: Math.sin(angle) * velocity,
+            vy: randomInRange(2, 5), // Gentle fall
+            life: config.lifetime || 200,
+            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],
+        });
+    }
+    return particles;
+};
+const renderPetalParticle = (particle) => {
+    // Create spiral motion
+    const spiralPhase = (200 - particle.life) * 0.1;
+    const spiralX = Math.sin(spiralPhase) * 15;
+    const wobble = Math.sin(particle.life * 0.1) * 10;
+    return (React.createElement("div", { key: particle.id, style: {
+            width: `${particle.size}px`,
+            height: `${particle.size * 1.2}px`,
+            position: 'relative',
+            transform: `translateX(${spiralX}px) rotate(${particle.rotation + wobble}deg)`,
+            transformStyle: 'preserve-3d',
+        } },
+        React.createElement("div", { style: {
+                width: '100%',
+                height: '100%',
+                background: `radial-gradient(ellipse at 50% 30%, ${particle.color}, ${particle.color}DD)`,
+                borderRadius: '0% 100% 0% 100%',
+                position: 'absolute',
+                boxShadow: `
+            inset 1px 1px 3px rgba(255, 255, 255, 0.5),
+            0 2px 4px rgba(0, 0, 0, 0.1)
+          `,
+                border: `1px solid ${particle.color}CC`,
+                transform: 'rotateY(45deg)',
+            } }),
+        React.createElement("div", { style: {
+                width: '100%',
+                height: '100%',
+                background: `radial-gradient(ellipse at 50% 30%, ${particle.color}EE, ${particle.color}BB)`,
+                borderRadius: '0% 100% 0% 100%',
+                position: 'absolute',
+                transform: 'rotate(45deg) scale(0.9)',
+                opacity: 0.8,
+            } })));
+};
+
+const auroraColors = ['#00ff88', '#00ffaa', '#00ddff', '#0099ff', '#0066ff', '#9933ff', '#ff00ff'];
+const createAuroraParticles = (origin, config) => {
+    const { particleCount = 15, spread = 200, startVelocity = 3, colors = auroraColors, elementSize = 100 } = config;
+    const particles = [];
+    for (let i = 0; i < particleCount; i++) {
+        const angle = (i / particleCount) * spread - spread / 2;
+        const offset = randomInRange(-30, 30);
+        particles.push({
+            id: generateId(),
+            x: origin.x + angle + offset,
+            y: origin.y,
+            vx: randomInRange(-1, 1),
+            vy: -startVelocity,
+            life: config.lifetime || 250,
+            opacity: 0,
+            size: randomInRange(elementSize * 0.8, elementSize * 1.2),
+            rotation: randomInRange(-15, 15),
+            color: colors[Math.floor(Math.random() * colors.length)] || colors[0],
+        });
+    }
+    return particles;
+};
+const renderAuroraParticle = (particle) => {
+    // Create flowing wave motion
+    const wave = Math.sin(particle.life * 0.05) * 20;
+    const fadeIn = Math.min(1, (250 - particle.life) / 50);
+    const fadeOut = particle.life / 250;
+    const opacity = Math.min(fadeIn, fadeOut) * 0.4;
+    return (React.createElement("div", { key: particle.id, style: {
+            width: `${particle.size}px`,
+            height: `${particle.size * 0.3}px`,
+            position: 'relative',
+            transform: `translateX(${wave}px) rotate(${particle.rotation}deg)`,
+            filter: 'blur(2px)',
+        } },
+        React.createElement("div", { style: {
+                width: '100%',
+                height: '100%',
+                background: `linear-gradient(90deg, transparent, ${particle.color}, transparent)`,
+                borderRadius: '50%',
+                opacity,
+                boxShadow: `0 0 ${particle.size * 0.5}px ${particle.color}`,
+                animation: 'shimmer 2s infinite',
+            } }),
+        React.createElement("div", { style: {
+                position: 'absolute',
+                top: '20%',
+                left: '10%',
+                width: '80%',
+                height: '60%',
+                background: `radial-gradient(ellipse at center, ${particle.color}44, transparent)`,
+                borderRadius: '50%',
+                opacity: opacity * 0.5,
+                filter: 'blur(4px)',
+            } })));
+};
+
+const fireflyColors = ['#FFFF99', '#FFFFCC', '#FFFF66', '#FFFFAA'];
+const createFireflyParticles = (origin, config) => {
+    const { particleCount = 20, spread = 150, startVelocity = 2, colors = fireflyColors, elementSize = 8 } = config;
+    const particles = [];
+    for (let i = 0; i < particleCount; i++) {
+        const angle = randomInRange(0, 360) * (Math.PI / 180);
+        const velocity = randomInRange(startVelocity * 0.3, startVelocity);
+        particles.push({
+            id: generateId(),
+            x: origin.x + randomInRange(-spread / 2, spread / 2),
+            y: origin.y + randomInRange(-20, 20),
+            vx: Math.cos(angle) * velocity,
+            vy: Math.sin(angle) * velocity * 0.5, // More horizontal movement
+            life: config.lifetime || 300,
+            opacity: 0,
+            size: randomInRange(elementSize * 0.6, elementSize),
+            rotation: randomInRange(0, 360), // Used for blink timing
+            color: colors[Math.floor(Math.random() * colors.length)] || colors[0],
+        });
+    }
+    return particles;
+};
+const renderFireflyParticle = (particle) => {
+    // Create organic floating motion
+    const floatX = Math.sin(particle.life * 0.02 + particle.rotation) * 15;
+    const floatY = Math.cos(particle.life * 0.03 + particle.rotation) * 10;
+    // Blinking effect - each firefly has its own rhythm based on rotation
+    const blinkCycle = Math.sin(particle.life * 0.1 + particle.rotation * 0.1);
+    const isBlinking = blinkCycle > 0.3;
+    const glowIntensity = isBlinking ? 1 : 0.1;
+    // Fade in/out
+    const fadeIn = Math.min(1, (300 - particle.life) / 30);
+    const fadeOut = particle.life / 300;
+    const baseFade = Math.min(fadeIn, fadeOut);
+    return (React.createElement("div", { key: particle.id, style: {
+            width: `${particle.size}px`,
+            height: `${particle.size}px`,
+            position: 'relative',
+            transform: `translate(${floatX}px, ${floatY}px)`,
+        } },
+        React.createElement("div", { style: {
+                width: '100%',
+                height: '100%',
+                background: particle.color,
+                borderRadius: '50%',
+                opacity: baseFade * glowIntensity,
+                boxShadow: `
+            0 0 ${particle.size}px ${particle.color},
+            0 0 ${particle.size * 2}px ${particle.color},
+            0 0 ${particle.size * 3}px ${particle.color}88
+          `,
+                transition: 'opacity 0.3s ease',
+            } }),
+        React.createElement("div", { style: {
+                position: 'absolute',
+                top: '50%',
+                left: '50%',
+                width: `${particle.size * 4}px`,
+                height: `${particle.size * 4}px`,
+                background: `radial-gradient(circle, ${particle.color}44 0%, transparent 70%)`,
+                borderRadius: '50%',
+                transform: 'translate(-50%, -50%)',
+                opacity: baseFade * glowIntensity * 0.5,
+                transition: 'opacity 0.3s ease',
+            } })));
+};
+
+const paintColors = ['#FF006E', '#FB5607', '#FFBE0B', '#8338EC', '#3A86FF', '#06FFB4'];
+const createPaintParticles = (origin, config) => {
+    const { particleCount = 25, spread = 120, startVelocity = 35, colors = paintColors, elementSize = 30 } = config;
+    const particles = [];
+    for (let i = 0; i < particleCount; i++) {
+        const angle = randomInRange(-spread / 2, spread / 2) * (Math.PI / 180);
+        const velocity = randomInRange(startVelocity * 0.5, startVelocity);
+        const isMainSplat = i < 5; // First few particles are bigger splats
+        particles.push({
+            id: generateId(),
+            x: origin.x,
+            y: origin.y,
+            vx: Math.sin(angle) * velocity * (isMainSplat ? 0.3 : 1),
+            vy: -Math.cos(angle) * velocity * 0.7 + (isMainSplat ? 5 : 0),
+            life: config.lifetime || 150,
+            opacity: 1,
+            size: isMainSplat
+                ? randomInRange(elementSize * 1.5, elementSize * 2.5)
+                : randomInRange(elementSize * 0.3, elementSize),
+            rotation: randomInRange(0, 360),
+            color: colors[Math.floor(Math.random() * colors.length)] || colors[0],
+        });
+    }
+    return particles;
+};
+const renderPaintParticle = (particle) => {
+    // Paint splatter gets more stretched as it flies
+    const stretch = 1 + (Math.abs(particle.vx) + Math.abs(particle.vy)) * 0.01;
+    const squish = 1 / stretch;
+    // Drip effect for some particles
+    const isDripping = particle.size > 15 && particle.rotation > 180;
+    const dripLength = isDripping ? particle.size * 0.5 : 0;
+    return (React.createElement("div", { key: particle.id, style: {
+            width: `${particle.size}px`,
+            height: `${particle.size}px`,
+            position: 'relative',
+            transform: `
+          scaleX(${stretch}) 
+          scaleY(${squish}) 
+          rotate(${Math.atan2(particle.vy, particle.vx) * 180 / Math.PI}deg)
+        `,
+        } },
+        React.createElement("div", { style: {
+                width: '100%',
+                height: '100%',
+                background: particle.color,
+                borderRadius: '50%',
+                position: 'relative',
+                boxShadow: `inset -2px -2px 4px rgba(0,0,0,0.2)`,
+            } },
+            React.createElement("div", { style: {
+                    position: 'absolute',
+                    top: '20%',
+                    left: '20%',
+                    width: '30%',
+                    height: '30%',
+                    background: particle.color,
+                    borderRadius: '50%',
+                    opacity: 0.8,
+                    transform: `translate(${randomInRange(-5, 5)}px, ${randomInRange(-5, 5)}px)`,
+                } }),
+            React.createElement("div", { style: {
+                    position: 'absolute',
+                    bottom: '15%',
+                    right: '15%',
+                    width: '25%',
+                    height: '25%',
+                    background: particle.color,
+                    borderRadius: '50%',
+                    opacity: 0.7,
+                } })),
+        isDripping && (React.createElement("div", { style: {
+                position: 'absolute',
+                bottom: `-${dripLength}px`,
+                left: '40%',
+                width: '20%',
+                height: `${dripLength}px`,
+                background: particle.color,
+                borderRadius: '0 0 50% 50%',
+                opacity: 0.9,
+            } }))));
+};
+
+const musicColors = ['#FF006E', '#8338EC', '#3A86FF', '#FB5607', '#FFBE0B'];
+const createMusicParticles = (origin, config) => {
+    const { particleCount = 20, spread = 100, startVelocity = 8, colors = musicColors, elementSize = 25 } = config;
+    const particles = [];
+    const notes = ['♪', '♫', '♬', '♩', '♭', '♯'];
+    for (let i = 0; i < particleCount; i++) {
+        const angle = randomInRange(-spread / 2, spread / 2) * (Math.PI / 180);
+        const velocity = randomInRange(startVelocity * 0.5, startVelocity);
+        particles.push({
+            id: generateId(),
+            x: origin.x + randomInRange(-20, 20),
+            y: origin.y,
+            vx: Math.sin(angle) * velocity * 0.3,
+            vy: -Math.abs(Math.cos(angle)) * velocity * 0.5, // Always go up slowly
+            life: config.lifetime || 200,
+            opacity: 1,
+            size: randomInRange(elementSize * 0.8, elementSize * 1.2),
+            rotation: i % notes.length, // Store which note to use
+            color: colors[Math.floor(Math.random() * colors.length)] || colors[0],
+        });
+    }
+    return particles;
+};
+const renderMusicParticle = (particle) => {
+    const notes = ['♪', '♫', '♬', '♩', '♭', '♯'];
+    const note = notes[Math.floor(particle.rotation)];
+    // Wave motion as notes float up
+    const waveX = Math.sin(particle.life * 0.05) * 20;
+    const wobble = Math.sin(particle.life * 0.1) * 10;
+    // Fade in/out
+    const maxLife = 300; // Use longer lifetime for proper fading
+    const fadeIn = particle.life > (maxLife - 20) ? (maxLife - particle.life) / 20 : 1;
+    const fadeOut = particle.life < 50 ? particle.life / 50 : 1;
+    const opacity = Math.min(fadeIn, fadeOut) * particle.opacity;
+    return (React.createElement("div", { key: particle.id, style: {
+            fontSize: `${particle.size}px`,
+            fontWeight: 'bold',
+            position: 'relative',
+            transform: `
+          translateX(${waveX}px) 
+          rotate(${wobble}deg)
+          scale(${0.8 + opacity * 0.2})
+        `,
+            color: particle.color,
+            opacity,
+            textShadow: `
+          0 0 10px ${particle.color}88,
+          0 0 20px ${particle.color}44,
+          2px 2px 3px rgba(0,0,0,0.3)
+        `,
+            transition: 'transform 0.3s ease',
+            userSelect: 'none',
+        } },
+        note,
+        React.createElement("div", { style: {
+                position: 'absolute',
+                top: '40%',
+                left: '-20%',
+                width: '140%',
+                height: '1px',
+                background: `linear-gradient(90deg, transparent, ${particle.color}33, transparent)`,
+                opacity: opacity * 0.5,
+            } }),
+        React.createElement("div", { style: {
+                position: 'absolute',
+                top: '60%',
+                left: '-20%',
+                width: '140%',
+                height: '1px',
+                background: `linear-gradient(90deg, transparent, ${particle.color}33, transparent)`,
+                opacity: opacity * 0.3,
+            } })));
+};
+
+const balloonColors = ['#FF006E', '#FB5607', '#FFBE0B', '#8338EC', '#3A86FF', '#06FFB4', '#FF4081'];
+const createBalloonParticles = (origin, config) => {
+    const { particleCount = 15, spread = 80, startVelocity = 10, colors = balloonColors, elementSize = 35 } = config;
+    const particles = [];
+    for (let i = 0; i < particleCount; i++) {
+        const angle = randomInRange(-spread / 2, spread / 2) * (Math.PI / 180);
+        const velocity = randomInRange(startVelocity * 0.7, startVelocity);
+        particles.push({
+            id: generateId(),
+            x: origin.x + randomInRange(-30, 30),
+            y: origin.y + randomInRange(0, 20),
+            vx: Math.sin(angle) * velocity * 0.2,
+            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],
+        });
+    }
+    return particles;
+};
+const renderBalloonParticle = (particle) => {
+    // Gentle swaying motion
+    const sway = Math.sin(particle.life * 0.03) * 15;
+    const bob = Math.sin(particle.life * 0.05) * 5;
+    // Fade out near the end
+    const fadeOut = particle.life > 50 ? 1 : particle.life / 50;
+    return (React.createElement("div", { key: particle.id, style: {
+            width: `${particle.size}px`,
+            height: `${particle.size * 1.2}px`,
+            position: 'relative',
+            transform: `
+          translateX(${sway}px) 
+          translateY(${bob}px)
+          rotate(${particle.rotation + sway * 0.2}deg)
+        `,
+            opacity: particle.opacity * fadeOut,
+        } },
+        React.createElement("div", { style: {
+                width: '100%',
+                height: '100%',
+                background: `radial-gradient(circle at 30% 30%, ${particle.color}ee, ${particle.color})`,
+                borderRadius: '50% 50% 50% 50% / 60% 60% 40% 40%',
+                position: 'relative',
+                boxShadow: `
+            inset -5px -5px 10px rgba(0,0,0,0.2),
+            0 4px 8px rgba(0,0,0,0.2)
+          `,
+            } },
+            React.createElement("div", { style: {
+                    position: 'absolute',
+                    top: '15%',
+                    left: '20%',
+                    width: '25%',
+                    height: '30%',
+                    background: 'radial-gradient(circle, rgba(255,255,255,0.8) 0%, transparent 70%)',
+                    borderRadius: '50%',
+                    transform: 'rotate(-20deg)',
+                } }),
+            React.createElement("div", { style: {
+                    position: 'absolute',
+                    bottom: '-5px',
+                    left: '50%',
+                    transform: 'translateX(-50%)',
+                    width: '0',
+                    height: '0',
+                    borderLeft: '4px solid transparent',
+                    borderRight: '4px solid transparent',
+                    borderTop: `8px solid ${particle.color}`,
+                } })),
+        React.createElement("svg", { style: {
+                position: 'absolute',
+                top: '100%',
+                left: '50%',
+                transform: 'translateX(-50%)',
+                width: '2px',
+                height: `${particle.size * 2}px`,
+                opacity: 0.6,
+            } },
+            React.createElement("path", { d: `M1 0 Q ${1 + Math.sin(particle.life * 0.1) * 3} ${particle.size} 1 ${particle.size * 2}`, stroke: particle.color, strokeWidth: "1.5", fill: "none", opacity: "0.4" }))));
+};
+
+const galaxyColors = ['#FFFFFF', '#FFF9C4', '#BBDEFB', '#C5CAE9', '#D1C4E9', '#FFE082', '#FFCCBC'];
+const createGalaxyParticles = (origin, config) => {
+    const { particleCount = 60, spread = 200, startVelocity = 15, colors = galaxyColors, elementSize = 8 } = config;
+    const particles = [];
+    for (let i = 0; i < particleCount; i++) {
+        // Create spiral distribution
+        const progress = i / particleCount;
+        const spiralAngle = progress * Math.PI * 4; // 2 full rotations
+        const radius = progress * spread;
+        // Add some randomness to make it look natural
+        const angleOffset = randomInRange(-0.3, 0.3);
+        const radiusOffset = randomInRange(-10, 10);
+        const finalAngle = spiralAngle + angleOffset;
+        const finalRadius = radius + radiusOffset;
+        // Position based on spiral
+        const offsetX = Math.cos(finalAngle) * finalRadius;
+        const offsetY = Math.sin(finalAngle) * finalRadius;
+        // Velocity follows the spiral tangent
+        const tangentAngle = finalAngle + Math.PI / 2;
+        const speed = startVelocity * (1 - progress * 0.5); // Outer stars move slower
+        particles.push({
+            id: generateId(),
+            x: origin.x,
+            y: origin.y,
+            vx: Math.cos(tangentAngle) * speed * 0.3 + offsetX * 0.02,
+            vy: Math.sin(tangentAngle) * speed * 0.3 + offsetY * 0.02,
+            life: config.lifetime || 250,
+            opacity: 0,
+            size: randomInRange(elementSize * 0.3, elementSize) * (1 - progress * 0.5), // Smaller at edges
+            rotation: randomInRange(0, 360),
+            color: colors[Math.floor(Math.random() * colors.length)] || colors[0],
+        });
+    }
+    return particles;
+};
+const renderGalaxyParticle = (particle) => {
+    // Particles slowly rotate around center while expanding
+    const age = (250 - particle.life) / 250;
+    const expansionRate = 1 + age * 0.5;
+    // Fade in quickly, fade out slowly
+    const fadeIn = Math.min(1, (250 - particle.life) / 30);
+    const fadeOut = particle.life / 250;
+    const opacity = Math.min(fadeIn, fadeOut);
+    // Twinkle effect
+    const twinkle = Math.sin(particle.life * 0.2 + particle.rotation) * 0.3 + 0.7;
+    return (React.createElement("div", { key: particle.id, style: {
+            width: `${particle.size}px`,
+            height: `${particle.size}px`,
+            position: 'relative',
+            transform: `scale(${expansionRate})`,
+            opacity: opacity * twinkle,
+        } },
+        React.createElement("div", { style: {
+                width: '100%',
+                height: '100%',
+                background: particle.color,
+                borderRadius: '50%',
+                boxShadow: `
+            0 0 ${particle.size}px ${particle.color},
+            0 0 ${particle.size * 2}px ${particle.color}88,
+            0 0 ${particle.size * 3}px ${particle.color}44
+          `,
+                position: 'relative',
+            } },
+            React.createElement("div", { style: {
+                    position: 'absolute',
+                    top: '50%',
+                    left: '50%',
+                    width: `${particle.size * 3}px`,
+                    height: '1px',
+                    background: `linear-gradient(90deg, transparent, ${particle.color}, transparent)`,
+                    transform: `translate(-50%, -50%) rotate(${particle.rotation}deg)`,
+                    opacity: twinkle,
+                } }),
+            React.createElement("div", { style: {
+                    position: 'absolute',
+                    top: '50%',
+                    left: '50%',
+                    width: '1px',
+                    height: `${particle.size * 3}px`,
+                    background: `linear-gradient(180deg, transparent, ${particle.color}, transparent)`,
+                    transform: `translate(-50%, -50%) rotate(${particle.rotation}deg)`,
+                    opacity: twinkle,
+                } })),
+        particle.size > 5 && (React.createElement("div", { style: {
+                position: 'absolute',
+                top: '50%',
+                left: '50%',
+                width: `${particle.size * 6}px`,
+                height: `${particle.size * 6}px`,
+                background: `radial-gradient(circle, ${particle.color}22 0%, transparent 70%)`,
+                borderRadius: '50%',
+                transform: 'translate(-50%, -50%)',
+                opacity: opacity * 0.3,
+                filter: 'blur(3px)',
+            } }))));
+};
+
 const animations = {
     confetti: {
         createParticles: createConfettiParticles,
@@ -246,6 +959,50 @@ const animations = {
         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 useReward = (elementId, animationType, config) => {
@@ -286,7 +1043,9 @@ const useReward = (elementId, animationType, config) => {
         const root = createRoot(container);
         rootRef.current = root;
         const containerRect = container.getBoundingClientRect();
-        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 : 0.35;
+        // Default gravity varies by animation type
+        const defaultGravity = animationType === 'bubbles' ? -0.1 : animationType === 'snow' ? 0.05 : 0.35;
+        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;
         const updateParticles = () => {
@@ -370,5 +1129,5 @@ const useReward = (elementId, animationType, config) => {
     return { reward, isAnimating };
 };
 
-export { useReward };
+export { emojiPresets, useReward };
 //# sourceMappingURL=index.esm.js.map