partycles 0.3.0 → 1.0.0

package/dist/animations/stars.js.map

@@ -1 +1 @@
-{"version":3,"file":"stars.js","sources":["../../src/utils.ts","../../src/animations/stars.tsx"],"sourcesContent":["import { Particle } from './types';\n\nexport const randomInRange = (min: number, max: number): number => {\n  return Math.random() * (max - min) + min;\n};\n\nexport const degreesToRadians = (degrees: number): number => {\n  return (degrees * Math.PI) / 180;\n};\n\nexport const generateId = (): string => {\n  return Math.random().toString(36).substring(2, 9);\n};\n\nexport const getRandomColor = (colors: string[]): string => {\n  return colors[Math.floor(Math.random() * colors.length)] || colors[0];\n};\n\nexport const createParticleStyle = (\n  particle: Particle,\n  containerRect: DOMRect\n): React.CSSProperties => {\n  return {\n    position: 'absolute',\n    left: `${particle.x - containerRect.left}px`,\n    top: `${particle.y - containerRect.top}px`,\n    transform: `rotate(${particle.rotation}deg)`,\n    opacity: particle.opacity,\n    pointerEvents: 'none',\n    transition: 'none',\n    willChange: 'transform, opacity',\n  };\n};","import React from 'react';\nimport { AnimationConfig, Particle } from '../types';\nimport { randomInRange, generateId } from '../utils';\n\nconst starColors = ['#FFD700', '#FFA500', '#FF6347', '#FFE4B5'];\n\nexport const createStarParticles = (\n  origin: { x: number; y: number },\n  config: AnimationConfig\n): Particle[] => {\n  const {\n    particleCount = 40,\n    startVelocity = 18,\n    colors = starColors,\n    elementSize = 30\n  } = config;\n\n  const particles: Particle[] = [];\n\n  for (let i = 0; i < particleCount; i++) {\n    const angle = randomInRange(0, 360);\n    const velocity = randomInRange(startVelocity * 0.5, startVelocity);\n\n    particles.push({\n      id: generateId(),\n      x: origin.x,\n      y: origin.y,\n      vx: Math.cos((angle * Math.PI) / 180) * velocity,\n      vy: Math.sin((angle * Math.PI) / 180) * velocity - 15,\n      life: config.lifetime || 150,\n      opacity: 1,\n      size: randomInRange(elementSize * 0.5, elementSize * 1.3),\n      rotation: randomInRange(0, 360),\n      color: colors[Math.floor(Math.random() * colors.length)] || colors[0],\n    });\n  }\n\n  return particles;\n};\n\nexport const renderStarParticle = (particle: Particle): React.ReactNode => {\n  return (\n    <svg\n      key={particle.id}\n      width={particle.size}\n      height={particle.size}\n      viewBox=\"0 0 24 24\"\n      fill={particle.color}\n      style={{\n        filter: `drop-shadow(0 0 ${particle.size * 0.2}px ${particle.color})`,\n      }}\n    >\n      <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\" />\n    </svg>\n  );\n};"],"names":[],"mappings":";;;;AAEO,MAAM,aAAa,GAAG,CAAC,GAAW,EAAE,GAAW,KAAY;AAChE,IAAA,OAAO,IAAI,CAAC,MAAM,EAAE,IAAI,GAAG,GAAG,GAAG,CAAC,GAAG,GAAG;AAC1C,CAAC;AAMM,MAAM,UAAU,GAAG,MAAa;AACrC,IAAA,OAAO,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC;AACnD,CAAC;;ACRD,MAAM,UAAU,GAAG,CAAC,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,CAAC;MAElD,mBAAmB,GAAG,CACjC,MAAgC,EAChC,MAAuB,KACT;AACd,IAAA,MAAM,EACJ,aAAa,GAAG,EAAE,EAClB,aAAa,GAAG,EAAE,EAClB,MAAM,GAAG,UAAU,EACnB,WAAW,GAAG,EAAE,EACjB,GAAG,MAAM;IAEV,MAAM,SAAS,GAAe,EAAE;AAEhC,IAAA,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,aAAa,EAAE,CAAC,EAAE,EAAE;QACtC,MAAM,KAAK,GAAG,aAAa,CAAC,CAAC,EAAE,GAAG,CAAC;QACnC,MAAM,QAAQ,GAAG,aAAa,CAAC,aAAa,GAAG,GAAG,EAAE,aAAa,CAAC;QAElE,SAAS,CAAC,IAAI,CAAC;YACb,EAAE,EAAE,UAAU,EAAE;YAChB,CAAC,EAAE,MAAM,CAAC,CAAC;YACX,CAAC,EAAE,MAAM,CAAC,CAAC;AACX,YAAA,EAAE,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,KAAK,GAAG,IAAI,CAAC,EAAE,IAAI,GAAG,CAAC,GAAG,QAAQ;AAChD,YAAA,EAAE,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,KAAK,GAAG,IAAI,CAAC,EAAE,IAAI,GAAG,CAAC,GAAG,QAAQ,GAAG,EAAE;AACrD,YAAA,IAAI,EAAE,MAAM,CAAC,QAAQ,IAAI,GAAG;AAC5B,YAAA,OAAO,EAAE,CAAC;YACV,IAAI,EAAE,aAAa,CAAC,WAAW,GAAG,GAAG,EAAE,WAAW,GAAG,GAAG,CAAC;AACzD,YAAA,QAAQ,EAAE,aAAa,CAAC,CAAC,EAAE,GAAG,CAAC;YAC/B,KAAK,EAAE,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC;AACtE,SAAA,CAAC;;AAGJ,IAAA,OAAO,SAAS;AAClB;AAEa,MAAA,kBAAkB,GAAG,CAAC,QAAkB,KAAqB;AACxE,IAAA,QACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAE,QAAQ,CAAC,EAAE,EAChB,KAAK,EAAE,QAAQ,CAAC,IAAI,EACpB,MAAM,EAAE,QAAQ,CAAC,IAAI,EACrB,OAAO,EAAC,WAAW,EACnB,IAAI,EAAE,QAAQ,CAAC,KAAK,EACpB,KAAK,EAAE;YACL,MAAM,EAAE,CAAmB,gBAAA,EAAA,QAAQ,CAAC,IAAI,GAAG,GAAG,CAAM,GAAA,EAAA,QAAQ,CAAC,KAAK,CAAG,CAAA,CAAA;AACtE,SAAA,EAAA;AAED,QAAA,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAM,CAAC,EAAC,sGAAsG,EAAG,CAAA,CAC7G;AAEV;;;;;"}
+{"version":3,"file":"stars.js","sources":["../../src/utils.ts","../../src/animations/stars.tsx"],"sourcesContent":["import { Particle } from './types';\n\nexport const randomInRange = (min: number, max: number): number => {\n  return Math.random() * (max - min) + min;\n};\n\nexport const degreesToRadians = (degrees: number): number => {\n  return (degrees * Math.PI) / 180;\n};\n\nexport const generateId = (): string => {\n  return Math.random().toString(36).substring(2, 9);\n};\n\nexport const getRandomColor = (colors: string[]): string => {\n  return colors[Math.floor(Math.random() * colors.length)] || colors[0] || '#ffffff';\n};\n\nexport const createParticleStyle = (\n  particle: Particle,\n  containerRect: DOMRect\n): React.CSSProperties => {\n  return {\n    position: 'absolute',\n    left: `${particle.x - containerRect.left}px`,\n    top: `${particle.y - containerRect.top}px`,\n    transform: `rotate(${particle.rotation}deg)`,\n    opacity: particle.opacity,\n    pointerEvents: 'none',\n    transition: 'none',\n    willChange: 'transform, opacity',\n  };\n};","import React from 'react';\nimport { AnimationConfig, Particle } from '../types';\nimport { randomInRange, generateId } from '../utils';\n\nconst starColors = ['#FFD700', '#FFA500', '#FF6347', '#FFE4B5'];\n\nexport const createStarParticles = (\n  origin: { x: number; y: number },\n  config: AnimationConfig\n): Particle[] => {\n  const {\n    particleCount = 40,\n    startVelocity = 18,\n    colors = starColors,\n    elementSize = 30\n  } = config;\n\n  const particles: Particle[] = [];\n\n  for (let i = 0; i < particleCount; i++) {\n    const angle = randomInRange(0, 360);\n    const velocity = randomInRange(startVelocity * 0.5, startVelocity);\n\n    particles.push({\n      id: generateId(),\n      x: origin.x,\n      y: origin.y,\n      vx: Math.cos((angle * Math.PI) / 180) * velocity,\n      vy: Math.sin((angle * Math.PI) / 180) * velocity - 15,\n      life: config.lifetime || 150,\n      opacity: 1,\n      size: randomInRange(elementSize * 0.5, elementSize * 1.3),\n      rotation: randomInRange(0, 360),\n      color: colors[Math.floor(Math.random() * colors.length)] || colors[0] || '#ffffff',\n    });\n  }\n\n  return particles;\n};\n\nexport const renderStarParticle = (particle: Particle): React.ReactNode => {\n  return (\n    <svg\n      key={particle.id}\n      width={particle.size}\n      height={particle.size}\n      viewBox=\"0 0 24 24\"\n      fill={particle.color}\n      style={{\n        filter: `drop-shadow(0 0 ${particle.size * 0.2}px ${particle.color})`,\n      }}\n    >\n      <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\" />\n    </svg>\n  );\n};"],"names":[],"mappings":";;;;AAEO,MAAM,aAAa,GAAG,CAAC,GAAW,EAAE,GAAW,KAAY;AAChE,IAAA,OAAO,IAAI,CAAC,MAAM,EAAE,IAAI,GAAG,GAAG,GAAG,CAAC,GAAG,GAAG;AAC1C,CAAC;AAMM,MAAM,UAAU,GAAG,MAAa;AACrC,IAAA,OAAO,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC;AACnD,CAAC;;ACRD,MAAM,UAAU,GAAG,CAAC,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,CAAC;MAElD,mBAAmB,GAAG,CACjC,MAAgC,EAChC,MAAuB,KACT;AACd,IAAA,MAAM,EACJ,aAAa,GAAG,EAAE,EAClB,aAAa,GAAG,EAAE,EAClB,MAAM,GAAG,UAAU,EACnB,WAAW,GAAG,EAAE,EACjB,GAAG,MAAM;IAEV,MAAM,SAAS,GAAe,EAAE;AAEhC,IAAA,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,aAAa,EAAE,CAAC,EAAE,EAAE;QACtC,MAAM,KAAK,GAAG,aAAa,CAAC,CAAC,EAAE,GAAG,CAAC;QACnC,MAAM,QAAQ,GAAG,aAAa,CAAC,aAAa,GAAG,GAAG,EAAE,aAAa,CAAC;QAElE,SAAS,CAAC,IAAI,CAAC;YACb,EAAE,EAAE,UAAU,EAAE;YAChB,CAAC,EAAE,MAAM,CAAC,CAAC;YACX,CAAC,EAAE,MAAM,CAAC,CAAC;AACX,YAAA,EAAE,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,KAAK,GAAG,IAAI,CAAC,EAAE,IAAI,GAAG,CAAC,GAAG,QAAQ;AAChD,YAAA,EAAE,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,KAAK,GAAG,IAAI,CAAC,EAAE,IAAI,GAAG,CAAC,GAAG,QAAQ,GAAG,EAAE;AACrD,YAAA,IAAI,EAAE,MAAM,CAAC,QAAQ,IAAI,GAAG;AAC5B,YAAA,OAAO,EAAE,CAAC;YACV,IAAI,EAAE,aAAa,CAAC,WAAW,GAAG,GAAG,EAAE,WAAW,GAAG,GAAG,CAAC;AACzD,YAAA,QAAQ,EAAE,aAAa,CAAC,CAAC,EAAE,GAAG,CAAC;YAC/B,KAAK,EAAE,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,IAAI,SAAS;AACnF,SAAA,CAAC;;AAGJ,IAAA,OAAO,SAAS;AAClB;AAEa,MAAA,kBAAkB,GAAG,CAAC,QAAkB,KAAqB;AACxE,IAAA,QACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAE,QAAQ,CAAC,EAAE,EAChB,KAAK,EAAE,QAAQ,CAAC,IAAI,EACpB,MAAM,EAAE,QAAQ,CAAC,IAAI,EACrB,OAAO,EAAC,WAAW,EACnB,IAAI,EAAE,QAAQ,CAAC,KAAK,EACpB,KAAK,EAAE;YACL,MAAM,EAAE,CAAmB,gBAAA,EAAA,QAAQ,CAAC,IAAI,GAAG,GAAG,CAAM,GAAA,EAAA,QAAQ,CAAC,KAAK,CAAG,CAAA,CAAA;AACtE,SAAA,EAAA;AAED,QAAA,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAM,CAAC,EAAC,sGAAsG,EAAG,CAAA,CAC7G;AAEV;;;;;"}

