partycles 1.1.4 → 1.1.5

package/README.md

@@ -91,6 +91,15 @@ interface AnimationConfig {
     wind?: number;             // Horizontal wind force (default: 0)
     friction?: number;         // Air friction (default: 0.99)
   };
+  // NEW: Optional enhanced effects
+  effects?: {
+    flutter?: boolean;         // Paper-like floating for confetti
+    twinkle?: boolean;         // Brightness variation for stars/sparkles
+    pulse?: boolean;           // Heartbeat effect for hearts
+    spin3D?: boolean;          // 3D rotation for coins
+    wobble?: boolean;          // Realistic wobble for bubbles
+    windDrift?: boolean;       // Horizontal drift for snow/leaves
+  };
 }
 ```
 
@@ -103,7 +112,9 @@ Classic celebration effect with colorful paper pieces.
 const { reward } = useReward('buttonId', 'confetti', {
   particleCount: 30,
   spread: 60,
-  colors: ['#ff0000', '#00ff00', '#0000ff']
+  colors: ['#ff0000', '#00ff00', '#0000ff'],
+  // NEW: Enable paper flutter effect
+  effects: { flutter: true }
 });
 ```
 
@@ -374,6 +385,54 @@ function Achievement({ unlocked, name }) {
 }
 ```
 
+## ✨ Enhanced Effects (v1.1.5+)
+
+Make animations more realistic with optional effects:
+
+```tsx
+// Confetti with paper flutter
+const { reward } = useReward('confetti-btn', 'confetti', {
+  effects: { flutter: true }
+});
+
+// Stars with twinkling
+const { reward } = useReward('star-btn', 'stars', {
+  effects: { twinkle: true }
+});
+
+// Hearts with pulse/heartbeat
+const { reward } = useReward('heart-btn', 'hearts', {
+  effects: { pulse: true }
+});
+
+// Coins with 3D spin
+const { reward } = useReward('coin-btn', 'coins', {
+  effects: { spin3D: true }
+});
+
+// Snow with wind drift
+const { reward } = useReward('snow-btn', 'snow', {
+  effects: { windDrift: true }
+});
+
+// Bubbles with wobble
+const { reward } = useReward('bubble-btn', 'bubbles', {
+  effects: { wobble: true }
+});
+
+// Combine multiple effects
+const { reward } = useReward('magic-btn', 'sparkles', {
+  effects: { 
+    twinkle: true,
+    // Other effects work too!
+  },
+  physics: {
+    gravity: 0.2,
+    wind: 0.1
+  }
+});
+```
+
 ## 🎯 Best Practices
 
 1. **Unique IDs**: Ensure each animated element has a unique ID

package/dist/animations/animations/coins.d.ts

@@ -4,5 +4,7 @@ export declare const createCoinParticles: (origin: {
     x: number;
     y: number;
 }, config: AnimationConfig) => Particle[];
-export declare const renderCoinParticle: (particle: Particle) => React.ReactNode;
+export declare const renderCoinParticle: (particle: Particle & {
+    config?: AnimationConfig;
+}) => React.ReactNode;
 //# sourceMappingURL=coins.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"coins.d.ts","sourceRoot":"","sources":["../../src/animations/coins.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,eAAe,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAKrD,eAAO,MAAM,mBAAmB,GAC9B,QAAQ;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,EAChC,QAAQ,eAAe,KACtB,QAAQ,EAiCV,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAAI,UAAU,QAAQ,KAAG,KAAK,CAAC,SA0C7D,CAAC"}
+{"version":3,"file":"coins.d.ts","sourceRoot":"","sources":["../../src/animations/coins.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,eAAe,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAKrD,eAAO,MAAM,mBAAmB,GAC9B,QAAQ;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,EAChC,QAAQ,eAAe,KACtB,QAAQ,EAiCV,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAAI,UAAU,QAAQ,GAAG;IAAE,MAAM,CAAC,EAAE,eAAe,CAAA;CAAE,KAAG,KAAK,CAAC,SAoD5F,CAAC"}

package/dist/animations/animations/hearts.d.ts

@@ -4,5 +4,7 @@ export declare const createHeartParticles: (origin: {
     x: number;
     y: number;
 }, config: AnimationConfig) => Particle[];
-export declare const renderHeartParticle: (particle: Particle) => React.ReactNode;
+export declare const renderHeartParticle: (particle: Particle & {
+    config?: AnimationConfig;
+}) => React.ReactNode;
 //# sourceMappingURL=hearts.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"hearts.d.ts","sourceRoot":"","sources":["../../src/animations/hearts.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,eAAe,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAKrD,eAAO,MAAM,oBAAoB,GAC/B,QAAQ;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,EAChC,QAAQ,eAAe,KACtB,QAAQ,EA8BV,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAAI,UAAU,QAAQ,KAAG,KAAK,CAAC,SAe9D,CAAC"}
+{"version":3,"file":"hearts.d.ts","sourceRoot":"","sources":["../../src/animations/hearts.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,eAAe,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAKrD,eAAO,MAAM,oBAAoB,GAC/B,QAAQ;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,EAChC,QAAQ,eAAe,KACtB,QAAQ,EA8BV,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAAI,UAAU,QAAQ,GAAG;IAAE,MAAM,CAAC,EAAE,eAAe,CAAA;CAAE,KAAG,KAAK,CAAC,SAqB7F,CAAC"}

package/dist/animations/coins.d.ts

@@ -4,5 +4,7 @@ export declare const createCoinParticles: (origin: {
     x: number;
     y: number;
 }, config: AnimationConfig) => Particle[];
-export declare const renderCoinParticle: (particle: Particle) => React.ReactNode;
+export declare const renderCoinParticle: (particle: Particle & {
+    config?: AnimationConfig;
+}) => React.ReactNode;
 //# sourceMappingURL=coins.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"coins.d.ts","sourceRoot":"","sources":["../../src/animations/coins.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,eAAe,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAKrD,eAAO,MAAM,mBAAmB,GAC9B,QAAQ;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,EAChC,QAAQ,eAAe,KACtB,QAAQ,EAiCV,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAAI,UAAU,QAAQ,KAAG,KAAK,CAAC,SA0C7D,CAAC"}
+{"version":3,"file":"coins.d.ts","sourceRoot":"","sources":["../../src/animations/coins.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,eAAe,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAKrD,eAAO,MAAM,mBAAmB,GAC9B,QAAQ;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,EAChC,QAAQ,eAAe,KACtB,QAAQ,EAiCV,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAAI,UAAU,QAAQ,GAAG;IAAE,MAAM,CAAC,EAAE,eAAe,CAAA;CAAE,KAAG,KAAK,CAAC,SAoD5F,CAAC"}

package/dist/animations/hearts.d.ts

@@ -4,5 +4,7 @@ export declare const createHeartParticles: (origin: {
     x: number;
     y: number;
 }, config: AnimationConfig) => Particle[];
-export declare const renderHeartParticle: (particle: Particle) => React.ReactNode;
+export declare const renderHeartParticle: (particle: Particle & {
+    config?: AnimationConfig;
+}) => React.ReactNode;
 //# sourceMappingURL=hearts.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"hearts.d.ts","sourceRoot":"","sources":["../../src/animations/hearts.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,eAAe,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAKrD,eAAO,MAAM,oBAAoB,GAC/B,QAAQ;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,EAChC,QAAQ,eAAe,KACtB,QAAQ,EA8BV,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAAI,UAAU,QAAQ,KAAG,KAAK,CAAC,SAe9D,CAAC"}
+{"version":3,"file":"hearts.d.ts","sourceRoot":"","sources":["../../src/animations/hearts.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,eAAe,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAKrD,eAAO,MAAM,oBAAoB,GAC/B,QAAQ;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,EAChC,QAAQ,eAAe,KACtB,QAAQ,EA8BV,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAAI,UAAU,QAAQ,GAAG;IAAE,MAAM,CAAC,EAAE,eAAe,CAAA;CAAE,KAAG,KAAK,CAAC,SAqB7F,CAAC"}

package/dist/animations/hearts.esm.js

@@ -34,8 +34,14 @@ const createHeartParticles = (origin, config) => {
     return particles;
 };
 const renderHeartParticle = (particle) => {
-    return (React.createElement("svg", { key: particle.id, width: particle.size, height: particle.size, viewBox: "0 0 24 24", fill: particle.color, style: {
+    var _a, _b;
+    // Calculate pulse effect if enabled
+    const pulse = ((_b = (_a = particle.config) === null || _a === void 0 ? void 0 : _a.effects) === null || _b === void 0 ? void 0 : _b.pulse)
+        ? 1 + Math.sin(particle.life * 0.2) * 0.1
+        : 1;
+    return (React.createElement("svg", { key: particle.id, width: particle.size * pulse, height: particle.size * pulse, viewBox: "0 0 24 24", fill: particle.color, style: {
             filter: `drop-shadow(0 0 ${particle.size * 0.15}px ${particle.color})`,
+            transition: 'width 0.1s ease-out, height 0.1s ease-out',
         } },
         React.createElement("path", { d: "M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" })));
 };

package/dist/animations/hearts.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"hearts.esm.js","sources":["../../src/utils.ts","../../src/animations/hearts.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 (\n    colors[Math.floor(Math.random() * colors.length)] || colors[0] || '#ffffff'\n  );\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};\n","import React from 'react';\nimport { AnimationConfig, Particle } from '../types';\nimport { randomInRange, generateId, getRandomColor } from '../utils';\n\nconst heartColors = ['#ff1744', '#e91e63', '#ff4569', '#ff6b6b', '#ee5a70'];\n\nexport const createHeartParticles = (\n  origin: { x: number; y: number },\n  config: AnimationConfig\n): Particle[] => {\n  const {\n    particleCount = 25,\n    startVelocity = 12,\n    colors = heartColors,\n    elementSize = 30,\n  } = config;\n\n  const particles: Particle[] = [];\n\n  for (let i = 0; i < particleCount; i++) {\n    const angle = randomInRange(-45, -135);\n    const velocity = randomInRange(startVelocity * 0.7, startVelocity * 1.3);\n    const horizontalDrift = randomInRange(-2, 2);\n\n    particles.push({\n      id: generateId(),\n      x: origin.x + randomInRange(-10, 10),\n      y: origin.y,\n      vx: Math.cos((angle * Math.PI) / 180) * velocity + horizontalDrift,\n      vy: Math.sin((angle * Math.PI) / 180) * velocity,\n      life: config.lifetime || 180,\n      opacity: 1,\n      size: randomInRange(elementSize * 0.6, elementSize * 1.2),\n      rotation: randomInRange(-20, 20),\n      color: getRandomColor(colors),\n    });\n  }\n\n  return particles;\n};\n\nexport const renderHeartParticle = (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.15}px ${particle.color})`,\n      }}\n    >\n      <path d=\"M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z\" />\n    </svg>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"hearts.esm.js","sources":["../../src/utils.ts","../../src/animations/hearts.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 (\n    colors[Math.floor(Math.random() * colors.length)] || colors[0] || '#ffffff'\n  );\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};\n","import React from 'react';\nimport { AnimationConfig, Particle } from '../types';\nimport { randomInRange, generateId, getRandomColor } from '../utils';\n\nconst heartColors = ['#ff1744', '#e91e63', '#ff4569', '#ff6b6b', '#ee5a70'];\n\nexport const createHeartParticles = (\n  origin: { x: number; y: number },\n  config: AnimationConfig\n): Particle[] => {\n  const {\n    particleCount = 25,\n    startVelocity = 12,\n    colors = heartColors,\n    elementSize = 30,\n  } = config;\n\n  const particles: Particle[] = [];\n\n  for (let i = 0; i < particleCount; i++) {\n    const angle = randomInRange(-45, -135);\n    const velocity = randomInRange(startVelocity * 0.7, startVelocity * 1.3);\n    const horizontalDrift = randomInRange(-2, 2);\n\n    particles.push({\n      id: generateId(),\n      x: origin.x + randomInRange(-10, 10),\n      y: origin.y,\n      vx: Math.cos((angle * Math.PI) / 180) * velocity + horizontalDrift,\n      vy: Math.sin((angle * Math.PI) / 180) * velocity,\n      life: config.lifetime || 180,\n      opacity: 1,\n      size: randomInRange(elementSize * 0.6, elementSize * 1.2),\n      rotation: randomInRange(-20, 20),\n      color: getRandomColor(colors),\n    });\n  }\n\n  return particles;\n};\n\nexport const renderHeartParticle = (particle: Particle & { config?: AnimationConfig }): React.ReactNode => {\n  // Calculate pulse effect if enabled\n  const pulse = particle.config?.effects?.pulse \n    ? 1 + Math.sin(particle.life * 0.2) * 0.1 \n    : 1;\n  \n  return (\n    <svg\n      key={particle.id}\n      width={particle.size * pulse}\n      height={particle.size * pulse}\n      viewBox=\"0 0 24 24\"\n      fill={particle.color}\n      style={{\n        filter: `drop-shadow(0 0 ${particle.size * 0.15}px ${particle.color})`,\n        transition: 'width 0.1s ease-out, height 0.1s ease-out',\n      }}\n    >\n      <path d=\"M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z\" />\n    </svg>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/animations/hearts.js

@@ -36,8 +36,14 @@ const createHeartParticles = (origin, config) => {
     return particles;
 };
 const renderHeartParticle = (particle) => {
-    return (React.createElement("svg", { key: particle.id, width: particle.size, height: particle.size, viewBox: "0 0 24 24", fill: particle.color, style: {
+    var _a, _b;
+    // Calculate pulse effect if enabled
+    const pulse = ((_b = (_a = particle.config) === null || _a === void 0 ? void 0 : _a.effects) === null || _b === void 0 ? void 0 : _b.pulse)
+        ? 1 + Math.sin(particle.life * 0.2) * 0.1
+        : 1;
+    return (React.createElement("svg", { key: particle.id, width: particle.size * pulse, height: particle.size * pulse, viewBox: "0 0 24 24", fill: particle.color, style: {
             filter: `drop-shadow(0 0 ${particle.size * 0.15}px ${particle.color})`,
+            transition: 'width 0.1s ease-out, height 0.1s ease-out',
         } },
         React.createElement("path", { d: "M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" })));
 };

package/dist/animations/hearts.js.map

@@ -1 +1 @@
-{"version":3,"file":"hearts.js","sources":["../../src/utils.ts","../../src/animations/hearts.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 (\n    colors[Math.floor(Math.random() * colors.length)] || colors[0] || '#ffffff'\n  );\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};\n","import React from 'react';\nimport { AnimationConfig, Particle } from '../types';\nimport { randomInRange, generateId, getRandomColor } from '../utils';\n\nconst heartColors = ['#ff1744', '#e91e63', '#ff4569', '#ff6b6b', '#ee5a70'];\n\nexport const createHeartParticles = (\n  origin: { x: number; y: number },\n  config: AnimationConfig\n): Particle[] => {\n  const {\n    particleCount = 25,\n    startVelocity = 12,\n    colors = heartColors,\n    elementSize = 30,\n  } = config;\n\n  const particles: Particle[] = [];\n\n  for (let i = 0; i < particleCount; i++) {\n    const angle = randomInRange(-45, -135);\n    const velocity = randomInRange(startVelocity * 0.7, startVelocity * 1.3);\n    const horizontalDrift = randomInRange(-2, 2);\n\n    particles.push({\n      id: generateId(),\n      x: origin.x + randomInRange(-10, 10),\n      y: origin.y,\n      vx: Math.cos((angle * Math.PI) / 180) * velocity + horizontalDrift,\n      vy: Math.sin((angle * Math.PI) / 180) * velocity,\n      life: config.lifetime || 180,\n      opacity: 1,\n      size: randomInRange(elementSize * 0.6, elementSize * 1.2),\n      rotation: randomInRange(-20, 20),\n      color: getRandomColor(colors),\n    });\n  }\n\n  return particles;\n};\n\nexport const renderHeartParticle = (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.15}px ${particle.color})`,\n      }}\n    >\n      <path d=\"M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z\" />\n    </svg>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"hearts.js","sources":["../../src/utils.ts","../../src/animations/hearts.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 (\n    colors[Math.floor(Math.random() * colors.length)] || colors[0] || '#ffffff'\n  );\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};\n","import React from 'react';\nimport { AnimationConfig, Particle } from '../types';\nimport { randomInRange, generateId, getRandomColor } from '../utils';\n\nconst heartColors = ['#ff1744', '#e91e63', '#ff4569', '#ff6b6b', '#ee5a70'];\n\nexport const createHeartParticles = (\n  origin: { x: number; y: number },\n  config: AnimationConfig\n): Particle[] => {\n  const {\n    particleCount = 25,\n    startVelocity = 12,\n    colors = heartColors,\n    elementSize = 30,\n  } = config;\n\n  const particles: Particle[] = [];\n\n  for (let i = 0; i < particleCount; i++) {\n    const angle = randomInRange(-45, -135);\n    const velocity = randomInRange(startVelocity * 0.7, startVelocity * 1.3);\n    const horizontalDrift = randomInRange(-2, 2);\n\n    particles.push({\n      id: generateId(),\n      x: origin.x + randomInRange(-10, 10),\n      y: origin.y,\n      vx: Math.cos((angle * Math.PI) / 180) * velocity + horizontalDrift,\n      vy: Math.sin((angle * Math.PI) / 180) * velocity,\n      life: config.lifetime || 180,\n      opacity: 1,\n      size: randomInRange(elementSize * 0.6, elementSize * 1.2),\n      rotation: randomInRange(-20, 20),\n      color: getRandomColor(colors),\n    });\n  }\n\n  return particles;\n};\n\nexport const renderHeartParticle = (particle: Particle & { config?: AnimationConfig }): React.ReactNode => {\n  // Calculate pulse effect if enabled\n  const pulse = particle.config?.effects?.pulse \n    ? 1 + Math.sin(particle.life * 0.2) * 0.1 \n    : 1;\n  \n  return (\n    <svg\n      key={particle.id}\n      width={particle.size * pulse}\n      height={particle.size * pulse}\n      viewBox=\"0 0 24 24\"\n      fill={particle.color}\n      style={{\n        filter: `drop-shadow(0 0 ${particle.size * 0.15}px ${particle.color})`,\n        transition: 'width 0.1s ease-out, height 0.1s ease-out',\n      }}\n    >\n      <path d=\"M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z\" />\n    </svg>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/animations/types.d.ts

@@ -10,6 +10,7 @@ export interface Particle {
     rotation: number;
     color: string;
     element?: React.ReactNode;
+    config?: AnimationConfig;
 }
 export interface AnimationConfig {
     particleCount?: number;
@@ -25,6 +26,14 @@ export interface AnimationConfig {
         wind?: number;
         friction?: number;
     };
+    effects?: {
+        flutter?: boolean;
+        twinkle?: boolean;
+        pulse?: boolean;
+        spin3D?: boolean;
+        wobble?: boolean;
+        windDrift?: boolean;
+    };
 }
 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 {

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,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"}
+{"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;IAC1B,MAAM,CAAC,EAAE,eAAe,CAAC;CAC1B;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;IAEF,OAAO,CAAC,EAAE;QACR,OAAO,CAAC,EAAE,OAAO,CAAC;QAClB,OAAO,CAAC,EAAE,OAAO,CAAC;QAClB,KAAK,CAAC,EAAE,OAAO,CAAC;QAChB,MAAM,CAAC,EAAE,OAAO,CAAC;QACjB,MAAM,CAAC,EAAE,OAAO,CAAC;QACjB,SAAS,CAAC,EAAE,OAAO,CAAC;KACrB,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/animations/useReward.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useReward.d.ts","sourceRoot":"","sources":["../src/useReward.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,aAAa,EAAE,eAAe,EAAY,MAAM,SAAS,CAAC;AAQnE,UAAU,eAAe;IACvB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,WAAW,EAAE,OAAO,CAAC;CACtB;AAED,eAAO,MAAM,SAAS,GACpB,WAAW,MAAM,EACjB,eAAe,aAAa,EAC5B,SAAS,eAAe,KACvB,eAwLF,CAAC"}
+{"version":3,"file":"useReward.d.ts","sourceRoot":"","sources":["../src/useReward.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,aAAa,EAAE,eAAe,EAAY,MAAM,SAAS,CAAC;AAQnE,UAAU,eAAe;IACvB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,WAAW,EAAE,OAAO,CAAC;CACtB;AAED,eAAO,MAAM,SAAS,GACpB,WAAW,MAAM,EACjB,eAAe,aAAa,EAC5B,SAAS,eAAe,KACvB,eAsNF,CAAC"}

package/dist/index.esm.js

@@ -131,8 +131,14 @@ const createHeartParticles = (origin, config) => {
     return particles;
 };
 const renderHeartParticle = (particle) => {
-    return (React.createElement("svg", { key: particle.id, width: particle.size, height: particle.size, viewBox: "0 0 24 24", fill: particle.color, style: {
+    var _a, _b;
+    // Calculate pulse effect if enabled
+    const pulse = ((_b = (_a = particle.config) === null || _a === void 0 ? void 0 : _a.effects) === null || _b === void 0 ? void 0 : _b.pulse)
+        ? 1 + Math.sin(particle.life * 0.2) * 0.1
+        : 1;
+    return (React.createElement("svg", { key: particle.id, width: particle.size * pulse, height: particle.size * pulse, viewBox: "0 0 24 24", fill: particle.color, style: {
             filter: `drop-shadow(0 0 ${particle.size * 0.15}px ${particle.color})`,
+            transition: 'width 0.1s ease-out, height 0.1s ease-out',
         } },
         React.createElement("path", { d: "M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" })));
 };
@@ -368,14 +374,21 @@ const createCoinParticles = (origin, config) => {
     return particles;
 };
 const renderCoinParticle = (particle) => {
-    const spinSpeed = 8; // Degrees per frame
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    const spinSpeed = ((_b = (_a = particle.config) === null || _a === void 0 ? void 0 : _a.effects) === null || _b === void 0 ? void 0 : _b.spin3D) ? 8 : 2; // Faster spin with 3D effect
     const currentRotation = particle.rotation + (120 - particle.life) * spinSpeed;
+    // 3D effect: scale X based on rotation to simulate perspective
+    const scaleX = ((_d = (_c = particle.config) === null || _c === void 0 ? void 0 : _c.effects) === null || _d === void 0 ? void 0 : _d.spin3D)
+        ? Math.abs(Math.cos((currentRotation * Math.PI) / 180))
+        : 1;
     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)`,
+            transform: ((_f = (_e = particle.config) === null || _e === void 0 ? void 0 : _e.effects) === null || _f === void 0 ? void 0 : _f.spin3D)
+                ? `rotateY(${currentRotation}deg) scaleX(${scaleX})`
+                : `rotate(${currentRotation}deg)`,
             transformStyle: 'preserve-3d',
             boxShadow: `
           inset -2px -2px 4px rgba(0, 0, 0, 0.3),
@@ -385,6 +398,7 @@ const renderCoinParticle = (particle) => {
             border: `1px solid ${particle.color}`,
             position: 'relative',
             overflow: 'hidden',
+            backfaceVisibility: 'hidden',
         } },
         React.createElement("div", { style: {
                 position: 'absolute',
@@ -396,6 +410,8 @@ const renderCoinParticle = (particle) => {
                 color: '#B8860B',
                 textShadow: '1px 1px 1px rgba(0, 0, 0, 0.3)',
                 fontFamily: 'Arial, sans-serif',
+                opacity: ((_h = (_g = particle.config) === null || _g === void 0 ? void 0 : _g.effects) === null || _h === void 0 ? void 0 : _h.spin3D) && scaleX < 0.3 ? 0 : 1,
+                transition: 'opacity 0.1s',
             } }, "$")));
 };
 
@@ -1331,7 +1347,8 @@ const useReward = (elementId, animationType, config) => {
             ? optimizeConfigForMobile(config)
             : undefined;
         // Create particles
-        particlesRef.current = animationHandler.createParticles(origin, optimizedConfig || {});
+        particlesRef.current = animationHandler.createParticles(origin, optimizedConfig || {}).map(particle => (Object.assign(Object.assign({}, particle), { config: optimizedConfig || config // Store config in particle for render functions
+         })));
         // Create container
         const container = document.createElement('div');
         container.style.position = 'fixed';
@@ -1376,6 +1393,22 @@ const useReward = (elementId, animationType, config) => {
                 particle.vy *= friction;
                 particle.rotation += particle.vx * 2;
                 particle.life -= 1.2;
+                // Apply optional effects
+                const effects = config === null || config === void 0 ? void 0 : config.effects;
+                // Flutter effect for confetti
+                if ((effects === null || effects === void 0 ? void 0 : effects.flutter) && animationType === 'confetti') {
+                    particle.x += Math.sin(particle.life * 0.1) * 0.5;
+                    particle.rotation += Math.sin(particle.life * 0.05) * 2;
+                }
+                // Wind drift for snow/leaves
+                if ((effects === null || effects === void 0 ? void 0 : effects.windDrift) && (animationType === 'snow' || animationType === 'leaves')) {
+                    particle.x += Math.sin(particle.life * 0.05 + particle.id.charCodeAt(0)) * 0.8;
+                }
+                // Wobble effect for bubbles
+                if ((effects === null || effects === void 0 ? void 0 : effects.wobble) && animationType === 'bubbles') {
+                    particle.x += Math.sin(particle.life * 0.08) * 0.3;
+                    particle.y += Math.cos(particle.life * 0.08) * 0.2;
+                }
                 // Special opacity handling for sparkles
                 if (animationType === 'sparkles') {
                     if (particle.life > 70) {
@@ -1384,6 +1417,14 @@ const useReward = (elementId, animationType, config) => {
                     else if (particle.life < 30) {
                         particle.opacity = particle.life / 30;
                     }
+                    // Twinkle effect
+                    if (effects === null || effects === void 0 ? void 0 : effects.twinkle) {
+                        particle.opacity *= 0.5 + Math.sin(particle.life * 0.3) * 0.5;
+                    }
+                }
+                else if (animationType === 'stars' && (effects === null || effects === void 0 ? void 0 : effects.twinkle)) {
+                    // Twinkle effect for stars
+                    particle.opacity = (particle.life / 100) * (0.5 + Math.sin(particle.life * 0.3) * 0.5);
                 }
                 else {
                     particle.opacity = particle.life / 100;