partycles 0.2.0 → 0.3.0

package/dist/index.esm.js

@@ -166,8 +166,8 @@ const createBubbleParticles = (origin, config) => {
             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),
@@ -472,6 +472,468 @@ const renderPetalParticle = (particle) => {
             } })));
 };
 
+const auroraColors = ['#00ff88', '#00ffaa', '#00ddff', '#0099ff', '#0066ff', '#9933ff', '#ff00ff'];
+const createAuroraParticles = (origin, config) => {
+    const { particleCount = 15, spread = 200, startVelocity = 3, colors = auroraColors, elementSize = 100 } = config;
+    const particles = [];
+    for (let i = 0; i < particleCount; i++) {
+        const angle = (i / particleCount) * spread - spread / 2;
+        const offset = randomInRange(-30, 30);
+        particles.push({
+            id: generateId(),
+            x: origin.x + angle + offset,
+            y: origin.y,
+            vx: randomInRange(-1, 1),
+            vy: -startVelocity,
+            life: config.lifetime || 250,
+            opacity: 0,
+            size: randomInRange(elementSize * 0.8, elementSize * 1.2),
+            rotation: randomInRange(-15, 15),
+            color: colors[Math.floor(Math.random() * colors.length)] || colors[0],
+        });
+    }
+    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,
@@ -517,6 +979,30 @@ const animations = {
         createParticles: createPetalParticles,
         renderParticle: renderPetalParticle,
     },
+    aurora: {
+        createParticles: createAuroraParticles,
+        renderParticle: renderAuroraParticle,
+    },
+    fireflies: {
+        createParticles: createFireflyParticles,
+        renderParticle: renderFireflyParticle,
+    },
+    paint: {
+        createParticles: createPaintParticles,
+        renderParticle: renderPaintParticle,
+    },
+    music: {
+        createParticles: createMusicParticles,
+        renderParticle: renderMusicParticle,
+    },
+    balloons: {
+        createParticles: createBalloonParticles,
+        renderParticle: renderBalloonParticle,
+    },
+    galaxy: {
+        createParticles: createGalaxyParticles,
+        renderParticle: renderGalaxyParticle,
+    },
 };
 
 const useReward = (elementId, animationType, config) => {