react-native-confetti-reanimated 0.1.0 → 0.1.2

package/lib/typescript/presets.d.ts

@@ -3,50 +3,46 @@ import type { ConfettiConfig } from './types';
  * Predefined confetti presets for common use cases
  */
 /**
- * Basic celebration with confetti from the center
+ * Basic Cannon - The default basic blast of confetti
  */
-export declare const celebration: ConfettiConfig;
+export declare const basicCannon: ConfettiConfig;
 /**
- * Fireworks effect
+ * Random Direction - Random amount in random directions
  */
-export declare const fireworks: ConfettiConfig;
+export declare const randomDirection: ConfettiConfig;
 /**
- * Confetti from the bottom
+ * Realistic Look - Mix multiple effects to avoid "flattened cone"
+ * Fires 3 bursts with varying parameters for natural look
  */
-export declare const bottomCannon: ConfettiConfig;
-/**
- * Confetti from left side
- */
-export declare const leftCannon: ConfettiConfig;
+export declare const realistic: ConfettiConfig;
 /**
- * Confetti from right side
+ * Fireworks - From the sides
  */
-export declare const rightCannon: ConfettiConfig;
+export declare const fireworks: ConfettiConfig;
 /**
- * Realistic looking confetti
+ * Stars - Burst of star shapes
  */
-export declare const realistic: ConfettiConfig;
+export declare const stars: ConfettiConfig;
 /**
- * Snow effect
+ * Left Cannon - Confetti from left side
  */
-export declare const snow: ConfettiConfig;
+export declare const leftCannon: ConfettiConfig;
 /**
- * Stars effect
+ * Right Cannon - Confetti from right side
  */
-export declare const stars: ConfettiConfig;
+export declare const rightCannon: ConfettiConfig;
 /**
- * School pride (custom colors)
+ * Bottom Cannon - Confetti from bottom
  */
-export declare const schoolPride: ConfettiConfig;
+export declare const bottomCannon: ConfettiConfig;
 export declare const presets: {
-    celebration: ConfettiConfig;
+    basicCannon: ConfettiConfig;
+    randomDirection: ConfettiConfig;
+    realistic: ConfettiConfig;
     fireworks: ConfettiConfig;
-    bottomCannon: ConfettiConfig;
+    stars: ConfettiConfig;
     leftCannon: ConfettiConfig;
     rightCannon: ConfettiConfig;
-    realistic: ConfettiConfig;
-    snow: ConfettiConfig;
-    stars: ConfettiConfig;
-    schoolPride: ConfettiConfig;
+    bottomCannon: ConfettiConfig;
 };
 //# sourceMappingURL=presets.d.ts.map