package/dist/animations/types.d.ts

@@ -26,7 +26,7 @@ export interface AnimationConfig {
         friction?: number;
     };
 }
-export type AnimationType = 'confetti' | 'sparkles' | 'fireworks' | 'hearts' | 'stars' | 'bubbles' | 'snow' | 'emoji' | 'coins' | 'lightning' | 'petals' | 'aurora' | 'fireflies' | 'paint' | 'music' | 'balloons' | 'galaxy';
+export type AnimationType = 'confetti' | 'sparkles' | 'fireworks' | 'hearts' | 'stars' | 'bubbles' | 'snow' | 'emoji' | 'coins' | 'petals' | 'aurora' | 'fireflies' | 'paint' | 'balloons' | 'galaxy' | 'leaves' | 'glitch' | 'magicdust' | 'crystals';
 export interface UseRewardConfig extends AnimationConfig {
     animationType: AnimationType;
 }

package/dist/animations/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,QAAQ;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,MAAM,WAAW,eAAe;IAC9B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE;QACR,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,QAAQ,CAAC,EAAE,MAAM,CAAC;KACnB,CAAC;CACH;AAED,MAAM,MAAM,aAAa,GACrB,UAAU,GACV,UAAU,GACV,WAAW,GACX,QAAQ,GACR,OAAO,GACP,SAAS,GACT,MAAM,GACN,OAAO,GACP,OAAO,GACP,WAAW,GACX,QAAQ,GACR,QAAQ,GACR,WAAW,GACX,OAAO,GACP,OAAO,GACP,UAAU,GACV,QAAQ,CAAC;AAEb,MAAM,WAAW,eAAgB,SAAQ,eAAe;IACtD,aAAa,EAAE,aAAa,CAAC;CAC9B"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,QAAQ;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,MAAM,WAAW,eAAe;IAC9B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE;QACR,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,QAAQ,CAAC,EAAE,MAAM,CAAC;KACnB,CAAC;CACH;AAED,MAAM,MAAM,aAAa,GACrB,UAAU,GACV,UAAU,GACV,WAAW,GACX,QAAQ,GACR,OAAO,GACP,SAAS,GACT,MAAM,GACN,OAAO,GACP,OAAO,GACP,QAAQ,GACR,QAAQ,GACR,WAAW,GACX,OAAO,GACP,UAAU,GACV,QAAQ,GACR,QAAQ,GACR,QAAQ,GACR,WAAW,GACX,UAAU,CAAC;AAEf,MAAM,WAAW,eAAgB,SAAQ,eAAe;IACtD,aAAa,EAAE,aAAa,CAAC;CAC9B"}

