festive-effects 1.0.0

package/dist/index.esm.js

@@ -0,0 +1,2009 @@
+import { jsx, Fragment } from 'react/jsx-runtime';
+import React, { useState, useEffect, useRef, useCallback } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+
+// Core types for Festive Effects library
+/**
+ * Array of all valid festival types for validation
+ */
+const FESTIVAL_TYPES = [
+    'christmas',
+    'newyear',
+    'valentine',
+    'easter',
+    'halloween',
+    'thanksgiving',
+    'diwali',
+    'chinesenewyear',
+    'holi',
+    'eid',
+    'stpatricks',
+    'independence',
+];
+
+// Configuration for Festive Effects library
+/**
+ * Intensity configuration for particle effects
+ * Defines particle multipliers and max counts for each intensity level
+ */
+const INTENSITY_CONFIG = {
+    low: { particleMultiplier: 0.5, maxParticles: 30 },
+    medium: { particleMultiplier: 1.0, maxParticles: 60 },
+    high: { particleMultiplier: 2.0, maxParticles: 120 },
+};
+/**
+ * Calculate the actual particle count based on base count and intensity
+ * @param baseCount - The base particle count from festival config
+ * @param intensity - The intensity level
+ * @returns The calculated particle count, capped at maxParticles
+ */
+function getParticleCount(baseCount, intensity = 'medium') {
+    const settings = INTENSITY_CONFIG[intensity];
+    const calculated = Math.floor(baseCount * settings.particleMultiplier);
+    return Math.min(calculated, settings.maxParticles);
+}
+/**
+ * Festival configurations for all 12 supported festivals
+ * Each config defines colors, particle types, animation style, and physics
+ */
+const FESTIVAL_CONFIGS = {
+    christmas: {
+        baseParticleCount: 50,
+        colors: ['#FFFFFF', '#E8F4FF', '#B8D4E8', '#87CEEB'],
+        particleTypes: ['snowflake'],
+        animationType: 'fall',
+        physics: { speed: 3, drift: 50, rotation: 360, scale: [0.5, 1.5] },
+    },
+    newyear: {
+        baseParticleCount: 40,
+        colors: ['#FFD700', '#FF6B6B', '#4ECDC4', '#45B7D1', '#96CEB4', '#FFEAA7'],
+        particleTypes: ['firework', 'confetti', 'spark'],
+        animationType: 'explode',
+        physics: { speed: 5, drift: 100, rotation: 720, scale: [0.3, 1.2] },
+    },
+    valentine: {
+        baseParticleCount: 35,
+        colors: ['#FF6B6B', '#EE5A5A', '#FF8E8E', '#FFB6C1', '#FF69B4'],
+        particleTypes: ['heart'],
+        animationType: 'rise',
+        physics: { speed: 2, drift: 30, rotation: 15, scale: [0.6, 1.4] },
+    },
+    easter: {
+        baseParticleCount: 30,
+        colors: ['#FFB6C1', '#98FB98', '#87CEEB', '#DDA0DD', '#F0E68C'],
+        particleTypes: ['egg', 'flower'],
+        animationType: 'float',
+        physics: { speed: 1.5, drift: 20, rotation: 10, scale: [0.7, 1.3] },
+    },
+    halloween: {
+        baseParticleCount: 35,
+        colors: ['#FF6600', '#8B008B', '#000000', '#FFD700', '#32CD32'],
+        particleTypes: ['bat', 'pumpkin', 'spider'],
+        animationType: 'float',
+        physics: { speed: 2, drift: 60, rotation: 30, scale: [0.5, 1.5] },
+    },
+    thanksgiving: {
+        baseParticleCount: 40,
+        colors: ['#D2691E', '#FF8C00', '#B8860B', '#CD853F', '#8B4513'],
+        particleTypes: ['leaf'],
+        animationType: 'fall',
+        physics: { speed: 2, drift: 80, rotation: 540, scale: [0.6, 1.4] },
+    },
+    diwali: {
+        baseParticleCount: 45,
+        colors: ['#FFD700', '#FF8C00', '#FF4500', '#FFA500', '#FFFF00'],
+        particleTypes: ['diya', 'spark', 'rangoli'],
+        animationType: 'float',
+        physics: { speed: 1, drift: 15, rotation: 5, scale: [0.5, 1.2] },
+    },
+    chinesenewyear: {
+        baseParticleCount: 40,
+        colors: ['#FF0000', '#FFD700', '#FF4500', '#DC143C'],
+        particleTypes: ['lantern', 'firework', 'dragon'],
+        animationType: 'rise',
+        physics: { speed: 1.5, drift: 25, rotation: 10, scale: [0.6, 1.3] },
+    },
+    holi: {
+        baseParticleCount: 50,
+        colors: ['#FF1493', '#00FF00', '#FFFF00', '#FF4500', '#9400D3', '#00BFFF'],
+        particleTypes: ['color-splash'],
+        animationType: 'scatter',
+        physics: { speed: 4, drift: 150, rotation: 180, scale: [0.4, 2.0] },
+    },
+    eid: {
+        baseParticleCount: 35,
+        colors: ['#FFD700', '#C0C0C0', '#228B22', '#FFFFFF'],
+        particleTypes: ['moon', 'star'],
+        animationType: 'float',
+        physics: { speed: 0.8, drift: 10, rotation: 5, scale: [0.5, 1.5] },
+    },
+    stpatricks: {
+        baseParticleCount: 40,
+        colors: ['#228B22', '#32CD32', '#00FF00', '#FFD700'],
+        particleTypes: ['shamrock', 'rainbow'],
+        animationType: 'fall',
+        physics: { speed: 2, drift: 40, rotation: 180, scale: [0.6, 1.3] },
+    },
+    independence: {
+        baseParticleCount: 45,
+        colors: ['#FF0000', '#FFFFFF', '#0000FF'], // Default US colors, customizable
+        particleTypes: ['firework', 'spark', 'confetti'],
+        animationType: 'explode',
+        physics: { speed: 5, drift: 120, rotation: 360, scale: [0.3, 1.5] },
+    },
+};
+
+// Custom hooks for Festive Effects
+// Contains accessibility and utility hooks
+/**
+ * Hook to detect if the user prefers reduced motion
+ * Listens to the prefers-reduced-motion media query
+ *
+ * @returns boolean - true if user prefers reduced motion, false otherwise
+ *
+ * @example
+ * ```tsx
+ * const prefersReducedMotion = useReducedMotion();
+ * if (prefersReducedMotion) {
+ *   // Don't render animations
+ *   return null;
+ * }
+ * ```
+ */
+function useReducedMotion() {
+    // Default to false for SSR
+    const [prefersReducedMotion, setPrefersReducedMotion] = useState(false);
+    useEffect(() => {
+        // Check if window is available (client-side)
+        if (typeof window === 'undefined') {
+            return;
+        }
+        // Create media query for prefers-reduced-motion
+        const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
+        // Set initial value
+        setPrefersReducedMotion(mediaQuery.matches);
+        // Handler for media query changes
+        const handleChange = (event) => {
+            setPrefersReducedMotion(event.matches);
+        };
+        // Add listener for changes
+        // Use addEventListener for modern browsers, addListener for older ones
+        if (mediaQuery.addEventListener) {
+            mediaQuery.addEventListener('change', handleChange);
+        }
+        else {
+            // Fallback for older browsers
+            mediaQuery.addListener(handleChange);
+        }
+        // Cleanup listener on unmount
+        return () => {
+            if (mediaQuery.removeEventListener) {
+                mediaQuery.removeEventListener('change', handleChange);
+            }
+            else {
+                // Fallback for older browsers
+                mediaQuery.removeListener(handleChange);
+            }
+        };
+    }, []);
+    return prefersReducedMotion;
+}
+/**
+ * Hook to detect document visibility changes
+ * Returns true when the document is visible, false when hidden
+ *
+ * This is useful for pausing animations when the user switches tabs
+ * to save resources and improve performance.
+ *
+ * @returns boolean - true if document is visible, false if hidden
+ *
+ * @example
+ * ```tsx
+ * const isVisible = useDocumentVisibility();
+ * if (!isVisible) {
+ *   // Pause animations
+ * }
+ * ```
+ */
+function useDocumentVisibility() {
+    // Default to true for SSR (assume visible)
+    const [isVisible, setIsVisible] = useState(true);
+    useEffect(() => {
+        // Check if document is available (client-side)
+        if (typeof document === 'undefined') {
+            return;
+        }
+        // Set initial value based on current visibility state
+        setIsVisible(!document.hidden);
+        // Handler for visibility changes
+        const handleVisibilityChange = () => {
+            setIsVisible(!document.hidden);
+        };
+        // Add listener for visibility changes
+        document.addEventListener('visibilitychange', handleVisibilityChange);
+        // Cleanup listener on unmount
+        return () => {
+            document.removeEventListener('visibilitychange', handleVisibilityChange);
+        };
+    }, []);
+    return isVisible;
+}
+
+// SVG Particle System for Festive Effects
+// Contains all particle SVG shapes and the Particle component
+/**
+ * SVG definitions for all 18 particle types
+ * Each SVG is designed to work with currentColor for dynamic coloring
+ */
+const PARTICLE_SVGS = {
+    snowflake: `<svg viewBox="0 0 24 24"><path d="M12 0L12 24M0 12L24 12M4 4L20 20M20 4L4 20" stroke="currentColor" stroke-width="1.5" fill="none"/></svg>`,
+    heart: `<svg viewBox="0 0 24 24"><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" fill="currentColor"/></svg>`,
+    bat: `<svg viewBox="0 0 24 24"><path d="M12 4C8 4 4 8 2 12c2-2 4-2 6 0-1 2-1 4 0 6 1-2 3-3 4-3s3 1 4 3c1-2 1-4 0-6 2-2 4-2 6 0-2-4-6-8-10-8z" fill="currentColor"/></svg>`,
+    pumpkin: `<svg viewBox="0 0 24 24"><ellipse cx="12" cy="14" rx="8" ry="7" fill="currentColor"/><path d="M12 7V4M10 4h4" stroke="currentColor" stroke-width="2" fill="none"/></svg>`,
+    leaf: `<svg viewBox="0 0 24 24"><path d="M12 2C6 8 4 14 4 18c0 2 2 4 8 4s8-2 8-4c0-4-2-10-8-16z" fill="currentColor"/><path d="M12 22V8" stroke="rgba(0,0,0,0.3)" stroke-width="1" fill="none"/></svg>`,
+    diya: `<svg viewBox="0 0 24 24"><ellipse cx="12" cy="18" rx="8" ry="4" fill="currentColor"/><path d="M12 14c-2 0-3-2-3-4s1-4 3-4 3 2 3 4-1 4-3 4z" fill="#FFD700"/></svg>`,
+    lantern: `<svg viewBox="0 0 24 24"><rect x="6" y="6" width="12" height="14" rx="2" fill="currentColor"/><path d="M8 4h8M12 4V2" stroke="currentColor" stroke-width="2" fill="none"/></svg>`,
+    moon: `<svg viewBox="0 0 24 24"><path d="M12 3a9 9 0 109 9c0-5-4-9-9-9z" fill="currentColor"/></svg>`,
+    star: `<svg viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5.5 4.5 2 7L12 16l-6.5 4.5 2-7L2 9h7z" fill="currentColor"/></svg>`,
+    shamrock: `<svg viewBox="0 0 24 24"><circle cx="12" cy="8" r="4" fill="currentColor"/><circle cx="7" cy="14" r="4" fill="currentColor"/><circle cx="17" cy="14" r="4" fill="currentColor"/><path d="M12 16v6" stroke="currentColor" stroke-width="2" fill="none"/></svg>`,
+    egg: `<svg viewBox="0 0 24 24"><ellipse cx="12" cy="14" rx="7" ry="9" fill="currentColor"/></svg>`,
+    flower: `<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="3" fill="#FFD700"/><circle cx="12" cy="6" r="3" fill="currentColor"/><circle cx="18" cy="12" r="3" fill="currentColor"/><circle cx="12" cy="18" r="3" fill="currentColor"/><circle cx="6" cy="12" r="3" fill="currentColor"/></svg>`,
+    confetti: `<svg viewBox="0 0 24 24"><rect x="8" y="4" width="8" height="16" rx="1" fill="currentColor"/></svg>`,
+    spark: `<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="4" fill="currentColor"/></svg>`,
+    firework: `<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="2" fill="currentColor"/><path d="M12 2v4M12 18v4M2 12h4M18 12h4M4 4l3 3M17 17l3 3M4 20l3-3M17 7l3-3" stroke="currentColor" stroke-width="2" fill="none"/></svg>`,
+    'color-splash': `<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="currentColor" opacity="0.8"/></svg>`,
+    spider: `<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="4" fill="currentColor"/><path d="M8 8L4 4M16 8L20 4M8 16L4 20M16 16L20 20M6 12H2M18 12h4" stroke="currentColor" stroke-width="1.5" fill="none"/></svg>`,
+    rainbow: `<svg viewBox="0 0 24 24"><path d="M2 20a10 10 0 0120 0" stroke="currentColor" stroke-width="4" fill="none"/></svg>`,
+    dragon: `<svg viewBox="0 0 24 24"><path d="M4 12c2-4 6-6 10-4 2 1 4 4 6 4-1 2-3 4-6 4-4 0-8-2-10-4z" fill="currentColor"/></svg>`,
+    rangoli: `<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="8" stroke="currentColor" stroke-width="2" fill="none"/><circle cx="12" cy="12" r="4" fill="currentColor"/></svg>`,
+};
+/**
+ * Get animation variants based on animation type
+ */
+function getAnimationProps(particle, animationType, physics) {
+    const { delay, duration, custom } = particle;
+    const driftAmount = custom.drift ?? physics.drift * (Math.random() - 0.5) * 2;
+    const rotationAmount = custom.rotation ?? physics.rotation * (Math.random() - 0.5) * 2;
+    switch (animationType) {
+        case 'fall':
+            return {
+                initial: { y: -50, x: particle.x, opacity: 0, rotate: 0 },
+                animate: {
+                    y: typeof window !== 'undefined' ? window.innerHeight + 50 : 1000,
+                    x: particle.x + driftAmount,
+                    opacity: [0, 1, 1, 0],
+                    rotate: rotationAmount,
+                },
+                transition: {
+                    duration,
+                    ease: 'linear',
+                    repeat: Infinity,
+                    delay,
+                },
+            };
+        case 'rise':
+            return {
+                initial: { y: typeof window !== 'undefined' ? window.innerHeight + 50 : 1000, x: particle.x, opacity: 0, scale: 0 },
+                animate: {
+                    y: -50,
+                    x: [particle.x, particle.x + driftAmount / 2, particle.x - driftAmount / 2, particle.x],
+                    opacity: [0, 1, 1, 0],
+                    scale: [0, 1, 1.2, 1, 0],
+                },
+                transition: {
+                    duration,
+                    ease: 'easeOut',
+                    repeat: Infinity,
+                    delay,
+                },
+            };
+        case 'explode':
+            const angle = custom.angle ?? Math.random() * Math.PI * 2;
+            const distance = custom.distance ?? 100 + Math.random() * 150;
+            return {
+                initial: { x: particle.x, y: particle.y, scale: 0, opacity: 1 },
+                animate: {
+                    x: particle.x + Math.cos(angle) * distance,
+                    y: particle.y + Math.sin(angle) * distance,
+                    scale: [0, 1.5, 0],
+                    opacity: [1, 1, 0],
+                },
+                transition: {
+                    duration: duration * 0.5,
+                    ease: [0.25, 0.46, 0.45, 0.94],
+                    repeat: Infinity,
+                    repeatDelay: duration * 0.5,
+                    delay,
+                },
+            };
+        case 'float':
+            return {
+                initial: { x: particle.x, y: particle.y, opacity: 0, scale: 0.8 },
+                animate: {
+                    x: [particle.x, particle.x + driftAmount, particle.x - driftAmount, particle.x],
+                    y: [particle.y, particle.y - 20, particle.y + 10, particle.y],
+                    opacity: [0, 1, 1, 0],
+                    scale: [0.8, 1, 1.1, 1, 0.8],
+                    rotate: [0, rotationAmount / 4, -rotationAmount / 4, 0],
+                },
+                transition: {
+                    duration,
+                    ease: 'easeInOut',
+                    repeat: Infinity,
+                    delay,
+                },
+            };
+        case 'scatter':
+            const scatterAngle = custom.angle ?? Math.random() * Math.PI * 2;
+            const scatterDistance = custom.distance ?? 50 + Math.random() * 100;
+            return {
+                initial: { x: particle.x, y: particle.y, scale: 0, opacity: 0.8 },
+                animate: {
+                    x: particle.x + Math.cos(scatterAngle) * scatterDistance,
+                    y: particle.y + Math.sin(scatterAngle) * scatterDistance + 50,
+                    scale: [0, 2, 0],
+                    opacity: [0.8, 0.6, 0],
+                    rotate: rotationAmount,
+                },
+                transition: {
+                    duration: duration * 0.7,
+                    ease: 'easeOut',
+                    repeat: Infinity,
+                    repeatDelay: duration * 0.3,
+                    delay,
+                },
+            };
+        default:
+            return {
+                initial: { opacity: 0 },
+                animate: { opacity: 1 },
+                transition: { duration: 1 },
+            };
+    }
+}
+/**
+ * Particle component that renders an SVG particle with Framer Motion animations
+ */
+const Particle = ({ particle, animationType, physics, }) => {
+    const svgString = PARTICLE_SVGS[particle.type];
+    const animationProps = getAnimationProps(particle, animationType, physics);
+    return React.createElement(motion.div, {
+        key: particle.id,
+        style: {
+            position: 'absolute',
+            width: particle.size,
+            height: particle.size,
+            color: particle.color,
+            pointerEvents: 'none',
+        },
+        initial: animationProps.initial,
+        animate: animationProps.animate,
+        transition: animationProps.transition,
+        dangerouslySetInnerHTML: { __html: svgString },
+    });
+};
+/**
+ * Generate a unique ID for a particle
+ */
+function generateId() {
+    return `particle-${Math.random().toString(36).substring(2, 11)}`;
+}
+/**
+ * Get a random item from an array
+ */
+function randomFromArray(arr) {
+    return arr[Math.floor(Math.random() * arr.length)];
+}
+/**
+ * Get a random number within a range
+ */
+function randomInRange(min, max) {
+    return min + Math.random() * (max - min);
+}
+/**
+ * Generate particles for a festival effect
+ * @param count - Number of particles to generate
+ * @param viewport - Viewport dimensions
+ * @param particleTypes - Array of particle types to use
+ * @param colors - Array of colors to use
+ * @param physics - Physics configuration
+ * @param animationType - Type of animation
+ * @returns Array of ParticleData objects
+ */
+function generateParticles(count, viewport, particleTypes, colors, physics, animationType) {
+    const particles = [];
+    for (let i = 0; i < count; i++) {
+        const type = randomFromArray(particleTypes);
+        const color = randomFromArray(colors);
+        const size = randomInRange(physics.scale[0] * 20, physics.scale[1] * 20);
+        // Position calculation based on animation type
+        let x;
+        let y;
+        switch (animationType) {
+            case 'fall':
+                // Start from random x position at top
+                x = randomInRange(0, viewport.width);
+                y = randomInRange(-100, -20);
+                break;
+            case 'rise':
+                // Start from random x position at bottom
+                x = randomInRange(0, viewport.width);
+                y = viewport.height + randomInRange(20, 100);
+                break;
+            case 'explode':
+                // Start from random positions across viewport
+                x = randomInRange(viewport.width * 0.2, viewport.width * 0.8);
+                y = randomInRange(viewport.height * 0.2, viewport.height * 0.6);
+                break;
+            case 'float':
+                // Random positions across viewport
+                x = randomInRange(0, viewport.width);
+                y = randomInRange(0, viewport.height);
+                break;
+            case 'scatter':
+                // Start from center-ish positions
+                x = randomInRange(viewport.width * 0.3, viewport.width * 0.7);
+                y = randomInRange(viewport.height * 0.3, viewport.height * 0.7);
+                break;
+            default:
+                x = randomInRange(0, viewport.width);
+                y = randomInRange(0, viewport.height);
+        }
+        // Calculate delay and duration based on physics speed
+        const baseDelay = i * (1 / count) * 3; // Stagger particles
+        const delay = baseDelay + randomInRange(0, 0.5);
+        const baseDuration = 10 / physics.speed;
+        const duration = baseDuration + randomInRange(-1, 1);
+        // Custom properties for animation variations
+        const custom = {
+            drift: physics.drift * (Math.random() - 0.5) * 2,
+            rotation: physics.rotation * (Math.random() - 0.5) * 2,
+            angle: Math.random() * Math.PI * 2,
+            distance: 50 + Math.random() * 150,
+        };
+        particles.push({
+            id: generateId(),
+            x,
+            y,
+            size,
+            color,
+            type,
+            delay,
+            duration,
+            custom,
+        });
+    }
+    return particles;
+}
+/**
+ * Calculate the actual particle count based on base count and intensity
+ * @param baseCount - The base particle count from festival config
+ * @param intensity - The intensity level
+ * @returns The calculated particle count, capped at maxParticles
+ */
+function calculateParticleCount(baseCount, intensity = 'medium') {
+    const settings = INTENSITY_CONFIG[intensity];
+    const calculated = Math.floor(baseCount * settings.particleMultiplier);
+    return Math.min(calculated, settings.maxParticles);
+}
+
+/**
+ * Check if a festival type is valid
+ */
+function isValidFestival(festival) {
+    return FESTIVAL_TYPES.includes(festival);
+}
+/**
+ * FestiveEffects - Main component for rendering festival-themed visual effects
+ *
+ * Renders a full-screen overlay with animated particles for various festivals.
+ * Uses Framer Motion for smooth, GPU-accelerated animations.
+ *
+ * Features:
+ * - Automatic cleanup of timeouts and event listeners on unmount
+ * - Pauses animations when browser tab is not visible (performance optimization)
+ * - Respects user's reduced motion preferences
+ *
+ * @example
+ * ```tsx
+ * <FestiveEffects festival="christmas" intensity="medium" />
+ * ```
+ */
+const FestiveEffects = ({ festival, intensity = 'medium', duration, zIndex = 9999, respectReducedMotion = true, colors, }) => {
+    const [particles, setParticles] = useState([]);
+    const [isActive, setIsActive] = useState(true);
+    const [viewport, setViewport] = useState({ width: 0, height: 0 });
+    const prefersReducedMotion = useReducedMotion();
+    const isDocumentVisible = useDocumentVisibility();
+    // Refs for cleanup tracking
+    const durationTimeoutRef = useRef(null);
+    const animationFrameRef = useRef(null);
+    const isMountedRef = useRef(true);
+    // Cleanup function to cancel all pending operations
+    const cleanup = useCallback(() => {
+        // Clear duration timeout
+        if (durationTimeoutRef.current) {
+            clearTimeout(durationTimeoutRef.current);
+            durationTimeoutRef.current = null;
+        }
+        // Cancel any pending animation frames
+        if (animationFrameRef.current) {
+            cancelAnimationFrame(animationFrameRef.current);
+            animationFrameRef.current = null;
+        }
+    }, []);
+    // Track mounted state for async operations
+    useEffect(() => {
+        isMountedRef.current = true;
+        return () => {
+            isMountedRef.current = false;
+            cleanup();
+        };
+    }, [cleanup]);
+    // Update viewport dimensions with cleanup
+    useEffect(() => {
+        if (typeof window === 'undefined')
+            return;
+        const updateViewport = () => {
+            if (isMountedRef.current) {
+                setViewport({
+                    width: window.innerWidth,
+                    height: window.innerHeight,
+                });
+            }
+        };
+        updateViewport();
+        window.addEventListener('resize', updateViewport);
+        return () => {
+            window.removeEventListener('resize', updateViewport);
+        };
+    }, []);
+    // Handle duration timeout with proper cleanup
+    useEffect(() => {
+        if (duration && duration > 0) {
+            durationTimeoutRef.current = setTimeout(() => {
+                if (isMountedRef.current) {
+                    setIsActive(false);
+                }
+            }, duration);
+        }
+        return () => {
+            if (durationTimeoutRef.current) {
+                clearTimeout(durationTimeoutRef.current);
+                durationTimeoutRef.current = null;
+            }
+        };
+    }, [duration]);
+    // Generate particles when viewport is ready and effect is active
+    useEffect(() => {
+        if (!isActive || viewport.width === 0 || viewport.height === 0) {
+            return;
+        }
+        if (!isValidFestival(festival)) {
+            return;
+        }
+        const config = FESTIVAL_CONFIGS[festival];
+        const effectColors = colors && colors.length > 0 ? colors : config.colors;
+        const particleCount = getParticleCount(config.baseParticleCount, intensity);
+        const newParticles = generateParticles(particleCount, viewport, config.particleTypes, effectColors, config.physics, config.animationType);
+        if (isMountedRef.current) {
+            setParticles(newParticles);
+        }
+    }, [festival, intensity, colors, viewport, isActive]);
+    // Validate festival prop
+    if (!isValidFestival(festival)) {
+        console.warn(`[FestiveEffects] Invalid festival prop: "${festival}". ` +
+            `Valid options are: ${FESTIVAL_TYPES.join(', ')}`);
+        return null;
+    }
+    // Respect reduced motion preference
+    if (respectReducedMotion && prefersReducedMotion) {
+        return null;
+    }
+    // Don't render if effect is not active
+    if (!isActive) {
+        return null;
+    }
+    // Don't render if viewport is not ready
+    if (viewport.width === 0 || viewport.height === 0) {
+        return null;
+    }
+    // Pause animations when document is not visible (tab is in background)
+    // This improves performance by not rendering animations that can't be seen
+    const shouldRenderParticles = isDocumentVisible;
+    const config = FESTIVAL_CONFIGS[festival];
+    return (jsx("div", { "data-testid": "festive-effects-overlay", style: {
+            position: 'fixed',
+            top: 0,
+            left: 0,
+            width: '100%',
+            height: '100%',
+            pointerEvents: 'none',
+            zIndex,
+            overflow: 'hidden',
+        }, children: jsx(AnimatePresence, { children: shouldRenderParticles && particles.map((particle) => (jsx(Particle, { particle: particle, animationType: config.animationType, physics: config.physics }, particle.id))) }) }));
+};
+
+// Animation System for Festive Effects
+// Contains Framer Motion variants for each animation type
+/**
+ * Fall animation variants - used for snow, leaves, shamrocks
+ * Particles fall from top to bottom with horizontal drift and rotation
+ */
+const fallVariants = {
+    initial: {
+        y: -50,
+        opacity: 0,
+        rotate: 0,
+    },
+    animate: (custom) => ({
+        y: custom.viewportHeight + 50,
+        x: custom.drift,
+        opacity: [0, 1, 1, 0],
+        rotate: custom.rotation,
+    }),
+};
+/**
+ * Get transition for fall animation
+ */
+function getFallTransition(custom) {
+    return {
+        duration: custom.duration,
+        ease: 'linear',
+        repeat: Infinity,
+        delay: custom.delay,
+    };
+}
+/**
+ * Rise animation variants - used for hearts, lanterns
+ * Particles rise from bottom to top with gentle sway
+ */
+const riseVariants = {
+    initial: (custom) => ({
+        y: custom.viewportHeight + 50,
+        opacity: 0,
+        scale: 0,
+    }),
+    animate: (custom) => ({
+        y: -50,
+        x: [0, custom.drift / 2, -custom.drift / 2, 0],
+        opacity: [0, 1, 1, 0],
+        scale: [0, 1, 1.2, 1, 0],
+    }),
+};
+/**
+ * Get transition for rise animation
+ */
+function getRiseTransition(custom) {
+    return {
+        duration: custom.duration,
+        ease: 'easeOut',
+        repeat: Infinity,
+        delay: custom.delay,
+    };
+}
+/**
+ * Explode animation variants - used for fireworks, confetti
+ * Particles burst outward from center point
+ */
+const explodeVariants = {
+    initial: {
+        scale: 0,
+        opacity: 1,
+    },
+    animate: (custom) => ({
+        x: Math.cos(custom.angle) * custom.distance,
+        y: Math.sin(custom.angle) * custom.distance,
+        scale: [0, 1.5, 0],
+        opacity: [1, 1, 0],
+    }),
+};
+/**
+ * Get transition for explode animation
+ */
+function getExplodeTransition(custom) {
+    return {
+        duration: custom.duration * 0.5,
+        ease: [0.25, 0.46, 0.45, 0.94],
+        repeat: Infinity,
+        repeatDelay: custom.duration * 0.5,
+        delay: custom.delay,
+    };
+}
+/**
+ * Float animation variants - used for bats, diyas, moons
+ * Particles float with gentle bobbing motion
+ */
+const floatVariants = {
+    initial: {
+        opacity: 0,
+        scale: 0.8,
+    },
+    animate: (custom) => ({
+        x: [0, custom.drift, -custom.drift, 0],
+        y: [0, -20, 10, 0],
+        opacity: [0, 1, 1, 0],
+        scale: [0.8, 1, 1.1, 1, 0.8],
+        rotate: [0, custom.rotation / 4, -custom.rotation / 4, 0],
+    }),
+};
+/**
+ * Get transition for float animation
+ */
+function getFloatTransition(custom) {
+    return {
+        duration: custom.duration,
+        ease: 'easeInOut',
+        repeat: Infinity,
+        delay: custom.delay,
+    };
+}
+/**
+ * Scatter animation variants - used for holi colors
+ * Particles scatter outward with fading effect
+ */
+const scatterVariants = {
+    initial: {
+        scale: 0,
+        opacity: 0.8,
+    },
+    animate: (custom) => ({
+        x: Math.cos(custom.angle) * custom.distance,
+        y: Math.sin(custom.angle) * custom.distance + 50,
+        scale: [0, 2, 0],
+        opacity: [0.8, 0.6, 0],
+        rotate: custom.rotation,
+    }),
+};
+/**
+ * Get transition for scatter animation
+ */
+function getScatterTransition(custom) {
+    return {
+        duration: custom.duration * 0.7,
+        ease: 'easeOut',
+        repeat: Infinity,
+        repeatDelay: custom.duration * 0.3,
+        delay: custom.delay,
+    };
+}
+/**
+ * Map of animation types to their variants
+ */
+const ANIMATION_VARIANTS = {
+    fall: fallVariants,
+    rise: riseVariants,
+    explode: explodeVariants,
+    float: floatVariants,
+    scatter: scatterVariants,
+};
+/**
+ * Get the appropriate transition function for an animation type
+ */
+function getTransitionForType(animationType, custom) {
+    switch (animationType) {
+        case 'fall':
+            return getFallTransition(custom);
+        case 'rise':
+            return getRiseTransition(custom);
+        case 'explode':
+            return getExplodeTransition(custom);
+        case 'float':
+            return getFloatTransition(custom);
+        case 'scatter':
+            return getScatterTransition(custom);
+        default:
+            return { duration: 1 };
+    }
+}
+/**
+ * Create custom animation data from particle properties
+ */
+function createAnimationCustomData(x, y, physics, delay, duration, viewportHeight) {
+    return {
+        drift: physics.drift * (Math.random() - 0.5) * 2,
+        rotation: physics.rotation * (Math.random() - 0.5) * 2,
+        delay,
+        duration,
+        angle: Math.random() * Math.PI * 2,
+        distance: 50 + Math.random() * 150,
+        x,
+        y,
+        viewportHeight,
+    };
+}
+/**
+ * Get animation props for a particle based on animation type
+ * Returns initial, animate, and transition properties for Framer Motion
+ */
+function getAnimationPropsForType(animationType, custom) {
+    const transition = getTransitionForType(animationType, custom);
+    // Get initial and animate values based on animation type
+    // We compute these directly rather than using variant functions
+    // to avoid TypeScript issues with Framer Motion's TargetResolver signature
+    let initial;
+    let animate;
+    switch (animationType) {
+        case 'fall':
+            initial = { y: -50, opacity: 0, rotate: 0 };
+            animate = {
+                y: custom.viewportHeight + 50,
+                x: custom.drift,
+                opacity: [0, 1, 1, 0],
+                rotate: custom.rotation,
+            };
+            break;
+        case 'rise':
+            initial = { y: custom.viewportHeight + 50, opacity: 0, scale: 0 };
+            animate = {
+                y: -50,
+                x: [0, custom.drift / 2, -custom.drift / 2, 0],
+                opacity: [0, 1, 1, 0],
+                scale: [0, 1, 1.2, 1, 0],
+            };
+            break;
+        case 'explode':
+            initial = { scale: 0, opacity: 1 };
+            animate = {
+                x: Math.cos(custom.angle) * custom.distance,
+                y: Math.sin(custom.angle) * custom.distance,
+                scale: [0, 1.5, 0],
+                opacity: [1, 1, 0],
+            };
+            break;
+        case 'float':
+            initial = { opacity: 0, scale: 0.8 };
+            animate = {
+                x: [0, custom.drift, -custom.drift, 0],
+                y: [0, -20, 10, 0],
+                opacity: [0, 1, 1, 0],
+                scale: [0.8, 1, 1.1, 1, 0.8],
+                rotate: [0, custom.rotation / 4, -custom.rotation / 4, 0],
+            };
+            break;
+        case 'scatter':
+            initial = { scale: 0, opacity: 0.8 };
+            animate = {
+                x: Math.cos(custom.angle) * custom.distance,
+                y: Math.sin(custom.angle) * custom.distance + 50,
+                scale: [0, 2, 0],
+                opacity: [0.8, 0.6, 0],
+                rotate: custom.rotation,
+            };
+            break;
+        default:
+            initial = { opacity: 0 };
+            animate = { opacity: 1 };
+    }
+    return {
+        initial,
+        animate,
+        transition,
+    };
+}
+
+// Festival Registry for Festive Effects
+// Manages registration and retrieval of festival effects
+/**
+ * Create a festival effect from a festival type
+ * @param festivalType - The type of festival
+ * @returns A FestivalEffect instance
+ */
+function createFestivalEffect(festivalType) {
+    const config = FESTIVAL_CONFIGS[festivalType];
+    return {
+        name: festivalType,
+        generateParticles(count, viewport) {
+            return generateParticles(count, viewport, config.particleTypes, config.colors, config.physics, config.animationType);
+        },
+        getConfig() {
+            return config;
+        },
+        renderParticle(particle) {
+            const props = {
+                particle,
+                animationType: config.animationType,
+                physics: config.physics,
+            };
+            return React.createElement(Particle, { key: particle.id, ...props });
+        },
+    };
+}
+/**
+ * Registry for managing festival effects
+ * Provides methods to register, retrieve, and list festival effects
+ */
+class FestivalRegistry {
+    constructor() {
+        this.effects = new Map();
+    }
+    /**
+     * Register a festival effect
+     * @param effect - The festival effect to register
+     */
+    register(effect) {
+        this.effects.set(effect.name, effect);
+    }
+    /**
+     * Get a festival effect by type
+     * @param festival - The festival type to retrieve
+     * @returns The festival effect or undefined if not found
+     */
+    get(festival) {
+        return this.effects.get(festival);
+    }
+    /**
+     * Check if a festival effect is registered
+     * @param festival - The festival type to check
+     * @returns True if the effect is registered
+     */
+    has(festival) {
+        return this.effects.has(festival);
+    }
+    /**
+     * List all registered festival types
+     * @returns Array of registered festival types
+     */
+    list() {
+        return Array.from(this.effects.keys());
+    }
+    /**
+     * Get the number of registered effects
+     * @returns The count of registered effects
+     */
+    get size() {
+        return this.effects.size;
+    }
+    /**
+     * Clear all registered effects
+     */
+    clear() {
+        this.effects.clear();
+    }
+}
+/**
+ * Default registry instance with all 12 festival effects pre-registered
+ */
+const defaultRegistry = new FestivalRegistry();
+// Register all 12 festival effects
+const ALL_FESTIVALS = [
+    'christmas',
+    'newyear',
+    'valentine',
+    'easter',
+    'halloween',
+    'thanksgiving',
+    'diwali',
+    'chinesenewyear',
+    'holi',
+    'eid',
+    'stpatricks',
+    'independence',
+];
+ALL_FESTIVALS.forEach((festivalType) => {
+    defaultRegistry.register(createFestivalEffect(festivalType));
+});
+
+/**
+ * Christmas effect configuration
+ */
+const CHRISTMAS_CONFIG = {
+    baseParticleCount: 50,
+    colors: ['#FFFFFF', '#E8F4FF', '#B8D4E8', '#87CEEB'],
+    particleTypes: ['snowflake'],
+    animationType: 'fall',
+    physics: {
+        speed: 3,
+        drift: 50,
+        rotation: 360,
+        scale: [0.5, 1.5],
+    },
+};
+/**
+ * Individual snowflake particle with falling animation
+ */
+const ChristmasParticle = ({ particle, viewportHeight }) => {
+    const { drift, rotation } = particle.custom;
+    return (jsx(motion.div, { style: {
+            position: 'absolute',
+            left: particle.x,
+            width: particle.size,
+            height: particle.size,
+            color: particle.color,
+            pointerEvents: 'none',
+        }, initial: { y: -50, opacity: 0, rotate: 0 }, animate: {
+            y: viewportHeight + 50,
+            x: drift,
+            opacity: [0, 1, 1, 0],
+            rotate: rotation,
+        }, transition: {
+            duration: particle.duration,
+            ease: 'linear',
+            repeat: Infinity,
+            delay: particle.delay,
+        }, dangerouslySetInnerHTML: { __html: PARTICLE_SVGS.snowflake } }));
+};
+/**
+ * Generate snowflake particles for Christmas effect
+ */
+function generateChristmasParticles(count, viewport, colors) {
+    const effectColors = colors && colors.length > 0 ? colors : CHRISTMAS_CONFIG.colors;
+    const physics = CHRISTMAS_CONFIG.physics;
+    const particles = [];
+    for (let i = 0; i < count; i++) {
+        const size = physics.scale[0] * 20 + Math.random() * (physics.scale[1] - physics.scale[0]) * 20;
+        const baseDelay = i * (1 / count) * 3;
+        particles.push({
+            id: `christmas-${i}-${Math.random().toString(36).substring(2, 9)}`,
+            x: Math.random() * viewport.width,
+            y: -50 - Math.random() * 80,
+            size,
+            color: effectColors[Math.floor(Math.random() * effectColors.length)],
+            type: 'snowflake',
+            delay: baseDelay + Math.random() * 0.5,
+            duration: 10 / physics.speed + (Math.random() - 0.5) * 2,
+            custom: {
+                drift: physics.drift * (Math.random() - 0.5) * 2,
+                rotation: physics.rotation * (Math.random() - 0.5) * 2,
+            },
+        });
+    }
+    return particles;
+}
+/**
+ * Christmas Effect Component
+ * Renders falling snowflakes with drift and rotation
+ * White/blue color palette
+ */
+const ChristmasEffect = ({ particles, viewport }) => {
+    return (jsx(Fragment, { children: particles.map((particle) => (jsx(ChristmasParticle, { particle: particle, viewportHeight: viewport.height }, particle.id))) }));
+};
+
+/**
+ * New Year effect configuration
+ */
+const NEWYEAR_CONFIG = {
+    baseParticleCount: 40,
+    colors: ['#FFD700', '#FF6B6B', '#4ECDC4', '#45B7D1', '#96CEB4', '#FFEAA7'],
+    particleTypes: ['firework', 'confetti', 'spark'],
+    animationType: 'explode',
+    physics: {
+        speed: 5,
+        drift: 100,
+        rotation: 720,
+        scale: [0.3, 1.2],
+    },
+};
+/**
+ * Individual particle with explode animation for fireworks/confetti/sparks
+ */
+const NewYearParticle = ({ particle }) => {
+    const { angle, distance } = particle.custom;
+    const svgString = PARTICLE_SVGS[particle.type];
+    return (jsx(motion.div, { style: {
+            position: 'absolute',
+            left: particle.x,
+            top: particle.y,
+            width: particle.size,
+            height: particle.size,
+            color: particle.color,
+            pointerEvents: 'none',
+        }, initial: { scale: 0, opacity: 1 }, animate: {
+            x: Math.cos(angle) * distance,
+            y: Math.sin(angle) * distance,
+            scale: [0, 1.5, 0],
+            opacity: [1, 1, 0],
+        }, transition: {
+            duration: particle.duration * 0.5,
+            ease: [0.25, 0.46, 0.45, 0.94],
+            repeat: Infinity,
+            repeatDelay: particle.duration * 0.5,
+            delay: particle.delay,
+        }, dangerouslySetInnerHTML: { __html: svgString } }));
+};
+/**
+ * Generate particles for New Year effect
+ */
+function generateNewYearParticles(count, viewport, colors) {
+    const effectColors = colors && colors.length > 0 ? colors : NEWYEAR_CONFIG.colors;
+    const physics = NEWYEAR_CONFIG.physics;
+    const particles = [];
+    const particleTypes = NEWYEAR_CONFIG.particleTypes;
+    for (let i = 0; i < count; i++) {
+        const size = physics.scale[0] * 20 + Math.random() * (physics.scale[1] - physics.scale[0]) * 20;
+        const baseDelay = i * (1 / count) * 3;
+        const type = particleTypes[Math.floor(Math.random() * particleTypes.length)];
+        particles.push({
+            id: `newyear-${i}-${Math.random().toString(36).substring(2, 9)}`,
+            x: viewport.width * 0.2 + Math.random() * viewport.width * 0.6,
+            y: viewport.height * 0.2 + Math.random() * viewport.height * 0.4,
+            size,
+            color: effectColors[Math.floor(Math.random() * effectColors.length)],
+            type,
+            delay: baseDelay + Math.random() * 0.5,
+            duration: 10 / physics.speed + (Math.random() - 0.5) * 2,
+            custom: {
+                angle: Math.random() * Math.PI * 2,
+                distance: 100 + Math.random() * 150,
+                rotation: physics.rotation * (Math.random() - 0.5) * 2,
+            },
+        });
+    }
+    return particles;
+}
+/**
+ * New Year Effect Component
+ * Renders exploding fireworks with sparks and falling confetti
+ */
+const NewYearEffect = ({ particles }) => {
+    return (jsx(Fragment, { children: particles.map((particle) => (jsx(NewYearParticle, { particle: particle }, particle.id))) }));
+};
+
+/**
+ * Valentine effect configuration
+ */
+const VALENTINE_CONFIG = {
+    baseParticleCount: 35,
+    colors: ['#FF6B6B', '#EE5A5A', '#FF8E8E', '#FFB6C1', '#FF69B4'],
+    particleTypes: ['heart'],
+    animationType: 'rise',
+    physics: {
+        speed: 2,
+        drift: 30,
+        rotation: 15,
+        scale: [0.6, 1.4],
+    },
+};
+/**
+ * Individual heart particle with rising animation and gentle sway
+ */
+const ValentineParticle = ({ particle, viewportHeight }) => {
+    const { drift } = particle.custom;
+    return (jsx(motion.div, { style: {
+            position: 'absolute',
+            left: particle.x,
+            width: particle.size,
+            height: particle.size,
+            color: particle.color,
+            pointerEvents: 'none',
+        }, initial: { y: viewportHeight + 50, opacity: 0, scale: 0 }, animate: {
+            y: -50,
+            x: [0, drift / 2, -drift / 2, 0],
+            opacity: [0, 1, 1, 0],
+            scale: [0, 1, 1.2, 1, 0],
+        }, transition: {
+            duration: particle.duration,
+            ease: 'easeOut',
+            repeat: Infinity,
+            delay: particle.delay,
+        }, dangerouslySetInnerHTML: { __html: PARTICLE_SVGS.heart } }));
+};
+/**
+ * Generate heart particles for Valentine effect
+ */
+function generateValentineParticles(count, viewport, colors) {
+    const effectColors = colors && colors.length > 0 ? colors : VALENTINE_CONFIG.colors;
+    const physics = VALENTINE_CONFIG.physics;
+    const particles = [];
+    for (let i = 0; i < count; i++) {
+        const size = physics.scale[0] * 20 + Math.random() * (physics.scale[1] - physics.scale[0]) * 20;
+        const baseDelay = i * (1 / count) * 3;
+        particles.push({
+            id: `valentine-${i}-${Math.random().toString(36).substring(2, 9)}`,
+            x: Math.random() * viewport.width,
+            y: viewport.height + 50 + Math.random() * 80,
+            size,
+            color: effectColors[Math.floor(Math.random() * effectColors.length)],
+            type: 'heart',
+            delay: baseDelay + Math.random() * 0.5,
+            duration: 10 / physics.speed + (Math.random() - 0.5) * 2,
+            custom: {
+                drift: physics.drift * (Math.random() - 0.5) * 2,
+                rotation: physics.rotation * (Math.random() - 0.5) * 2,
+            },
+        });
+    }
+    return particles;
+}
+/**
+ * Valentine Effect Component
+ * Renders rising hearts with gentle sway
+ * Pink/red color palette
+ */
+const ValentineEffect = ({ particles, viewport }) => {
+    return (jsx(Fragment, { children: particles.map((particle) => (jsx(ValentineParticle, { particle: particle, viewportHeight: viewport.height }, particle.id))) }));
+};
+
+/**
+ * Easter effect configuration
+ */
+const EASTER_CONFIG = {
+    baseParticleCount: 30,
+    colors: ['#FFB6C1', '#98FB98', '#87CEEB', '#DDA0DD', '#F0E68C'],
+    particleTypes: ['egg', 'flower'],
+    animationType: 'float',
+    physics: {
+        speed: 1.5,
+        drift: 20,
+        rotation: 10,
+        scale: [0.7, 1.3],
+    },
+};
+/**
+ * Individual egg/flower particle with floating animation
+ */
+const EasterParticle = ({ particle }) => {
+    const { drift, rotation } = particle.custom;
+    const svgString = PARTICLE_SVGS[particle.type];
+    return (jsx(motion.div, { style: {
+            position: 'absolute',
+            left: particle.x,
+            top: particle.y,
+            width: particle.size,
+            height: particle.size,
+            color: particle.color,
+            pointerEvents: 'none',
+        }, initial: { opacity: 0, scale: 0.8 }, animate: {
+            x: [0, drift, -drift, 0],
+            y: [0, -20, 10, 0],
+            opacity: [0, 1, 1, 0],
+            scale: [0.8, 1, 1.1, 1, 0.8],
+            rotate: [0, rotation / 4, -rotation / 4, 0],
+        }, transition: {
+            duration: particle.duration,
+            ease: 'easeInOut',
+            repeat: Infinity,
+            delay: particle.delay,
+        }, dangerouslySetInnerHTML: { __html: svgString } }));
+};
+/**
+ * Generate particles for Easter effect
+ */
+function generateEasterParticles(count, viewport, colors) {
+    const effectColors = colors && colors.length > 0 ? colors : EASTER_CONFIG.colors;
+    const physics = EASTER_CONFIG.physics;
+    const particles = [];
+    const particleTypes = EASTER_CONFIG.particleTypes;
+    for (let i = 0; i < count; i++) {
+        const size = physics.scale[0] * 20 + Math.random() * (physics.scale[1] - physics.scale[0]) * 20;
+        const baseDelay = i * (1 / count) * 3;
+        const type = particleTypes[Math.floor(Math.random() * particleTypes.length)];
+        particles.push({
+            id: `easter-${i}-${Math.random().toString(36).substring(2, 9)}`,
+            x: Math.random() * viewport.width,
+            y: Math.random() * viewport.height,
+            size,
+            color: effectColors[Math.floor(Math.random() * effectColors.length)],
+            type,
+            delay: baseDelay + Math.random() * 0.5,
+            duration: 10 / physics.speed + (Math.random() - 0.5) * 2,
+            custom: {
+                drift: physics.drift * (Math.random() - 0.5) * 2,
+                rotation: physics.rotation * (Math.random() - 0.5) * 2,
+            },
+        });
+    }
+    return particles;
+}
+/**
+ * Easter Effect Component
+ * Renders floating eggs and spring flowers
+ * Pastel color palette
+ */
+const EasterEffect = ({ particles }) => {
+    return (jsx(Fragment, { children: particles.map((particle) => (jsx(EasterParticle, { particle: particle }, particle.id))) }));
+};
+
+/**
+ * Halloween effect configuration
+ */
+const HALLOWEEN_CONFIG = {
+    baseParticleCount: 35,
+    colors: ['#FF6600', '#8B008B', '#000000', '#FFD700', '#32CD32'],
+    particleTypes: ['bat', 'pumpkin', 'spider'],
+    animationType: 'float',
+    physics: {
+        speed: 2,
+        drift: 60,
+        rotation: 30,
+        scale: [0.5, 1.5],
+    },
+};
+/**
+ * Individual bat/pumpkin/spider particle with erratic floating animation
+ */
+const HalloweenParticle = ({ particle }) => {
+    const { drift, rotation } = particle.custom;
+    const svgString = PARTICLE_SVGS[particle.type];
+    // Bats have more erratic movement
+    const isBat = particle.type === 'bat';
+    const driftMultiplier = isBat ? 1.5 : 1;
+    const rotationMultiplier = isBat ? 2 : 1;
+    return (jsx(motion.div, { style: {
+            position: 'absolute',
+            left: particle.x,
+            top: particle.y,
+            width: particle.size,
+            height: particle.size,
+            color: particle.color,
+            pointerEvents: 'none',
+        }, initial: { opacity: 0, scale: 0.8 }, animate: {
+            x: [0, drift * driftMultiplier, -drift * driftMultiplier, drift * 0.5, 0],
+            y: [0, -30, 15, -20, 0],
+            opacity: [0, 1, 1, 1, 0],
+            scale: [0.8, 1, 1.1, 1, 0.8],
+            rotate: [0, rotation * rotationMultiplier / 4, -rotation * rotationMultiplier / 4, rotation / 8, 0],
+        }, transition: {
+            duration: particle.duration,
+            ease: 'easeInOut',
+            repeat: Infinity,
+            delay: particle.delay,
+        }, dangerouslySetInnerHTML: { __html: svgString } }));
+};
+/**
+ * Generate particles for Halloween effect
+ */
+function generateHalloweenParticles(count, viewport, colors) {
+    const effectColors = colors && colors.length > 0 ? colors : HALLOWEEN_CONFIG.colors;
+    const physics = HALLOWEEN_CONFIG.physics;
+    const particles = [];
+    const particleTypes = HALLOWEEN_CONFIG.particleTypes;
+    for (let i = 0; i < count; i++) {
+        const size = physics.scale[0] * 20 + Math.random() * (physics.scale[1] - physics.scale[0]) * 20;
+        const baseDelay = i * (1 / count) * 3;
+        const type = particleTypes[Math.floor(Math.random() * particleTypes.length)];
+        particles.push({
+            id: `halloween-${i}-${Math.random().toString(36).substring(2, 9)}`,
+            x: Math.random() * viewport.width,
+            y: Math.random() * viewport.height,
+            size,
+            color: effectColors[Math.floor(Math.random() * effectColors.length)],
+            type,
+            delay: baseDelay + Math.random() * 0.5,
+            duration: 10 / physics.speed + (Math.random() - 0.5) * 2,
+            custom: {
+                drift: physics.drift * (Math.random() - 0.5) * 2,
+                rotation: physics.rotation * (Math.random() - 0.5) * 2,
+            },
+        });
+    }
+    return particles;
+}
+/**
+ * Halloween Effect Component
+ * Renders flying bats with erratic movement, floating pumpkins and spiders
+ * Orange/purple/black color palette
+ */
+const HalloweenEffect = ({ particles }) => {
+    return (jsx(Fragment, { children: particles.map((particle) => (jsx(HalloweenParticle, { particle: particle }, particle.id))) }));
+};
+
+/**
+ * Thanksgiving effect configuration
+ */
+const THANKSGIVING_CONFIG = {
+    baseParticleCount: 40,
+    colors: ['#D2691E', '#FF8C00', '#B8860B', '#CD853F', '#8B4513'],
+    particleTypes: ['leaf'],
+    animationType: 'fall',
+    physics: {
+        speed: 2,
+        drift: 80,
+        rotation: 540,
+        scale: [0.6, 1.4],
+    },
+};
+/**
+ * Individual leaf particle with tumbling fall animation
+ */
+const ThanksgivingParticle = ({ particle, viewportHeight }) => {
+    const { drift, rotation } = particle.custom;
+    return (jsx(motion.div, { style: {
+            position: 'absolute',
+            left: particle.x,
+            width: particle.size,
+            height: particle.size,
+            color: particle.color,
+            pointerEvents: 'none',
+        }, initial: { y: -50, opacity: 0, rotate: 0 }, animate: {
+            y: viewportHeight + 50,
+            x: [0, drift * 0.3, -drift * 0.2, drift * 0.4, drift],
+            opacity: [0, 1, 1, 1, 0],
+            rotate: rotation,
+        }, transition: {
+            duration: particle.duration,
+            ease: 'linear',
+            repeat: Infinity,
+            delay: particle.delay,
+        }, dangerouslySetInnerHTML: { __html: PARTICLE_SVGS.leaf } }));
+};
+/**
+ * Generate leaf particles for Thanksgiving effect
+ */
+function generateThanksgivingParticles(count, viewport, colors) {
+    const effectColors = colors && colors.length > 0 ? colors : THANKSGIVING_CONFIG.colors;
+    const physics = THANKSGIVING_CONFIG.physics;
+    const particles = [];
+    for (let i = 0; i < count; i++) {
+        const size = physics.scale[0] * 20 + Math.random() * (physics.scale[1] - physics.scale[0]) * 20;
+        const baseDelay = i * (1 / count) * 3;
+        particles.push({
+            id: `thanksgiving-${i}-${Math.random().toString(36).substring(2, 9)}`,
+            x: Math.random() * viewport.width,
+            y: -50 - Math.random() * 80,
+            size,
+            color: effectColors[Math.floor(Math.random() * effectColors.length)],
+            type: 'leaf',
+            delay: baseDelay + Math.random() * 0.5,
+            duration: 10 / physics.speed + (Math.random() - 0.5) * 2,
+            custom: {
+                drift: physics.drift * (Math.random() - 0.5) * 2,
+                rotation: physics.rotation * (Math.random() - 0.5) * 2,
+            },
+        });
+    }
+    return particles;
+}
+/**
+ * Thanksgiving Effect Component
+ * Renders falling autumn leaves with tumbling rotation
+ * Orange/brown color palette
+ */
+const ThanksgivingEffect = ({ particles, viewport }) => {
+    return (jsx(Fragment, { children: particles.map((particle) => (jsx(ThanksgivingParticle, { particle: particle, viewportHeight: viewport.height }, particle.id))) }));
+};
+
+/**
+ * Diwali effect configuration
+ */
+const DIWALI_CONFIG = {
+    baseParticleCount: 45,
+    colors: ['#FFD700', '#FF8C00', '#FF4500', '#FFA500', '#FFFF00'],
+    particleTypes: ['diya', 'spark', 'rangoli'],
+    animationType: 'float',
+    physics: {
+        speed: 1,
+        drift: 15,
+        rotation: 5,
+        scale: [0.5, 1.2],
+    },
+};
+/**
+ * Individual diya/spark/rangoli particle with glowing float animation
+ */
+const DiwaliParticle = ({ particle }) => {
+    const { drift, rotation } = particle.custom;
+    const svgString = PARTICLE_SVGS[particle.type];
+    // Diyas have flickering effect, sparks have more movement
+    const isDiya = particle.type === 'diya';
+    const isSpark = particle.type === 'spark';
+    return (jsx(motion.div, { style: {
+            position: 'absolute',
+            left: particle.x,
+            top: particle.y,
+            width: particle.size,
+            height: particle.size,
+            color: particle.color,
+            pointerEvents: 'none',
+            filter: isDiya ? 'drop-shadow(0 0 8px #FFD700)' : isSpark ? 'drop-shadow(0 0 4px #FFA500)' : undefined,
+        }, initial: { opacity: 0, scale: 0.8 }, animate: {
+            x: [0, drift, -drift, 0],
+            y: [0, -10, 5, 0],
+            opacity: isDiya ? [0, 1, 0.8, 1, 0] : [0, 1, 1, 0],
+            scale: isDiya ? [0.8, 1, 0.95, 1.05, 0.8] : [0.8, 1, 1.1, 1, 0.8],
+            rotate: [0, rotation / 4, -rotation / 4, 0],
+        }, transition: {
+            duration: particle.duration,
+            ease: 'easeInOut',
+            repeat: Infinity,
+            delay: particle.delay,
+        }, dangerouslySetInnerHTML: { __html: svgString } }));
+};
+/**
+ * Generate particles for Diwali effect
+ */
+function generateDiwaliParticles(count, viewport, colors) {
+    const effectColors = colors && colors.length > 0 ? colors : DIWALI_CONFIG.colors;
+    const physics = DIWALI_CONFIG.physics;
+    const particles = [];
+    const particleTypes = DIWALI_CONFIG.particleTypes;
+    for (let i = 0; i < count; i++) {
+        const size = physics.scale[0] * 20 + Math.random() * (physics.scale[1] - physics.scale[0]) * 20;
+        const baseDelay = i * (1 / count) * 3;
+        const type = particleTypes[Math.floor(Math.random() * particleTypes.length)];
+        particles.push({
+            id: `diwali-${i}-${Math.random().toString(36).substring(2, 9)}`,
+            x: Math.random() * viewport.width,
+            y: Math.random() * viewport.height,
+            size,
+            color: effectColors[Math.floor(Math.random() * effectColors.length)],
+            type,
+            delay: baseDelay + Math.random() * 0.5,
+            duration: 10 / physics.speed + (Math.random() - 0.5) * 2,
+            custom: {
+                drift: physics.drift * (Math.random() - 0.5) * 2,
+                rotation: physics.rotation * (Math.random() - 0.5) * 2,
+            },
+        });
+    }
+    return particles;
+}
+/**
+ * Diwali Effect Component
+ * Renders glowing diyas with flickering, golden sparkles and rangoli patterns
+ * Golden/orange color palette
+ */
+const DiwaliEffect = ({ particles }) => {
+    return (jsx(Fragment, { children: particles.map((particle) => (jsx(DiwaliParticle, { particle: particle }, particle.id))) }));
+};
+
+/**
+ * Chinese New Year effect configuration
+ */
+const CHINESENEWYEAR_CONFIG = {
+    baseParticleCount: 40,
+    colors: ['#FF0000', '#FFD700', '#FF4500', '#DC143C'],
+    particleTypes: ['lantern', 'firework', 'dragon'],
+    animationType: 'rise',
+    physics: {
+        speed: 1.5,
+        drift: 25,
+        rotation: 10,
+        scale: [0.6, 1.3],
+    },
+};
+/**
+ * Individual lantern/firework/dragon particle with rising animation
+ */
+const ChineseNewYearParticle = ({ particle, viewportHeight }) => {
+    const { drift, angle, distance } = particle.custom;
+    const svgString = PARTICLE_SVGS[particle.type];
+    // Fireworks explode, lanterns and dragons rise
+    const isFirework = particle.type === 'firework';
+    const isLantern = particle.type === 'lantern';
+    if (isFirework) {
+        return (jsx(motion.div, { style: {
+                position: 'absolute',
+                left: particle.x,
+                top: particle.y,
+                width: particle.size,
+                height: particle.size,
+                color: particle.color,
+                pointerEvents: 'none',
+            }, initial: { scale: 0, opacity: 1 }, animate: {
+                x: Math.cos(angle) * distance,
+                y: Math.sin(angle) * distance,
+                scale: [0, 1.5, 0],
+                opacity: [1, 1, 0],
+            }, transition: {
+                duration: particle.duration * 0.5,
+                ease: [0.25, 0.46, 0.45, 0.94],
+                repeat: Infinity,
+                repeatDelay: particle.duration * 0.5,
+                delay: particle.delay,
+            }, dangerouslySetInnerHTML: { __html: svgString } }));
+    }
+    return (jsx(motion.div, { style: {
+            position: 'absolute',
+            left: particle.x,
+            width: particle.size,
+            height: particle.size,
+            color: particle.color,
+            pointerEvents: 'none',
+            filter: isLantern ? 'drop-shadow(0 0 6px #FF0000)' : undefined,
+        }, initial: { y: viewportHeight + 50, opacity: 0, scale: 0 }, animate: {
+            y: -50,
+            x: [0, drift / 2, -drift / 2, 0],
+            opacity: [0, 1, 1, 0],
+            scale: [0, 1, 1.1, 1, 0],
+        }, transition: {
+            duration: particle.duration,
+            ease: 'easeOut',
+            repeat: Infinity,
+            delay: particle.delay,
+        }, dangerouslySetInnerHTML: { __html: svgString } }));
+};
+/**
+ * Generate particles for Chinese New Year effect
+ */
+function generateChineseNewYearParticles(count, viewport, colors) {
+    const effectColors = colors && colors.length > 0 ? colors : CHINESENEWYEAR_CONFIG.colors;
+    const physics = CHINESENEWYEAR_CONFIG.physics;
+    const particles = [];
+    const particleTypes = CHINESENEWYEAR_CONFIG.particleTypes;
+    for (let i = 0; i < count; i++) {
+        const size = physics.scale[0] * 20 + Math.random() * (physics.scale[1] - physics.scale[0]) * 20;
+        const baseDelay = i * (1 / count) * 3;
+        const type = particleTypes[Math.floor(Math.random() * particleTypes.length)];
+        // Position based on particle type
+        const isFirework = type === 'firework';
+        const x = isFirework
+            ? viewport.width * 0.2 + Math.random() * viewport.width * 0.6
+            : Math.random() * viewport.width;
+        const y = isFirework
+            ? viewport.height * 0.2 + Math.random() * viewport.height * 0.4
+            : viewport.height + 50 + Math.random() * 80;
+        particles.push({
+            id: `chinesenewyear-${i}-${Math.random().toString(36).substring(2, 9)}`,
+            x,
+            y,
+            size,
+            color: effectColors[Math.floor(Math.random() * effectColors.length)],
+            type,
+            delay: baseDelay + Math.random() * 0.5,
+            duration: 10 / physics.speed + (Math.random() - 0.5) * 2,
+            custom: {
+                drift: physics.drift * (Math.random() - 0.5) * 2,
+                rotation: physics.rotation * (Math.random() - 0.5) * 2,
+                angle: Math.random() * Math.PI * 2,
+                distance: 80 + Math.random() * 120,
+            },
+        });
+    }
+    return particles;
+}
+/**
+ * Chinese New Year Effect Component
+ * Renders rising red lanterns and golden fireworks
+ * Red/gold color palette
+ */
+const ChineseNewYearEffect = ({ particles, viewport }) => {
+    return (jsx(Fragment, { children: particles.map((particle) => (jsx(ChineseNewYearParticle, { particle: particle, viewportHeight: viewport.height }, particle.id))) }));
+};
+
+/**
+ * Holi effect configuration
+ */
+const HOLI_CONFIG = {
+    baseParticleCount: 50,
+    colors: ['#FF1493', '#00FF00', '#FFFF00', '#FF4500', '#9400D3', '#00BFFF'],
+    particleTypes: ['color-splash'],
+    animationType: 'scatter',
+    physics: {
+        speed: 4,
+        drift: 150,
+        rotation: 180,
+        scale: [0.4, 2.0],
+    },
+};
+/**
+ * Individual color splash particle with scatter animation
+ */
+const HoliParticle = ({ particle }) => {
+    const { angle, distance, rotation } = particle.custom;
+    return (jsx(motion.div, { style: {
+            position: 'absolute',
+            left: particle.x,
+            top: particle.y,
+            width: particle.size,
+            height: particle.size,
+            color: particle.color,
+            pointerEvents: 'none',
+            filter: `drop-shadow(0 0 10px ${particle.color})`,
+        }, initial: { scale: 0, opacity: 0.8 }, animate: {
+            x: Math.cos(angle) * distance,
+            y: Math.sin(angle) * distance + 50,
+            scale: [0, 2, 0],
+            opacity: [0.8, 0.6, 0],
+            rotate: rotation,
+        }, transition: {
+            duration: particle.duration * 0.7,
+            ease: 'easeOut',
+            repeat: Infinity,
+            repeatDelay: particle.duration * 0.3,
+            delay: particle.delay,
+        }, dangerouslySetInnerHTML: { __html: PARTICLE_SVGS['color-splash'] } }));
+};
+/**
+ * Generate particles for Holi effect
+ */
+function generateHoliParticles(count, viewport, colors) {
+    const effectColors = colors && colors.length > 0 ? colors : HOLI_CONFIG.colors;
+    const physics = HOLI_CONFIG.physics;
+    const particles = [];
+    for (let i = 0; i < count; i++) {
+        const size = physics.scale[0] * 20 + Math.random() * (physics.scale[1] - physics.scale[0]) * 20;
+        const baseDelay = i * (1 / count) * 3;
+        particles.push({
+            id: `holi-${i}-${Math.random().toString(36).substring(2, 9)}`,
+            x: viewport.width * 0.3 + Math.random() * viewport.width * 0.4,
+            y: viewport.height * 0.3 + Math.random() * viewport.height * 0.4,
+            size,
+            color: effectColors[Math.floor(Math.random() * effectColors.length)],
+            type: 'color-splash',
+            delay: baseDelay + Math.random() * 0.5,
+            duration: 10 / physics.speed + (Math.random() - 0.5) * 2,
+            custom: {
+                angle: Math.random() * Math.PI * 2,
+                distance: 50 + Math.random() * 100,
+                rotation: physics.rotation * (Math.random() - 0.5) * 2,
+            },
+        });
+    }
+    return particles;
+}
+/**
+ * Holi Effect Component
+ * Renders scattered color powder bursts
+ * Vibrant multi-color palette
+ */
+const HoliEffect = ({ particles }) => {
+    return (jsx(Fragment, { children: particles.map((particle) => (jsx(HoliParticle, { particle: particle }, particle.id))) }));
+};
+
+/**
+ * Eid effect configuration
+ */
+const EID_CONFIG = {
+    baseParticleCount: 35,
+    colors: ['#FFD700', '#C0C0C0', '#228B22', '#FFFFFF'],
+    particleTypes: ['moon', 'star'],
+    animationType: 'float',
+    physics: {
+        speed: 0.8,
+        drift: 10,
+        rotation: 5,
+        scale: [0.5, 1.5],
+    },
+};
+/**
+ * Individual moon/star particle with gentle floating animation
+ */
+const EidParticle = ({ particle }) => {
+    const { drift, rotation } = particle.custom;
+    const svgString = PARTICLE_SVGS[particle.type];
+    // Stars twinkle, moons glow
+    const isStar = particle.type === 'star';
+    const isMoon = particle.type === 'moon';
+    return (jsx(motion.div, { style: {
+            position: 'absolute',
+            left: particle.x,
+            top: particle.y,
+            width: particle.size,
+            height: particle.size,
+            color: particle.color,
+            pointerEvents: 'none',
+            filter: isMoon
+                ? 'drop-shadow(0 0 8px #FFD700)'
+                : isStar
+                    ? 'drop-shadow(0 0 4px #FFFFFF)'
+                    : undefined,
+        }, initial: { opacity: 0, scale: 0.8 }, animate: {
+            x: [0, drift, -drift, 0],
+            y: [0, -15, 8, 0],
+            opacity: isStar ? [0, 1, 0.5, 1, 0] : [0, 1, 1, 0],
+            scale: isStar ? [0.8, 1, 0.9, 1.1, 0.8] : [0.8, 1, 1.05, 1, 0.8],
+            rotate: [0, rotation / 4, -rotation / 4, 0],
+        }, transition: {
+            duration: particle.duration,
+            ease: 'easeInOut',
+            repeat: Infinity,
+            delay: particle.delay,
+        }, dangerouslySetInnerHTML: { __html: svgString } }));
+};
+/**
+ * Generate particles for Eid effect
+ */
+function generateEidParticles(count, viewport, colors) {
+    const effectColors = colors && colors.length > 0 ? colors : EID_CONFIG.colors;
+    const physics = EID_CONFIG.physics;
+    const particles = [];
+    const particleTypes = EID_CONFIG.particleTypes;
+    for (let i = 0; i < count; i++) {
+        const size = physics.scale[0] * 20 + Math.random() * (physics.scale[1] - physics.scale[0]) * 20;
+        const baseDelay = i * (1 / count) * 3;
+        const type = particleTypes[Math.floor(Math.random() * particleTypes.length)];
+        particles.push({
+            id: `eid-${i}-${Math.random().toString(36).substring(2, 9)}`,
+            x: Math.random() * viewport.width,
+            y: Math.random() * viewport.height,
+            size,
+            color: effectColors[Math.floor(Math.random() * effectColors.length)],
+            type,
+            delay: baseDelay + Math.random() * 0.5,
+            duration: 10 / physics.speed + (Math.random() - 0.5) * 2,
+            custom: {
+                drift: physics.drift * (Math.random() - 0.5) * 2,
+                rotation: physics.rotation * (Math.random() - 0.5) * 2,
+            },
+        });
+    }
+    return particles;
+}
+/**
+ * Eid Effect Component
+ * Renders floating crescent moons and twinkling stars
+ * Gold/silver/green color palette
+ */
+const EidEffect = ({ particles }) => {
+    return (jsx(Fragment, { children: particles.map((particle) => (jsx(EidParticle, { particle: particle }, particle.id))) }));
+};
+
+/**
+ * St. Patrick's effect configuration
+ */
+const STPATRICKS_CONFIG = {
+    baseParticleCount: 40,
+    colors: ['#228B22', '#32CD32', '#00FF00', '#FFD700'],
+    particleTypes: ['shamrock', 'rainbow'],
+    animationType: 'fall',
+    physics: {
+        speed: 2,
+        drift: 40,
+        rotation: 180,
+        scale: [0.6, 1.3],
+    },
+};
+/**
+ * Individual shamrock/rainbow particle with spinning fall animation
+ */
+const StPatricksParticle = ({ particle, viewportHeight }) => {
+    const { drift, rotation } = particle.custom;
+    const svgString = PARTICLE_SVGS[particle.type];
+    // Shamrocks spin more, rainbows drift gently
+    const isShamrock = particle.type === 'shamrock';
+    return (jsx(motion.div, { style: {
+            position: 'absolute',
+            left: particle.x,
+            width: particle.size,
+            height: particle.size,
+            color: particle.color,
+            pointerEvents: 'none',
+        }, initial: { y: -50, opacity: 0, rotate: 0 }, animate: {
+            y: viewportHeight + 50,
+            x: isShamrock ? [0, drift * 0.5, -drift * 0.3, drift] : drift,
+            opacity: [0, 1, 1, 0],
+            rotate: isShamrock ? rotation * 2 : rotation * 0.5,
+        }, transition: {
+            duration: particle.duration,
+            ease: 'linear',
+            repeat: Infinity,
+            delay: particle.delay,
+        }, dangerouslySetInnerHTML: { __html: svgString } }));
+};
+/**
+ * Generate particles for St. Patrick's effect
+ */
+function generateStPatricksParticles(count, viewport, colors) {
+    const effectColors = colors && colors.length > 0 ? colors : STPATRICKS_CONFIG.colors;
+    const physics = STPATRICKS_CONFIG.physics;
+    const particles = [];
+    for (let i = 0; i < count; i++) {
+        const size = physics.scale[0] * 20 + Math.random() * (physics.scale[1] - physics.scale[0]) * 20;
+        const baseDelay = i * (1 / count) * 3;
+        // More shamrocks than rainbows
+        const type = Math.random() < 0.8 ? 'shamrock' : 'rainbow';
+        particles.push({
+            id: `stpatricks-${i}-${Math.random().toString(36).substring(2, 9)}`,
+            x: Math.random() * viewport.width,
+            y: -50 - Math.random() * 80,
+            size,
+            color: effectColors[Math.floor(Math.random() * effectColors.length)],
+            type,
+            delay: baseDelay + Math.random() * 0.5,
+            duration: 10 / physics.speed + (Math.random() - 0.5) * 2,
+            custom: {
+                drift: physics.drift * (Math.random() - 0.5) * 2,
+                rotation: physics.rotation * (Math.random() - 0.5) * 2,
+            },
+        });
+    }
+    return particles;
+}
+/**
+ * St. Patrick's Effect Component
+ * Renders falling shamrocks with spin
+ * Green color palette with gold accents
+ */
+const StPatricksEffect = ({ particles, viewport }) => {
+    return (jsx(Fragment, { children: particles.map((particle) => (jsx(StPatricksParticle, { particle: particle, viewportHeight: viewport.height }, particle.id))) }));
+};
+
+/**
+ * Independence Day effect configuration
+ */
+const INDEPENDENCE_CONFIG = {
+    baseParticleCount: 45,
+    colors: ['#FF0000', '#FFFFFF', '#0000FF'], // Default US colors, customizable
+    particleTypes: ['firework', 'spark', 'confetti'],
+    animationType: 'explode',
+    physics: {
+        speed: 5,
+        drift: 120,
+        rotation: 360,
+        scale: [0.3, 1.5],
+    },
+};
+/**
+ * Individual firework/spark/confetti particle with explode animation
+ */
+const IndependenceParticle = ({ particle }) => {
+    const { angle, distance, rotation } = particle.custom;
+    const svgString = PARTICLE_SVGS[particle.type];
+    // Fireworks have bigger explosions, confetti falls after burst
+    const isFirework = particle.type === 'firework';
+    const isConfetti = particle.type === 'confetti';
+    return (jsx(motion.div, { style: {
+            position: 'absolute',
+            left: particle.x,
+            top: particle.y,
+            width: particle.size,
+            height: particle.size,
+            color: particle.color,
+            pointerEvents: 'none',
+            filter: isFirework ? `drop-shadow(0 0 6px ${particle.color})` : undefined,
+        }, initial: { scale: 0, opacity: 1 }, animate: {
+            x: Math.cos(angle) * distance * (isFirework ? 1.2 : 1),
+            y: isConfetti
+                ? [Math.sin(angle) * distance * 0.5, Math.sin(angle) * distance + 100]
+                : Math.sin(angle) * distance,
+            scale: isFirework ? [0, 1.8, 0] : [0, 1.5, 0],
+            opacity: [1, 1, 0],
+            rotate: isConfetti ? rotation * 2 : rotation,
+        }, transition: {
+            duration: particle.duration * (isConfetti ? 0.7 : 0.5),
+            ease: isConfetti ? 'easeIn' : [0.25, 0.46, 0.45, 0.94],
+            repeat: Infinity,
+            repeatDelay: particle.duration * (isConfetti ? 0.3 : 0.5),
+            delay: particle.delay,
+        }, dangerouslySetInnerHTML: { __html: svgString } }));
+};
+/**
+ * Generate particles for Independence Day effect
+ */
+function generateIndependenceParticles(count, viewport, colors) {
+    const effectColors = colors && colors.length > 0 ? colors : INDEPENDENCE_CONFIG.colors;
+    const physics = INDEPENDENCE_CONFIG.physics;
+    const particles = [];
+    const particleTypes = INDEPENDENCE_CONFIG.particleTypes;
+    for (let i = 0; i < count; i++) {
+        const size = physics.scale[0] * 20 + Math.random() * (physics.scale[1] - physics.scale[0]) * 20;
+        const baseDelay = i * (1 / count) * 3;
+        const type = particleTypes[Math.floor(Math.random() * particleTypes.length)];
+        particles.push({
+            id: `independence-${i}-${Math.random().toString(36).substring(2, 9)}`,
+            x: viewport.width * 0.2 + Math.random() * viewport.width * 0.6,
+            y: viewport.height * 0.2 + Math.random() * viewport.height * 0.4,
+            size,
+            color: effectColors[Math.floor(Math.random() * effectColors.length)],
+            type,
+            delay: baseDelay + Math.random() * 0.5,
+            duration: 10 / physics.speed + (Math.random() - 0.5) * 2,
+            custom: {
+                angle: Math.random() * Math.PI * 2,
+                distance: 100 + Math.random() * 150,
+                rotation: physics.rotation * (Math.random() - 0.5) * 2,
+            },
+        });
+    }
+    return particles;
+}
+/**
+ * Independence Day Effect Component
+ * Renders customizable color fireworks and patriotic confetti
+ * Default US colors (red, white, blue), customizable via colors prop
+ */
+const IndependenceEffect = ({ particles }) => {
+    return (jsx(Fragment, { children: particles.map((particle) => (jsx(IndependenceParticle, { particle: particle }, particle.id))) }));
+};
+
+// Individual Festival Effects
+// Each effect provides dedicated components and particle generators
+// Christmas - Falling snowflakes
+const EFFECT_GENERATORS = {
+    christmas: generateChristmasParticles,
+    newyear: generateNewYearParticles,
+    valentine: generateValentineParticles,
+    easter: generateEasterParticles,
+    halloween: generateHalloweenParticles,
+    thanksgiving: generateThanksgivingParticles,
+    diwali: generateDiwaliParticles,
+    chinesenewyear: generateChineseNewYearParticles,
+    holi: generateHoliParticles,
+    eid: generateEidParticles,
+    stpatricks: generateStPatricksParticles,
+    independence: generateIndependenceParticles,
+};
+
+export { ANIMATION_VARIANTS, CHINESENEWYEAR_CONFIG, CHRISTMAS_CONFIG, ChineseNewYearEffect, ChristmasEffect, DIWALI_CONFIG, DiwaliEffect, EASTER_CONFIG, EFFECT_GENERATORS, EID_CONFIG, EasterEffect, EidEffect, FESTIVAL_CONFIGS, FESTIVAL_TYPES, FestivalRegistry, FestiveEffects, HALLOWEEN_CONFIG, HOLI_CONFIG, HalloweenEffect, HoliEffect, INDEPENDENCE_CONFIG, INTENSITY_CONFIG, IndependenceEffect, NEWYEAR_CONFIG, NewYearEffect, PARTICLE_SVGS, Particle, STPATRICKS_CONFIG, StPatricksEffect, THANKSGIVING_CONFIG, ThanksgivingEffect, VALENTINE_CONFIG, ValentineEffect, calculateParticleCount, createAnimationCustomData, createFestivalEffect, defaultRegistry, explodeVariants, fallVariants, floatVariants, generateChineseNewYearParticles, generateChristmasParticles, generateDiwaliParticles, generateEasterParticles, generateEidParticles, generateHalloweenParticles, generateHoliParticles, generateIndependenceParticles, generateNewYearParticles, generateParticles, generateStPatricksParticles, generateThanksgivingParticles, generateValentineParticles, getAnimationPropsForType, getExplodeTransition, getFallTransition, getFloatTransition, getParticleCount, getRiseTransition, getScatterTransition, getTransitionForType, riseVariants, scatterVariants, useReducedMotion };
+//# sourceMappingURL=index.esm.js.map