package/lib/typescript/presets.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"presets.d.ts","sourceRoot":"","sources":["../../src/presets.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAE9C;;GAEG;AAEH;;GAEG;AACH,eAAO,MAAM,WAAW,EAAE,cAIzB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,SAAS,EAAE,cAMvB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,YAAY,EAAE,cAM1B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,UAAU,EAAE,cAMxB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,WAAW,EAAE,cAMzB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,SAAS,EAAE,cAUvB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,IAAI,EAAE,cAWlB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,KAAK,EAAE,cASnB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,WAAW,EAAE,cAKzB,CAAC;AAEF,eAAO,MAAM,OAAO;;;;;;;;;;CAUnB,CAAC"}
+{"version":3,"file":"presets.d.ts","sourceRoot":"","sources":["../../src/presets.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAE9C;;GAEG;AAEH;;GAEG;AACH,eAAO,MAAM,WAAW,EAAE,cAIzB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,eAAe,EAAE,cAS7B,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,SAAS,EAAE,cAOvB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,SAAS,EAAE,cAOvB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,KAAK,EAAE,cASnB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,UAAU,EAAE,cAMxB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,WAAW,EAAE,cAMzB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,YAAY,EAAE,cAM1B,CAAC;AAEF,eAAO,MAAM,OAAO;;;;;;;;;CASnB,CAAC"}

package/lib/typescript/types.d.ts

@@ -62,7 +62,7 @@ export interface ConfettiConfig {
      * Shapes for confetti
      * @default ['square', 'circle']
      */
-    shapes?: Array<'square' | 'circle' | 'triangle'>;
+    shapes?: Array<'square' | 'circle' | 'star'>;
     /**
      * Whether the confetti should be affected by tilt
      * @default true
@@ -92,10 +92,11 @@ export interface ConfettiConfig {
 export interface ConfettiParticle {
     id: string;
     color: string;
-    shape: 'square' | 'circle' | 'triangle';
+    shape: 'square' | 'circle' | 'star';
     x: number;
     y: number;
-    size: number;
+    width: number;
+    height: number;
     velocity: {
         x: number;
         y: number;

package/lib/typescript/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,cAAc;IAC7B;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAElB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;;;OAIG;IACH,MAAM,CAAC,EAAE;QACP,CAAC,CAAC,EAAE,MAAM,CAAC;QACX,CAAC,CAAC,EAAE,MAAM,CAAC;KACZ,CAAC;IAEF;;;OAGG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,QAAQ,GAAG,QAAQ,GAAG,UAAU,CAAC,CAAC;IAEjD;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IAEf;;;OAGG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAE5B;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;;OAGG;IACH,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAElC;;;OAGG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,MAAM,WAAW,gBAAgB;IAC/B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,QAAQ,GAAG,QAAQ,GAAG,UAAU,CAAC;IACxC,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE;QACR,CAAC,EAAE,MAAM,CAAC;QACV,CAAC,EAAE,MAAM,CAAC;KACX,CAAC;IACF,QAAQ,EAAE,MAAM,CAAC;IACjB,gBAAgB,EAAE,MAAM,CAAC;IACzB,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,eAAe;IAC9B;;OAEG;IACH,CAAC,MAAM,CAAC,EAAE,cAAc,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAEzC;;OAEG;IACH,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,cAAc;IAC7B;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAElB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;;;OAIG;IACH,MAAM,CAAC,EAAE;QACP,CAAC,CAAC,EAAE,MAAM,CAAC;QACX,CAAC,CAAC,EAAE,MAAM,CAAC;KACZ,CAAC;IAEF;;;OAGG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,QAAQ,GAAG,QAAQ,GAAG,MAAM,CAAC,CAAC;IAE7C;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IAEf;;;OAGG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAE5B;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;;OAGG;IACH,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAElC;;;OAGG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,MAAM,WAAW,gBAAgB;IAC/B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,QAAQ,GAAG,QAAQ,GAAG,MAAM,CAAC;IACpC,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE;QACR,CAAC,EAAE,MAAM,CAAC;QACV,CAAC,EAAE,MAAM,CAAC;KACX,CAAC;IACF,QAAQ,EAAE,MAAM,CAAC;IACjB,gBAAgB,EAAE,MAAM,CAAC;IACzB,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,eAAe;IAC9B;;OAEG;IACH,CAAC,MAAM,CAAC,EAAE,cAAc,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAEzC;;OAEG;IACH,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB"}

package/lib/typescript/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAEhE,eAAO,MAAM,cAAc,UAQ1B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,QAAQ,CAAC,cAAc,CAkBnD,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,gBAAgB,GAAI,SAAS,MAAM,KAAG,MAElD,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,WAAW,GAAI,KAAK,MAAM,EAAE,KAAK,MAAM,KAAG,MAEtD,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,eAAe,GAAI,CAAC,EAAE,KAAK,CAAC,EAAE,KAAG,CAM7C,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,uBAAuB,GAClC,QAAQ,QAAQ,CAAC,cAAc,CAAC,EAChC,aAAa,MAAM,EACnB,cAAc,MAAM,KACnB,gBAAgB,EA8BlB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,cAAc,GACzB,UAAU,gBAAgB,EAC1B,QAAQ,QAAQ,CAAC,cAAc,CAAC,EAChC,WAAW,MAAM,KAChB,gBA8BF,CAAC"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAIhE,eAAO,MAAM,cAAc,UAuB1B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,QAAQ,CAAC,cAAc,CAkBnD,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,gBAAgB,GAAI,SAAS,MAAM,KAAG,MAElD,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,WAAW,GAAI,KAAK,MAAM,EAAE,KAAK,MAAM,KAAG,MAEtD,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,eAAe,GAAI,CAAC,EAAE,KAAK,CAAC,EAAE,KAAG,CAM7C,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,uBAAuB,GAClC,QAAQ,QAAQ,CAAC,cAAc,CAAC,EAChC,aAAa,MAAM,EACnB,cAAc,MAAM,KACnB,gBAAgB,EAuClB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,cAAc,GACzB,UAAU,gBAAgB,EAC1B,QAAQ,QAAQ,CAAC,cAAc,CAAC,EAChC,WAAW,MAAM,KAChB,gBA6BF,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-confetti-reanimated",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "A high-performance confetti component for React Native using Reanimated 4, compatible with Expo",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
@@ -42,23 +42,19 @@
   },
   "homepage": "https://github.com/andydev271/react-native-confetti-reanimated#readme",
   "peerDependencies": {
-    "react": "*",
-    "react-native": "*",
-    "react-native-reanimated": ">=4.0.0",
-    "react-native-worklets": ">=0.5.0"
+    "react": ">=18.0.0",
+    "react-native": ">=0.74.0",
+    "react-native-reanimated": ">=4.0.0"
   },
   "devDependencies": {
     "@react-native-community/eslint-config": "^3.2.0",
-    "@types/react": "~18.2.0",
-    "@types/react-native": "^0.72.0",
-    "eslint": "^8.51.0",
-    "prettier": "^3.0.3",
-    "react": "18.2.0",
-    "react-native": "0.74.0",
-    "react-native-builder-bob": "^0.30.0",
+    "@types/react": "~19.1.0",
+    "prettier": "^3.4.2",
+    "react": "19.1.0",
+    "react-native": "0.81.5",
+    "react-native-builder-bob": "^0.40.0",
     "react-native-reanimated": "^4.0.0",
-    "react-native-worklets": "^0.5.0",
-    "typescript": "^5.3.0"
+    "typescript": "^5.7.0"
   },
   "react-native-builder-bob": {
     "source": "src",

package/src/ConfettiCanvas.tsx

@@ -10,7 +10,7 @@ export interface ConfettiCanvasProps {
    * Style for the confetti container
    */
   containerStyle?: any;
-  
+
   /**
    * Z-index for the confetti container
    * @default 1000
@@ -24,10 +24,13 @@ export interface ConfettiCanvasProps {
   fullScreen?: boolean;
 }
 
+interface ParticleWithConfig extends ConfettiParticleType {
+  config: Required<ConfettiConfig>;
+}
+
 export const ConfettiCanvas = React.forwardRef<ConfettiMethods, ConfettiCanvasProps>(
   ({ containerStyle, zIndex = 1000, fullScreen = true }, ref) => {
-    const [particles, setParticles] = useState<ConfettiParticleType[]>([]);
-    const [activeCount, setActiveCount] = useState(0);
+    const [particles, setParticles] = useState<ParticleWithConfig[]>([]);
     const { width, height } = useWindowDimensions();
 
     const fire = useCallback(
@@ -43,21 +46,23 @@ export const ConfettiCanvas = React.forwardRef<ConfettiMethods, ConfettiCanvasPr
           };
 
           const newParticles = createConfettiParticles(mergedConfig, width, height);
-          setParticles(prev => [...prev, ...newParticles]);
-          setActiveCount(prev => prev + newParticles.length);
+          const particlesWithConfig = newParticles.map(p => ({
+            ...p,
+            config: mergedConfig,
+          }));
+          setParticles(prev => [...prev, ...particlesWithConfig]);
 
           // Resolve after the duration
           setTimeout(() => {
-            resolve(null);
-          }, mergedConfig.duration);
+          resolve(null);
+        }, mergedConfig.duration);
         });
       },
-      [width, height]
+      [width, height],
     );
 
     const reset = useCallback(() => {
       setParticles([]);
-      setActiveCount(0);
     }, []);
 
     useImperativeHandle(
@@ -67,17 +72,16 @@ export const ConfettiCanvas = React.forwardRef<ConfettiMethods, ConfettiCanvasPr
         confetti.reset = reset;
         return confetti;
       },
-      [fire, reset]
+      [fire, reset],
     );
 
     const handleParticleComplete = useCallback((particleId: string) => {
-      setActiveCount(prev => prev - 1);
       setParticles(prev => {
         // Clean up completed particles periodically
         if (prev.length > 100) {
           return prev.filter(p => p.id !== particleId).slice(-50);
         }
-        return prev;
+        return prev.filter(p => p.id !== particleId);
       });
     }, []);
 
@@ -94,13 +98,14 @@ export const ConfettiCanvas = React.forwardRef<ConfettiMethods, ConfettiCanvasPr
           <ConfettiParticle
             key={particle.id}
             particle={particle}
-            duration={DEFAULT_CONFIG.duration}
+            config={particle.config}
+            duration={particle.config.duration}
             onComplete={() => handleParticleComplete(particle.id)}
           />
         ))}
       </View>
     );
-  }
+  },
 );
 
 ConfettiCanvas.displayName = 'ConfettiCanvas';

package/src/ConfettiParticle.tsx

@@ -3,103 +3,193 @@ import { StyleSheet } from 'react-native';
 import Animated, {
   useAnimatedStyle,
   useSharedValue,
-  withTiming,
-  Easing,
-  runOnJS,
+  useFrameCallback,
+  cancelAnimation,
 } from 'react-native-reanimated';
-import type { ConfettiParticle as ConfettiParticleType } from './types';
+import type { ConfettiParticle as ConfettiParticleType, ConfettiConfig } from './types';
 
 interface Props {
   particle: ConfettiParticleType;
+  config: Required<ConfettiConfig>;
   duration: number;
   onComplete?: () => void;
 }
 
-export const ConfettiParticle: React.FC<Props> = ({ particle, duration, onComplete }) => {
+export const ConfettiParticle: React.FC<Props> = ({ particle, config, duration, onComplete }) => {
   const translateX = useSharedValue(0);
   const translateY = useSharedValue(0);
   const rotation = useSharedValue(particle.rotation);
   const opacity = useSharedValue(1);
 
+  // Velocity state
+  const velX = useSharedValue(particle.velocity.x);
+  const velY = useSharedValue(particle.velocity.y);
+  const startTime = useSharedValue(Date.now());
+  const isComplete = useSharedValue(false);
+
+  // Canvas-confetti realistic wobble and tilt variables
+  const wobble = useSharedValue(Math.random() * 10);
+  const wobbleSpeed = useSharedValue(Math.min(0.11, Math.random() * 0.1 + 0.05));
+  const tiltAngle = useSharedValue(particle.tiltAngle);
+  const tiltSin = useSharedValue(0);
+  const tiltCos = useSharedValue(0);
+  const random = useSharedValue(Math.random() + 2);
+  const tick = useSharedValue(0);
+  const totalTicks = useSharedValue((duration / 1000) * 60); // 60fps
+
   useEffect(() => {
-    // Animate the particle
-    translateX.value = withTiming(particle.velocity.x * (duration / 16), {
-      duration,
-      easing: Easing.linear,
-    });
-
-    translateY.value = withTiming(particle.velocity.y * (duration / 16), {
-      duration,
-      easing: Easing.bezier(0.33, 1, 0.68, 1), // Custom easing for gravity effect
-    });
-
-    rotation.value = withTiming(
-      particle.rotation + particle.rotationVelocity * (duration / 16),
-      {
-        duration,
-        easing: Easing.linear,
-      }
-    );
+    startTime.value = Date.now();
+    tick.value = 0;
 
-    opacity.value = withTiming(
-      0,
-      {
-        duration,
-        easing: Easing.linear,
-      },
-      finished => {
-        if (finished && onComplete) {
-          runOnJS(onComplete)();
-        }
+    // Cleanup callback
+    const timer = setTimeout(() => {
+      isComplete.value = true;
+      if (onComplete) {
+        onComplete();
       }
-    );
-  }, [duration, onComplete, opacity, particle, rotation, translateX, translateY]);
+    }, duration);
+
+    return () => {
+      clearTimeout(timer);
+      cancelAnimation(translateX);
+      cancelAnimation(translateY);
+      cancelAnimation(rotation);
+      cancelAnimation(opacity);
+    };
+  }, [duration, onComplete, opacity, isComplete, startTime, translateX, translateY, rotation, tick]);
+
+  // Real-time physics simulation using frame callback
+  useFrameCallback(() => {
+    'worklet';
+
+    if (isComplete.value) {
+      return;
+    }
+
+    const elapsed = Date.now() - startTime.value;
+    if (elapsed >= duration) {
+      isComplete.value = true;
+      return;
+    }
+
+    // Update position based on current velocity
+    translateX.value += velX.value;
+    translateY.value += velY.value;
+
+    // Apply gravity (increases downward velocity) - realistic physics!
+    velY.value += config.gravity;
+
+    // Apply drift (horizontal wind)
+    velX.value += config.drift;
+
+    // Apply decay (air resistance)
+    velX.value *= config.decay;
+    velY.value *= config.decay;
+
+    // Update rotation - ALL particles spin faster when moving fast, slower when slowing down
+    const speed = Math.sqrt(velX.value * velX.value + velY.value * velY.value);
+    const speedBoost = 1 + speed / 20;
+    rotation.value += particle.rotationVelocity * speedBoost;
+
+    // Canvas-confetti wobble effect (creates side-to-side flutter)
+    wobble.value += wobbleSpeed.value;
+
+    // Canvas-confetti tilt animation (creates 3D tumbling effect)
+    tiltAngle.value += 0.1;
+    tiltSin.value = Math.sin(tiltAngle.value);
+    tiltCos.value = Math.cos(tiltAngle.value);
+    random.value = Math.random() + 2;
+
+    // Update tick for progressive opacity fade
+    tick.value += 1;
+
+    // Canvas-confetti progressive fade: opacity decreases linearly over lifetime
+    const progress = tick.value / totalTicks.value;
+    opacity.value = 1 - progress;
+  });
 
   const animatedStyle = useAnimatedStyle(() => {
+    // Canvas-confetti wobble calculation (circular motion)
+    const wobbleX = 10 * config.scalar * Math.cos(wobble.value);
+    const wobbleY = 10 * config.scalar * Math.sin(wobble.value);
+
+    // Canvas-confetti 3D-like positioning with tilt
+    const x1 = translateX.value + random.value * tiltCos.value;
+    const y1 = translateY.value + random.value * tiltSin.value;
+    const x2 = translateX.value + wobbleX + random.value * tiltCos.value;
+    const y2 = translateY.value + wobbleY + random.value * tiltSin.value;
+
+    // Dynamic scaling based on wobble (creates 3D depth perception)
+    const scaleX = Math.abs(x2 - x1) * 0.1;
+    const scaleY = Math.abs(y2 - y1) * 0.1;
+
     return {
       transform: [
-        { translateX: translateX.value },
-        { translateY: translateY.value },
+        { translateX: x2 },
+        { translateY: y2 },
         { rotate: `${rotation.value}deg` },
+        { scaleX: Math.max(0.3, scaleX) }, // Prevent too small
+        { scaleY: Math.max(0.3, scaleY) },
       ],
       opacity: opacity.value,
     };
   });
 
   const renderShape = () => {
-    const baseStyle = [
-      styles.particle,
-      {
-        width: particle.size,
-        height: particle.size,
-        backgroundColor: particle.color,
-      },
-    ];
-
     if (particle.shape === 'circle') {
+      // Circles for snow - perfectly round
+      const size = particle.width;
       return (
-        <Animated.View style={[...baseStyle, styles.circle, animatedStyle]} />
+        <Animated.View
+          style={[
+            styles.particle,
+            styles.circle,
+            {
+              width: size,
+              height: size,
+              backgroundColor: particle.color,
+            },
+            animatedStyle,
+          ]}
+        />
       );
-    } else if (particle.shape === 'triangle') {
+    }
+
+    if (particle.shape === 'star') {
+      // Stars using Unicode character
+      const fontSize = particle.width * 1.5;
       return (
-        <Animated.View style={[...baseStyle, styles.transparent, animatedStyle]}>
-          <Animated.View
-            style={[
-              styles.triangle,
-              {
-                borderLeftWidth: particle.size / 2,
-                borderRightWidth: particle.size / 2,
-                borderBottomWidth: particle.size,
-                borderBottomColor: particle.color,
-              },
-            ]}
-          />
-        </Animated.View>
+        <Animated.Text
+          style={[
+            styles.particle,
+            {
+              fontSize,
+              color: particle.color,
+              textShadowColor: particle.color,
+              textShadowOffset: { width: 0, height: 0 },
+              textShadowRadius: 3,
+            },
+            animatedStyle,
+          ]}>
+          ★
+        </Animated.Text>
       );
     }
 
-    // Square (default)
-    return <Animated.View style={[...baseStyle, animatedStyle]} />;
+    // Rectangles - sharp, thin confetti strips
+    return (
+      <Animated.View
+        style={[
+          styles.particle,
+          {
+            width: particle.width,
+            height: particle.height,
+            backgroundColor: particle.color,
+          },
+          animatedStyle,
+        ]}
+      />
+    );
   };
 
   return (
@@ -126,16 +216,4 @@ const styles = StyleSheet.create({
   circle: {
     borderRadius: 999,
   },
-  transparent: {
-    backgroundColor: 'transparent',
-  },
-  triangle: {
-    width: 0,
-    height: 0,
-    backgroundColor: 'transparent',
-    borderStyle: 'solid',
-    borderLeftColor: 'transparent',
-    borderRightColor: 'transparent',
-  },
 });
-