package/dist/index.esm.js

@@ -11,7 +11,7 @@ const generateId = () => {
     return Math.random().toString(36).substring(2, 9);
 };
 const getRandomColor = (colors) => {
-    return colors[Math.floor(Math.random() * colors.length)] || colors[0];
+    return colors[Math.floor(Math.random() * colors.length)] || colors[0] || '#ffffff';
 };
 const createParticleStyle = (particle, containerRect) => {
     return {
@@ -26,9 +26,9 @@ const createParticleStyle = (particle, containerRect) => {
     };
 };
 
-const defaultColors = ['#f44336', '#e91e63', '#9c27b0', '#673ab7', '#3f51b5', '#2196f3', '#03a9f4', '#00bcd4', '#009688', '#4caf50', '#8bc34a', '#cddc39', '#ffeb3b', '#ffc107', '#ff9800', '#ff5722'];
+const defaultColors$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, 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);
@@ -74,7 +74,7 @@ const createSparkleParticles = (origin, config) => {
             opacity: 0,
             size: randomInRange(elementSize * 0.4, elementSize * 1.2),
             rotation: randomInRange(0, 360),
-            color: colors[Math.floor(Math.random() * colors.length)] || colors[0],
+            color: colors[Math.floor(Math.random() * colors.length)] || colors[0] || '#ffffff',
         });
     }
     return particles;
