react-native-confetti-reanimated 0.1.0 → 0.1.2

package/src/presets.ts

@@ -5,122 +5,108 @@ import type { ConfettiConfig } from './types';
  */
 
 /**
- * Basic celebration with confetti from the center
+ * Basic Cannon - The default basic blast of confetti
  */
-export const celebration: ConfettiConfig = {
+export const basicCannon: ConfettiConfig = {
   particleCount: 100,
   spread: 70,
   origin: { y: 0.6 },
 };
 
 /**
- * Fireworks effect
+ * Random Direction - Random amount in random directions
+ */
+export const randomDirection: ConfettiConfig = {
+  particleCount: Math.floor(200 + Math.random() * 100),
+  angle: Math.random() * 360,
+  spread: 180 + Math.random() * 180,
+  origin: {
+    x: Math.random(),
+    y: Math.random() - 0.2,
+  },
+  startVelocity: 30 + Math.random() * 20,
+};
+
+/**
+ * Realistic Look - Mix multiple effects to avoid "flattened cone"
+ * Fires 3 bursts with varying parameters for natural look
+ */
+export const realistic: ConfettiConfig = {
+  particleCount: 100, // Per burst (will fire 3x)
+  spread: 70,
+  startVelocity: 45,
+  decay: 0.91,
+  scalar: 1,
+  origin: { y: 0.7 },
+};
+
+/**
+ * Fireworks - From the sides
  */
 export const fireworks: ConfettiConfig = {
-  particleCount: 150,
+  particleCount: 100,
   spread: 360,
   startVelocity: 30,
   decay: 0.94,
   scalar: 1.2,
+  origin: { y: 0.6 },
 };
 
 /**
- * Confetti from the bottom
+ * Stars - Burst of star shapes
  */
-export const bottomCannon: ConfettiConfig = {
+export const stars: ConfettiConfig = {
   particleCount: 50,
-  angle: 60,
-  spread: 55,
-  origin: { y: 0.8, x: 0.5 },
-  startVelocity: 55,
+  spread: 360,
+  startVelocity: 20,
+  decay: 0.95,
+  gravity: 0.5,
+  shapes: ['star'],
+  scalar: 1.5, // Scaled appropriately for star character
+  colors: ['#FFD700', '#FFA500', '#FFFF00'],
 };
 
 /**
- * Confetti from left side
+ * Left Cannon - Confetti from left side
  */
 export const leftCannon: ConfettiConfig = {
   particleCount: 50,
-  angle: 45,
+  angle: 60,
   spread: 55,
   origin: { x: 0, y: 0.6 },
   startVelocity: 55,
 };
 
 /**
- * Confetti from right side
+ * Right Cannon - Confetti from right side
  */
 export const rightCannon: ConfettiConfig = {
   particleCount: 50,
-  angle: 135,
+  angle: 120,
   spread: 55,
   origin: { x: 1, y: 0.6 },
   startVelocity: 55,
 };
 
 /**
- * Realistic looking confetti
+ * Bottom Cannon - Confetti from bottom
  */
-export const realistic: ConfettiConfig = {
-  particleCount: 200,
-  spread: 160,
-  origin: { y: 0.5 },
-  startVelocity: 35,
-  gravity: 1.5,
-  drift: 1,
-  tilt: true,
-  shapes: ['square', 'circle', 'triangle'],
-  scalar: 0.8,
-};
-
-/**
- * Snow effect
- */
-export const snow: ConfettiConfig = {
-  particleCount: 100,
-  spread: 180,
-  origin: { y: -0.1 },
-  startVelocity: 0,
-  gravity: 0.3,
-  drift: 1,
-  colors: ['#ffffff', '#e8f4ff', '#c9e5ff'],
-  shapes: ['circle'],
-  scalar: 0.6,
-  angle: 270,
-};
-
-/**
- * Stars effect
- */
-export const stars: ConfettiConfig = {
+export const bottomCannon: ConfettiConfig = {
   particleCount: 50,
-  spread: 360,
-  startVelocity: 20,
-  decay: 0.95,
-  gravity: 0.5,
-  colors: ['#FFD700', '#FFA500', '#FFFF00'],
-  shapes: ['circle'],
-  scalar: 0.5,
-};
-
-/**
- * School pride (custom colors)
- */
-export const schoolPride: ConfettiConfig = {
-  particleCount: 100,
-  spread: 160,
-  origin: { y: 0.6 },
-  colors: ['#bb0000', '#ffffff'],
+  angle: 90,
+  spread: 45,
+  origin: { y: 1, x: 0.5 },
+  startVelocity: 55,
 };
 
 export const presets = {
-  celebration,
+  basicCannon,
+  randomDirection,
+  realistic,
   fireworks,
-  bottomCannon,
+  stars,
   leftCannon,
   rightCannon,
-  realistic,
-  snow,
-  stars,
-  schoolPride,
+  bottomCannon,
 };
 

package/src/types.ts

@@ -73,7 +73,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
@@ -109,10 +109,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/src/utils.ts

@@ -1,13 +1,30 @@
 import type { ConfettiConfig, ConfettiParticle } from './types';
 
+// Canvas-confetti uses highly contrasting, distinct colors for realistic effect
+// Each color is maximally different from others for clear visibility
 export const DEFAULT_COLORS = [
-  '#26ccff',
-  '#a25afd',
-  '#ff5e7e',
-  '#88ff5a',
-  '#fcff42',
-  '#ffa62d',
-  '#ff36ff',
+  // Primary vibrant colors (maximally distinct)
+  '#26ccff', // Bright Cyan
+  '#a25afd', // Purple
+  '#ff5e7e', // Pink
+  '#88ff5a', // Lime Green
+  '#fcff42', // Yellow
+  '#ffa62d', // Orange
+  '#ff36ff', // Magenta
+  // Secondary distinct colors
+  '#1e90ff', // Dodger Blue
+  '#9400d3', // Dark Violet
+  '#ff1493', // Deep Pink
+  '#32cd32', // Lime
+  '#ffd700', // Gold
+  '#ff6347', // Tomato
+  '#00ffff', // Cyan
+  '#ff00ff', // Fuchsia
+  // Additional contrast colors
+  '#00ff00', // Pure Green
+  '#ff0000', // Pure Red
+  '#0000ff', // Pure Blue
+  '#ffff00', // Pure Yellow
 ];
 
 export const DEFAULT_CONFIG: Required<ConfettiConfig> = {
@@ -22,7 +39,7 @@ export const DEFAULT_CONFIG: Required<ConfettiConfig> = {
   colors: DEFAULT_COLORS,
   scalar: 1,
   origin: { x: 0.5, y: 0.5 },
-  shapes: ['square', 'circle'],
+  shapes: ['square'], // Rectangular strips are most realistic
   tilt: true,
   tiltAngleIncrement: 10,
   tickDuration: 200,
@@ -61,29 +78,38 @@ export const randomFromArray = <T>(arr: T[]): T => {
 export const createConfettiParticles = (
   config: Required<ConfettiConfig>,
   screenWidth: number,
-  screenHeight: number
+  screenHeight: number,
 ): ConfettiParticle[] => {
   const particles: ConfettiParticle[] = [];
   const angleInRadians = degreesToRadians(config.angle);
   const spreadInRadians = degreesToRadians(config.spread);
 
+  const timestamp = Date.now();
   for (let i = 0; i < config.particleCount; i++) {
-    const angle = angleInRadians + randomRange(-spreadInRadians / 2, spreadInRadians / 2);
-    const velocity = config.startVelocity * (0.5 + Math.random() * 0.5);
-    
+    // Add spread variation to the angle
+    const spreadVariation = randomRange(-spreadInRadians / 2, spreadInRadians / 2);
+    const particleAngle = angleInRadians + spreadVariation;
+    // Randomize velocity within range
+    const velocityMagnitude = config.startVelocity * (0.5 + Math.random() * 0.5);
+    // Create confetti particles - broader and shorter like canvas-confetti
+    const baseWidth = (6 + Math.random() * 4) * config.scalar; // 6-10px wide (BROADER)
+    const aspectRatio = 0.5 + Math.random() * 0.3; // 0.5-0.8 ratio (SHORTER than wide)
     const particle: ConfettiParticle = {
-      id: `confetti-${i}-${Date.now()}`,
+      id: `confetti-${timestamp}-${i}-${Math.random()}`,
       color: randomFromArray(config.colors),
       shape: randomFromArray(config.shapes),
       x: (config.origin.x ?? 0.5) * screenWidth,
       y: (config.origin.y ?? 0.5) * screenHeight,
-      size: (5 + Math.random() * 5) * config.scalar,
+      width: baseWidth,
+      height: baseWidth * aspectRatio, // Height is SMALLER than width
       velocity: {
-        x: Math.cos(angle) * velocity,
-        y: Math.sin(angle) * velocity,
+        // Canvas-confetti uses pixels per frame (60fps)
+        // Use velocity as-is for proper scaling to device
+        x: Math.cos(particleAngle) * velocityMagnitude,
+        y: -Math.sin(particleAngle) * velocityMagnitude, // Negative = upward initially
       },
       rotation: Math.random() * 360,
-      rotationVelocity: randomRange(-10, 10),
+      rotationVelocity: randomRange(-50, 50), // Very wide range for dramatic spinning
       tiltAngle: config.tilt ? Math.random() * config.tiltAngleIncrement : 0,
       opacity: 1,
     };
@@ -100,13 +126,12 @@ export const createConfettiParticles = (
 export const updateParticle = (
   particle: ConfettiParticle,
   config: Required<ConfettiConfig>,
-  deltaTime: number
+  deltaTime: number,
 ): ConfettiParticle => {
   const dt = deltaTime / 16; // Normalize to 60fps
 
   // Apply gravity
   const newVelocityY = particle.velocity.y - config.gravity * dt;
-  
   // Apply drift
   const newVelocityX = particle.velocity.x + config.drift * dt;
 
@@ -132,4 +157,3 @@ export const updateParticle = (
     opacity: newOpacity,
   };
 };
-

package/lib/module/package.json

@@ -1 +0,0 @@
-{"type":"module"}