@@ -166,13 +166,13 @@ const createBubbleParticles = (origin, config) => {
             id: generateId(),
             x: origin.x + randomInRange(-spread, spread),
             y: origin.y,
-            vx: randomInRange(-2, 2),
-            vy: -randomInRange(startVelocity * 0.3, startVelocity * 0.6),
+            vx: randomInRange(-3, 3),
+            vy: -randomInRange(startVelocity * 0.7, startVelocity * 1.2),
             life: config.lifetime || 160,
             opacity: 0.7,
             size: randomInRange(elementSize * 0.4, elementSize * 1.2),
             rotation: 0,
-            color: colors[Math.floor(Math.random() * colors.length)] || colors[0],
+            color: colors[Math.floor(Math.random() * colors.length)] || colors[0] || '#ffffff',
         });
     }
     return particles;
@@ -209,7 +209,7 @@ const createStarParticles = (origin, config) => {
             opacity: 1,
             size: randomInRange(elementSize * 0.5, elementSize * 1.3),
             rotation: randomInRange(0, 360),
-            color: colors[Math.floor(Math.random() * colors.length)] || colors[0],
+            color: colors[Math.floor(Math.random() * colors.length)] || colors[0] || '#ffffff',
         });
     }
     return particles;
@@ -239,7 +239,7 @@ const createSnowParticles = (origin, config) => {
             opacity: randomInRange(0.4, 0.9),
             size: randomInRange(elementSize * 0.3, elementSize),
             rotation: randomInRange(0, 360),
-            color: colors[Math.floor(Math.random() * colors.length)] || colors[0],
+            color: colors[Math.floor(Math.random() * colors.length)] || colors[0] || '#ffffff',
         });
     }
     return particles;
@@ -322,7 +322,7 @@ const createCoinParticles = (origin, config) => {
             opacity: 1,
             size: randomInRange(elementSize * 0.8, elementSize * 1.2),
             rotation: randomInRange(0, 360),
-            color: colors[Math.floor(Math.random() * colors.length)] || colors[0],
+            color: colors[Math.floor(Math.random() * colors.length)] || colors[0] || '#ffffff',
         });
     }
     return particles;
@@ -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],
-        });
-    }
-    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;
@@ -431,7 +376,7 @@ const createPetalParticles = (origin, config) => {
             opacity: randomInRange(0.7, 1),
             size: randomInRange(elementSize * 0.7, elementSize * 1.3),
             rotation: randomInRange(0, 360),
-            color: colors[Math.floor(Math.random() * colors.length)] || colors[0],
+            color: colors[Math.floor(Math.random() * colors.length)] || colors[0] || '#ffffff',
         });
     }
     return particles;
@@ -489,7 +434,7 @@ const createAuroraParticles = (origin, config) => {
             opacity: 0,
             size: randomInRange(elementSize * 0.8, elementSize * 1.2),
             rotation: randomInRange(-15, 15),
-            color: colors[Math.floor(Math.random() * colors.length)] || colors[0],
+            color: colors[Math.floor(Math.random() * colors.length)] || colors[0] || '#ffffff',
         });
     }
     return particles;
@@ -546,7 +491,7 @@ const createFireflyParticles = (origin, config) => {
             opacity: 0,
             size: randomInRange(elementSize * 0.6, elementSize),
             rotation: randomInRange(0, 360), // Used for blink timing
-            color: colors[Math.floor(Math.random() * colors.length)] || colors[0],
+            color: colors[Math.floor(Math.random() * colors.length)] || colors[0] || '#ffffff',
         });
     }
     return particles;
@@ -616,7 +561,7 @@ const createPaintParticles = (origin, config) => {
                 ? randomInRange(elementSize * 1.5, elementSize * 2.5)
                 : randomInRange(elementSize * 0.3, elementSize),
             rotation: randomInRange(0, 360),
-            color: colors[Math.floor(Math.random() * colors.length)] || colors[0],
+            color: colors[Math.floor(Math.random() * colors.length)] || colors[0] || '#ffffff',
         });
     }
     return particles;
@@ -679,80 +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],
-        });
-    }
-    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;
@@ -762,15 +633,15 @@ const createBalloonParticles = (origin, config) => {
         const velocity = randomInRange(startVelocity * 0.7, startVelocity);
         particles.push({
             id: generateId(),
-            x: origin.x + randomInRange(-30, 30),
-            y: origin.y + randomInRange(0, 20),
-            vx: Math.sin(angle) * velocity * 0.2,
+            x: origin.x + randomInRange(-spread * 0.8, spread * 0.8), // Spread balloons out more
+            y: origin.y + randomInRange(-10, 30),
+            vx: Math.sin(angle) * velocity * 0.3 + randomInRange(-1, 1), // Add horizontal drift
             vy: -velocity * 0.4, // Balloons float up slowly
             life: config.lifetime || 250,
             opacity: 0.9,
             size: randomInRange(elementSize * 0.8, elementSize * 1.2),
             rotation: randomInRange(-10, 10),
-            color: colors[Math.floor(Math.random() * colors.length)] || colors[0],
+            color: colors[Math.floor(Math.random() * colors.length)] || colors[0] || '#ffffff',
         });
     }
     return particles;
@@ -866,7 +737,7 @@ const createGalaxyParticles = (origin, config) => {
             opacity: 0,
             size: randomInRange(elementSize * 0.3, elementSize) * (1 - progress * 0.5), // Smaller at edges
             rotation: randomInRange(0, 360),
-            color: colors[Math.floor(Math.random() * colors.length)] || colors[0],
+            color: colors[Math.floor(Math.random() * colors.length)] || colors[0] || '#ffffff',
         });
     }
     return particles;
@@ -934,6 +805,272 @@ const renderGalaxyParticle = (particle) => {
             } }))));
 };
 
+const createGlitchParticles = (origin, config) => {
+    const { particleCount = 20, elementSize = 200 } = config;
+    const particles = [];
+    const channels = ['r', 'g', 'b'];
+    for (let i = 0; i < particleCount; i++) {
+        const isHorizontal = Math.random() > 0.3;
+        const channelIndex = i % 3;
+        const channel = channels[channelIndex];
+        // Encode all data in rotation:
+        // bits 0-1: channel (0=r, 1=g, 2=b)
+        // bit 2: isHorizontal (0=false, 1=true)
+        // bits 3-10: width (0-255)
+        // bits 11-18: height (0-255)
+        // bits 19-24: glitchOffset + 32 (to make positive)
+        const width = isHorizontal ? randomInRange(50, 200) : randomInRange(2, 8);
+        const height = isHorizontal ? randomInRange(2, 8) : randomInRange(50, 200);
+        const glitchOffset = randomInRange(-20, 20);
+        const encodedData = channelIndex +
+            (isHorizontal ? 4 : 0) +
+            (Math.floor(width) << 3) +
+            (Math.floor(height) << 11) +
+            ((glitchOffset + 32) << 19);
+        particles.push({
+            id: generateId(),
+            x: origin.x + randomInRange(-elementSize / 2, elementSize / 2),
+            y: origin.y + randomInRange(-elementSize / 2, elementSize / 2),
+            vx: randomInRange(-50, 50),
+            vy: randomInRange(-30, 30),
+            life: config.lifetime || 150,
+            opacity: randomInRange(0.3, 1),
+            size: randomInRange(5, 20), // Store distortionAmount
+            rotation: encodedData,
+            color: channel === 'r' ? '#ff0000' : channel === 'g' ? '#00ff00' : '#0000ff',
+        });
+    }
+    return particles;
+};
+const renderGlitchParticle = (particle) => {
+    // Decode data from rotation
+    const channelIndex = particle.rotation & 3;
+    const width = (particle.rotation >> 3) & 255;
+    const height = (particle.rotation >> 11) & 255;
+    const glitchOffset = ((particle.rotation >> 19) & 63) - 32;
+    const channel = ['r', 'g', 'b'][channelIndex];
+    const distortionAmount = particle.size;
+    const colors = {
+        r: channel === 'r' ? 255 : 0,
+        g: channel === 'g' ? 255 : 0,
+        b: channel === 'b' ? 255 : 0,
+    };
+    const mixBlendMode = channel === 'r' ? 'screen' :
+        channel === 'g' ? 'multiply' : 'difference';
+    return (React.createElement("div", { key: particle.id, style: {
+            width: `${width}px`,
+            height: `${height}px`,
+            backgroundColor: `rgba(${colors.r}, ${colors.g}, ${colors.b}, ${particle.opacity})`,
+            mixBlendMode,
+            filter: `blur(${randomInRange(0, 2)}px)`,
+            boxShadow: `${glitchOffset}px 0 ${distortionAmount}px rgba(${colors.r}, ${colors.g}, ${colors.b}, ${particle.opacity * 0.5})`,
+        } }));
+};
+
+const defaultColors$2 = ['#9C27B0', '#E91E63', '#FF00FF', '#00FFFF', '#FFD700', '#FF69B4', '#DA70D6', '#9370DB'];
+const createMagicDustParticles = (origin, 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
+        const angle = (i / particleCount) * 360 + randomInRange(-30, 30);
+        const velocity = randomInRange(startVelocity * 0.3, startVelocity);
+        const color = getRandomColor(colors);
+        // Add some particles that trail behind cursor movement
+        const offsetAngle = randomInRange(0, 360);
+        const offsetDistance = randomInRange(0, 30);
+        particles.push({
+            id: generateId(),
+            x: origin.x + Math.cos(degreesToRadians(offsetAngle)) * offsetDistance,
+            y: origin.y + Math.sin(degreesToRadians(offsetAngle)) * offsetDistance,
+            vx: Math.cos(degreesToRadians(angle)) * velocity + randomInRange(-2, 2),
+            vy: Math.sin(degreesToRadians(angle)) * velocity + randomInRange(-2, 2),
+            life: config.lifetime || 120,
+            opacity: randomInRange(0.4, 1),
+            size: randomInRange(elementSize * 0.3, elementSize),
+            rotation: randomInRange(0, 360),
+            color,
+        });
+    }
+    return particles;
+};
+const renderMagicDustParticle = (particle) => {
+    const sparkleSize = particle.size * 0.7;
+    return (React.createElement("div", { key: particle.id, style: {
+            width: `${particle.size}px`,
+            height: `${particle.size}px`,
+            position: 'relative',
+        } },
+        React.createElement("div", { style: {
+                position: 'absolute',
+                width: '100%',
+                height: '100%',
+                backgroundColor: particle.color,
+                borderRadius: '50%',
+                boxShadow: `0 0 ${particle.size}px ${particle.color}, 0 0 ${particle.size * 2}px ${particle.color}`,
+                filter: 'blur(1px)',
+            } }),
+        React.createElement("div", { style: {
+                position: 'absolute',
+                top: '50%',
+                left: '50%',
+                width: `${sparkleSize}px`,
+                height: `${sparkleSize}px`,
+                transform: `translate(-50%, -50%) rotate(${particle.rotation}deg)`,
+            } },
+            React.createElement("div", { style: {
+                    position: 'absolute',
+                    width: '100%',
+                    height: '2px',
+                    backgroundColor: 'white',
+                    top: '50%',
+                    left: '0',
+                    transform: 'translateY(-50%)',
+                    boxShadow: '0 0 4px white',
+                } }),
+            React.createElement("div", { style: {
+                    position: 'absolute',
+                    width: '2px',
+                    height: '100%',
+                    backgroundColor: 'white',
+                    left: '50%',
+                    top: '0',
+                    transform: 'translateX(-50%)',
+                    boxShadow: '0 0 4px white',
+                } }))));
+};
+
+const defaultColors$1 = ['#FF1493', '#00CED1', '#FFD700', '#FF69B4', '#7B68EE', '#00FA9A', '#FF6347', '#4169E1'];
+const createCrystalParticles = (origin, 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
+        const angle = randomInRange(0, 360);
+        const velocity = randomInRange(startVelocity * 0.5, startVelocity);
+        const color = getRandomColor(colors);
+        particles.push({
+            id: generateId(),
+            x: origin.x,
+            y: origin.y,
+            vx: Math.cos(degreesToRadians(angle)) * velocity,
+            vy: Math.sin(degreesToRadians(angle)) * velocity - 10,
+            life: config.lifetime || 150,
+            opacity: randomInRange(0.7, 1),
+            size: randomInRange(elementSize * 0.6, elementSize),
+            rotation: randomInRange(0, 360),
+            color,
+        });
+    }
+    return particles;
+};
+const renderCrystalParticle = (particle) => {
+    // Create rainbow refraction effect
+    const hue = (Date.now() * 0.5 + particle.x + particle.y) % 360;
+    return (React.createElement("div", { key: particle.id, style: {
+            width: `${particle.size}px`,
+            height: `${particle.size * 1.5}px`,
+            position: 'relative',
+            transform: `rotate(${particle.rotation}deg)`,
+        } },
+        React.createElement("div", { style: {
+                position: 'absolute',
+                width: '100%',
+                height: '100%',
+                background: `linear-gradient(135deg, ${particle.color}, ${particle.color}88, transparent)`,
+                clipPath: 'polygon(50% 0%, 100% 40%, 75% 100%, 25% 100%, 0% 40%)',
+                boxShadow: `0 0 ${particle.size}px ${particle.color}44`,
+            } }),
+        React.createElement("div", { style: {
+                position: 'absolute',
+                width: '80%',
+                height: '80%',
+                top: '10%',
+                left: '10%',
+                background: `linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.4), transparent)`,
+                clipPath: 'polygon(50% 10%, 90% 45%, 65% 90%, 35% 90%, 10% 45%)',
+            } }),
+        React.createElement("div", { style: {
+                position: 'absolute',
+                width: '100%',
+                height: '100%',
+                background: `linear-gradient(${hue}deg, 
+            hsla(${hue}, 100%, 50%, 0.3),
+            hsla(${(hue + 60) % 360}, 100%, 50%, 0.3),
+            hsla(${(hue + 120) % 360}, 100%, 50%, 0.3)
+          )`,
+                clipPath: 'polygon(50% 0%, 100% 40%, 75% 100%, 25% 100%, 0% 40%)',
+                mixBlendMode: 'screen',
+            } }),
+        React.createElement("div", { style: {
+                position: 'absolute',
+                width: '30%',
+                height: '30%',
+                top: '20%',
+                left: '35%',
+                background: 'radial-gradient(circle, rgba(255, 255, 255, 0.8), transparent)',
+                borderRadius: '50%',
+                filter: 'blur(2px)',
+            } })));
+};
+
+const defaultColors = ['#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++) {
+        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 animations = {
     confetti: {
         createParticles: createConfettiParticles,
@@ -971,10 +1108,6 @@ const animations = {
         createParticles: createCoinParticles,
         renderParticle: renderCoinParticle,
     },
-    lightning: {
-        createParticles: createLightningParticles,
-        renderParticle: renderLightningParticle,
-    },
     petals: {
         createParticles: createPetalParticles,
         renderParticle: renderPetalParticle,
@@ -991,10 +1124,6 @@ const animations = {
         createParticles: createPaintParticles,
         renderParticle: renderPaintParticle,
     },
-    music: {
-        createParticles: createMusicParticles,
-        renderParticle: renderMusicParticle,
-    },
     balloons: {
         createParticles: createBalloonParticles,
         renderParticle: renderBalloonParticle,
@@ -1003,6 +1132,22 @@ const animations = {
         createParticles: createGalaxyParticles,
         renderParticle: renderGalaxyParticle,
     },
+    glitch: {
+        createParticles: createGlitchParticles,
+        renderParticle: renderGlitchParticle,
+    },
+    magicdust: {
+        createParticles: createMagicDustParticles,
+        renderParticle: renderMagicDustParticle,
+    },
+    crystals: {
+        createParticles: createCrystalParticles,
+        renderParticle: renderCrystalParticle,
+    },
+    leaves: {
+        createParticles: createLeafParticles,
+        renderParticle: renderLeafParticle,
+    },
 };
 
 const useReward = (elementId, animationType, config) => {