falling-animation 0.1.2 → 0.1.3

package/dist/falling-animation.cjs

@@ -243,7 +243,7 @@ function getAnimation(name) {
 }
 
 /**
- * Particle class - manages individual falling objects
+ * Particle class - manages individual falling objects (Canvas-based, no DOM)
  */
 /**
  * Speed multiplier to convert user-friendly speed units to px/ms
@@ -253,22 +253,23 @@ function getAnimation(name) {
  */
 const SPEED_MULTIPLIER = 0.04; // 40 px/s per unit, divided by 1000 for ms
 class Particle {
-    constructor(options) {
-        this.options = options;
+    constructor(options, containerWidth, containerHeight) {
         this.id = generateId();
         this.age = 0;
         this.phase = Math.random() * Math.PI * 2;
         this.data = {};
-        // Get container dimensions
-        this.containerWidth = options.container.clientWidth;
-        this.containerHeight = options.container.clientHeight;
+        // Store container dimensions
+        this.containerWidth = containerWidth;
+        this.containerHeight = containerHeight;
         // Pick random object
         const object = weightedRandomPick(options.objects);
+        // Store content and type for rendering
+        this.content = object.src || object.content || '❄️';
+        this.objectType = object.type;
         // Initialize position at top with random x
         this.x = randomRange(-50, this.containerWidth + 50);
         this.y = -50;
         // Initialize velocity (apply speed multiplier for intuitive units)
-        // speed=1 → ~40px/s (1cm/s), speed=0.1 → ~4px/s (1mm/s)
         this.vy = randomFromRange(options.speed) * SPEED_MULTIPLIER;
         this.vx = options.wind * SPEED_MULTIPLIER * randomRange(0.5, 1.5);
         // Initialize size and opacity
@@ -281,8 +282,6 @@ class Particle {
         this.animation = randomPick(options.animation);
         // Initialize animation-specific data
         this.initAnimationData();
-        // Create DOM element
-        this.element = this.createElement(object);
     }
     /**
      * Initialize animation-specific data
@@ -294,54 +293,6 @@ class Particle {
             this.data.wobbleY = randomRange(0.005, 0.015);
         }
     }
-    /**
-     * Create DOM element for the particle
-     */
-    createElement(object) {
-        var _a, _b, _c, _d;
-        const element = document.createElement('div');
-        element.className = 'falling-particle';
-        element.setAttribute('data-particle-id', String(this.id));
-        // Set content based on type
-        switch (object.type) {
-            case 'emoji':
-                element.textContent = (_a = object.content) !== null && _a !== void 0 ? _a : '❄️';
-                element.style.fontSize = `${this.size}px`;
-                element.style.lineHeight = '1';
-                break;
-            case 'image':
-                const img = document.createElement('img');
-                img.src = (_c = (_b = object.src) !== null && _b !== void 0 ? _b : object.content) !== null && _c !== void 0 ? _c : '';
-                img.alt = '';
-                img.style.width = `${this.size}px`;
-                img.style.height = `${this.size}px`;
-                img.style.objectFit = 'contain';
-                img.draggable = false;
-                element.appendChild(img);
-                break;
-            case 'html':
-                element.innerHTML = (_d = object.content) !== null && _d !== void 0 ? _d : '';
-                break;
-        }
-        // Apply base styles
-        Object.assign(element.style, {
-            position: 'absolute',
-            pointerEvents: 'none',
-            userSelect: 'none',
-            willChange: 'transform, opacity',
-            opacity: String(this.opacity),
-            left: '0',
-            top: '0',
-            transform: this.getTransform()
-        });
-        return element;
-    }
-    /**
-     * Get CSS transform string
-     */
-    getTransform() {
-        return `translate3d(${this.x}px, ${this.y}px, 0) rotate(${this.rotation}deg)`;
-    }
     /**
      * Update particle state
      */
@@ -350,8 +301,6 @@ class Particle {
         // Apply animation
         const animationFn = getAnimation(this.animation);
         animationFn(this, deltaTime, elapsed);
-        // Update DOM
-        this.element.style.transform = this.getTransform();
     }
     /**
      * Check if particle is out of bounds
@@ -368,16 +317,200 @@ class Particle {
         this.containerWidth = width;
         this.containerHeight = height;
     }
+}
+
+/**
+ * CanvasRenderer - Handles canvas-based rendering for particle effects
+ * Provides high-performance drawing of emojis and images
+ */
+class CanvasRenderer {
+    constructor(container, zIndex = 9999) {
+        this.spriteCache = new Map();
+        this.imageCache = new Map();
+        this.width = 0;
+        this.height = 0;
+        if (!isBrowser()) {
+            throw new Error('[falling-animation] CanvasRenderer requires a browser environment.');
+        }
+        // Create canvas element
+        this.canvas = document.createElement('canvas');
+        this.canvas.className = 'falling-animation-canvas';
+        // Get 2D context
+        const ctx = this.canvas.getContext('2d');
+        if (!ctx) {
+            throw new Error('[falling-animation] Could not get 2D context from canvas.');
+        }
+        this.ctx = ctx;
+        // Set canvas styles
+        const isBody = container === document.body;
+        Object.assign(this.canvas.style, {
+            position: isBody ? 'fixed' : 'absolute',
+            top: '0',
+            left: '0',
+            width: '100%',
+            height: '100%',
+            pointerEvents: 'none',
+            zIndex: String(zIndex)
+        });
+        // Ensure container has position for absolute canvas
+        if (!isBody) {
+            const containerPosition = getComputedStyle(container).position;
+            if (containerPosition === 'static') {
+                container.style.position = 'relative';
+            }
+        }
+        // Append to container
+        container.appendChild(this.canvas);
+        // Set initial size
+        this.resize();
+    }
+    /**
+     * Resize canvas to match container
+     */
+    resize() {
+        var _a;
+        const rect = (_a = this.canvas.parentElement) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+        if (rect) {
+            const dpr = window.devicePixelRatio || 1;
+            this.width = rect.width;
+            this.height = rect.height;
+            this.canvas.width = this.width * dpr;
+            this.canvas.height = this.height * dpr;
+            this.ctx.scale(dpr, dpr);
+        }
+    }
+    /**
+     * Get container dimensions
+     */
+    getSize() {
+        return { width: this.width, height: this.height };
+    }
+    /**
+     * Clear the entire canvas
+     */
+    clear() {
+        this.ctx.clearRect(0, 0, this.width, this.height);
+    }
+    /**
+     * Pre-cache an emoji as a sprite for fast drawing (HiDPI aware)
+     */
+    cacheEmoji(content, size) {
+        const dpr = window.devicePixelRatio || 1;
+        const key = `emoji:${content}:${size}:${dpr}`;
+        if (this.spriteCache.has(key)) {
+            return this.spriteCache.get(key);
+        }
+        // Create off-screen canvas for the emoji at HiDPI resolution
+        const spriteCanvas = document.createElement('canvas');
+        const padding = size * 0.3; // Padding for effects and emoji overflow
+        const logicalSize = size + padding * 2;
+        const physicalSize = logicalSize * dpr;
+        spriteCanvas.width = physicalSize;
+        spriteCanvas.height = physicalSize;
+        const spriteCtx = spriteCanvas.getContext('2d');
+        // Scale for HiDPI
+        spriteCtx.scale(dpr, dpr);
+        // High quality rendering
+        spriteCtx.imageSmoothingEnabled = true;
+        spriteCtx.imageSmoothingQuality = 'high';
+        // Draw emoji with proper font settings
+        const fontSize = size * 1.0; // Emoji font size
+        spriteCtx.font = `${fontSize}px "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", "Android Emoji", "EmojiOne", sans-serif`;
+        spriteCtx.textAlign = 'center';
+        spriteCtx.textBaseline = 'middle';
+        spriteCtx.fillText(content, logicalSize / 2, logicalSize / 2);
+        const sprite = {
+            canvas: spriteCanvas,
+            width: logicalSize,
+            height: logicalSize
+        };
+        this.spriteCache.set(key, sprite);
+        return sprite;
+    }
+    /**
+     * Pre-load an image
+     */
+    preloadImage(src) {
+        if (this.imageCache.has(src)) {
+            return Promise.resolve(this.imageCache.get(src));
+        }
+        return new Promise((resolve, reject) => {
+            const img = new Image();
+            img.crossOrigin = 'anonymous';
+            img.onload = () => {
+                this.imageCache.set(src, img);
+                resolve(img);
+            };
+            img.onerror = reject;
+            img.src = src;
+        });
+    }
+    /**
+     * Draw a single particle (emoji or image)
+     */
+    drawParticle(particle) {
+        const { x, y, rotation, size, opacity, content, type } = particle;
+        this.ctx.save();
+        this.ctx.globalAlpha = opacity;
+        this.ctx.translate(x, y);
+        this.ctx.rotate((rotation * Math.PI) / 180);
+        if (type === 'emoji') {
+            const sprite = this.cacheEmoji(content, Math.round(size));
+            this.ctx.drawImage(sprite.canvas, -sprite.width / 2, -sprite.height / 2, sprite.width, sprite.height);
+        }
+        else if (type === 'image') {
+            const img = this.imageCache.get(content);
+            if (img) {
+                this.ctx.drawImage(img, -size / 2, -size / 2, size, size);
+            }
+        }
+        this.ctx.restore();
+    }
     /**
-     * Remove particle from DOM
+     * Draw multiple particles efficiently
+     */
+    drawParticles(particles) {
+        for (const particle of particles) {
+            this.drawParticle(particle);
+        }
+    }
+    /**
+     * Draw a firework particle (glowing circle)
+     */
+    drawFireworkParticle(particle) {
+        const { x, y, size, opacity, color } = particle;
+        this.ctx.save();
+        this.ctx.globalAlpha = opacity;
+        // Draw glow
+        this.ctx.shadowColor = color;
+        this.ctx.shadowBlur = size * 2;
+        // Draw particle
+        this.ctx.fillStyle = color;
+        this.ctx.beginPath();
+        this.ctx.arc(x, y, size, 0, Math.PI * 2);
+        this.ctx.fill();
+        this.ctx.restore();
+    }
+    /**
+     * Draw multiple firework particles
+     */
+    drawFireworkParticles(particles) {
+        for (const particle of particles) {
+            this.drawFireworkParticle(particle);
+        }
+    }
+    /**
+     * Destroy the renderer and remove canvas from DOM
      */
     destroy() {
-        this.element.remove();
+        this.canvas.remove();
+        this.spriteCache.clear();
+        this.imageCache.clear();
     }
 }
 
 /**
- * FallingAnimation - Main class for creating falling object animations
+ * FallingAnimation - Main class for creating falling object animations (Canvas-based)
  */
 /** Default configuration values */
 const DEFAULTS$1 = {
@@ -395,7 +528,7 @@ const DEFAULTS$1 = {
 class FallingAnimation {
     constructor(options) {
         this.particles = [];
-        this.wrapper = null;
+        this.renderer = null;
         this.isRunning = false;
         this.isPaused = false;
         this.animationId = null;
@@ -407,7 +540,7 @@ class FallingAnimation {
          * Main animation loop
          */
         this.animate = (currentTime) => {
-            if (!this.isRunning)
+            if (!this.isRunning || !this.renderer)
                 return;
             // Calculate delta time
             if (this.lastFrameTime === 0) {
@@ -433,6 +566,18 @@ class FallingAnimation {
             }
             // Remove out-of-bounds particles
             particlesToRemove.forEach(p => this.removeParticle(p));
+            // Clear and render all particles
+            this.renderer.clear();
+            const renderData = this.particles.map(p => ({
+                x: p.x,
+                y: p.y,
+                rotation: p.rotation,
+                size: p.size,
+                opacity: p.opacity,
+                content: p.content,
+                type: p.objectType === 'image' ? 'image' : 'emoji'
+            }));
+            this.renderer.drawParticles(renderData);
             // Continue animation loop
             this.animationId = requestAnimationFrame(this.animate);
         };
@@ -442,8 +587,10 @@ class FallingAnimation {
         }
         // Resolve options with defaults
         this.options = this.resolveOptions(options);
-        // Create wrapper element
-        this.createWrapper();
+        // Create canvas renderer
+        this.renderer = new CanvasRenderer(this.options.container, this.options.zIndex);
+        // Preload images if any
+        this.preloadImages();
         // Setup resize handler if responsive
         if (this.options.responsive) {
             this.setupResizeHandler();
@@ -453,6 +600,26 @@ class FallingAnimation {
             this.start();
         }
     }
+    /**
+     * Preload any image objects
+     */
+    async preloadImages() {
+        if (!this.renderer)
+            return;
+        for (const obj of this.options.objects) {
+            if (obj.type === 'image') {
+                const src = obj.src || obj.content;
+                if (src) {
+                    try {
+                        await this.renderer.preloadImage(src);
+                    }
+                    catch (e) {
+                        console.warn(`[falling-animation] Failed to preload image: ${src}`);
+                    }
+                }
+            }
+        }
+    }
     /**
      * Merge user options with defaults
      */
@@ -485,42 +652,18 @@ class FallingAnimation {
             responsive: (_j = options.responsive) !== null && _j !== void 0 ? _j : DEFAULTS$1.responsive
         };
     }
-    /**
-     * Create wrapper element for particles
-     */
-    createWrapper() {
-        this.wrapper = document.createElement('div');
-        this.wrapper.className = 'falling-animation-wrapper';
-        // Apply styles
-        Object.assign(this.wrapper.style, {
-            position: this.options.container === document.body ? 'fixed' : 'absolute',
-            top: '0',
-            left: '0',
-            width: '100%',
-            height: '100%',
-            overflow: 'hidden',
-            pointerEvents: 'none',
-            zIndex: String(this.options.zIndex)
-        });
-        // Ensure container has position for absolute wrapper
-        if (this.options.container !== document.body) {
-            const containerPosition = getComputedStyle(this.options.container).position;
-            if (containerPosition === 'static') {
-                this.options.container.style.position = 'relative';
-            }
-        }
-        this.options.container.appendChild(this.wrapper);
-    }
     /**
      * Setup resize handler for responsive behavior
      */
     setupResizeHandler() {
         this.resizeHandler = throttle(() => {
-            const width = this.options.container.clientWidth;
-            const height = this.options.container.clientHeight;
-            this.particles.forEach(particle => {
-                particle.updateContainerSize(width, height);
-            });
+            if (this.renderer) {
+                this.renderer.resize();
+                const { width, height } = this.renderer.getSize();
+                this.particles.forEach(particle => {
+                    particle.updateContainerSize(width, height);
+                });
+            }
         }, 200);
         window.addEventListener('resize', this.resizeHandler);
     }
@@ -531,11 +674,11 @@ class FallingAnimation {
         if (this.particles.length >= this.options.maxParticles) {
             return;
         }
-        const particle = new Particle(this.options);
+        if (!this.renderer)
+            return;
+        const { width, height } = this.renderer.getSize();
+        const particle = new Particle(this.options, width, height);
         this.particles.push(particle);
-        if (this.wrapper) {
-            this.wrapper.appendChild(particle.element);
-        }
     }
     /**
      * Remove a particle
@@ -544,7 +687,6 @@ class FallingAnimation {
         const index = this.particles.indexOf(particle);
         if (index > -1) {
             this.particles.splice(index, 1);
-            particle.destroy();
         }
     }
     /**
@@ -570,8 +712,11 @@ class FallingAnimation {
             this.animationId = null;
         }
         // Clear all particles
-        this.particles.forEach(p => p.destroy());
         this.particles = [];
+        // Clear canvas
+        if (this.renderer) {
+            this.renderer.clear();
+        }
     }
     /**
      * Pause the animation (keeps particles in place)
@@ -627,6 +772,7 @@ class FallingAnimation {
         }
         if (newOptions.objects) {
             this.options.objects = newOptions.objects;
+            this.preloadImages(); // Preload any new images
         }
     }
     /**
@@ -652,10 +798,10 @@ class FallingAnimation {
      */
     destroy() {
         this.stop();
-        // Remove wrapper
-        if (this.wrapper) {
-            this.wrapper.remove();
-            this.wrapper = null;
+        // Destroy renderer
+        if (this.renderer) {
+            this.renderer.destroy();
+            this.renderer = null;
         }
         // Remove resize handler
         if (this.resizeHandler) {
@@ -666,14 +812,14 @@ class FallingAnimation {
 }
 
 /**
- * Fireworks Animation - Creates realistic firework effects
+ * Fireworks Animation - Creates realistic firework effects (Canvas-based)
  *
  * Features:
  * - Rockets shooting up from bottom
  * - Explosions spreading particles in all directions (360°)
  * - Gravity effect on particles
  * - Fade out over time
- * - Trail effects
+ * - Glow effects
  */
 /** Default colors for fireworks */
 const DEFAULT_COLORS = [
@@ -688,7 +834,6 @@ const DEFAULT_COLORS = [
     '#ff69b4', // Pink
     '#ffd700', // Gold
 ];
-/** Default configuration */
 const DEFAULTS = {
     colors: DEFAULT_COLORS,
     launchRate: 1,
@@ -699,14 +844,15 @@ const DEFAULTS = {
     particleLifetime: { min: 1000, max: 2000 },
     gravity: 0.1,
     trail: true,
+    explosionPattern: 'circular',
     autoStart: true,
     zIndex: 9999
 };
 class Fireworks {
     constructor(options = {}) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
         this.particles = [];
-        this.wrapper = null;
+        this.renderer = null;
         this.isRunning = false;
         this.animationId = null;
         this.lastLaunchTime = 0;
@@ -714,7 +860,7 @@ class Fireworks {
         this.resizeHandler = null;
         this.animate = (currentTime) => {
             var _a;
-            if (!this.isRunning)
+            if (!this.isRunning || !this.renderer)
                 return;
             if (this.lastFrameTime === 0) {
                 this.lastFrameTime = currentTime;
@@ -733,47 +879,62 @@ class Fireworks {
             for (const particle of this.particles) {
                 particle.age += deltaTime;
                 if (particle.phase === 'rocket') {
-                    // Update rocket
                     particle.x += particle.vx * deltaTime * 0.1;
                     particle.y += particle.vy * deltaTime * 0.1;
-                    particle.vy += 0.01 * deltaTime; // Slow down slightly as it rises
-                    // Check if ready to explode (reached target height or max age)
+                    particle.vy += 0.01 * deltaTime;
                     const targetY = (_a = particle.targetY) !== null && _a !== void 0 ? _a : 0;
                     if (particle.y <= targetY || particle.age >= particle.maxAge || particle.vy >= 0) {
                         particlesToExplode.push(particle);
                     }
-                    // Trail effect - dim the rocket slightly
                     particle.opacity = Math.max(0.5, 1 - (particle.age / particle.maxAge) * 0.3);
                 }
                 else {
-                    // Update explosion particle
                     particle.x += particle.vx * deltaTime * 0.1;
                     particle.y += particle.vy * deltaTime * 0.1;
-                    particle.vy += particle.gravity * deltaTime * 0.01; // Apply gravity
-                    // Fade out
+                    particle.vy += particle.gravity * deltaTime * 0.01;
                     const lifeProgress = particle.age / particle.maxAge;
                     particle.opacity = Math.max(0, 1 - lifeProgress);
-                    // Slow down
-                    particle.vx *= 0.99;
-                    particle.vy *= 0.99;
-                    // Check if dead
+                    // Higher drag for small particles (embers effect)
+                    const drag = particle.size < 2 ? 0.96 : 0.99;
+                    particle.vx *= drag;
+                    particle.vy *= drag;
+                    // Double pattern secondary explosion: trigger at 50% lifetime for stage 1 particles
+                    if (particle.stage === 1 && lifeProgress >= 0.5 && particle.targetY !== -1) {
+                        // Mark as already triggered secondary explosion
+                        particle.targetY = -1;
+                        particlesToExplode.push(particle);
+                    }
                     if (particle.age >= particle.maxAge) {
                         particlesToRemove.push(particle);
                     }
                 }
-                // Update DOM
-                particle.element.style.transform = `translate3d(${particle.x}px, ${particle.y}px, 0)`;
-                particle.element.style.opacity = String(particle.opacity);
             }
             // Handle explosions
             for (const rocket of particlesToExplode) {
-                this.explode(rocket);
+                if (rocket.stage === 1) {
+                    // Stage 1 particle: trigger secondary explosion with smaller particles
+                    this.explodeSecondary(rocket);
+                }
+                else {
+                    // Rocket: normal explosion
+                    this.explode(rocket);
+                }
                 particlesToRemove.push(rocket);
             }
             // Remove dead particles
             for (const particle of particlesToRemove) {
                 this.removeParticle(particle);
             }
+            // Render all particles
+            this.renderer.clear();
+            const renderData = this.particles.map(p => ({
+                x: p.x,
+                y: p.y,
+                size: p.size,
+                opacity: p.opacity,
+                color: p.color
+            }));
+            this.renderer.drawFireworkParticles(renderData);
             this.animationId = requestAnimationFrame(this.animate);
         };
         // Check for browser environment
@@ -803,130 +964,313 @@ class Fireworks {
             particleLifetime: (_g = options.particleLifetime) !== null && _g !== void 0 ? _g : DEFAULTS.particleLifetime,
             gravity: (_h = options.gravity) !== null && _h !== void 0 ? _h : DEFAULTS.gravity,
             trail: (_j = options.trail) !== null && _j !== void 0 ? _j : DEFAULTS.trail,
-            autoStart: (_k = options.autoStart) !== null && _k !== void 0 ? _k : DEFAULTS.autoStart,
-            zIndex: (_l = options.zIndex) !== null && _l !== void 0 ? _l : DEFAULTS.zIndex
+            explosionPattern: (_k = options.explosionPattern) !== null && _k !== void 0 ? _k : DEFAULTS.explosionPattern,
+            autoStart: (_l = options.autoStart) !== null && _l !== void 0 ? _l : DEFAULTS.autoStart,
+            zIndex: (_m = options.zIndex) !== null && _m !== void 0 ? _m : DEFAULTS.zIndex
         };
-        this.createWrapper();
+        // Create canvas renderer
+        this.renderer = new CanvasRenderer(container, this.options.zIndex);
         this.setupResizeHandler();
         if (this.options.autoStart) {
             this.start();
         }
     }
-    createWrapper() {
-        this.wrapper = document.createElement('div');
-        this.wrapper.className = 'fireworks-wrapper';
-        Object.assign(this.wrapper.style, {
-            position: this.options.container === document.body ? 'fixed' : 'absolute',
-            top: '0',
-            left: '0',
-            width: '100%',
-            height: '100%',
-            overflow: 'hidden',
-            pointerEvents: 'none',
-            zIndex: String(this.options.zIndex)
-        });
-        if (this.options.container !== document.body) {
-            const containerPosition = getComputedStyle(this.options.container).position;
-            if (containerPosition === 'static') {
-                this.options.container.style.position = 'relative';
-            }
-        }
-        this.options.container.appendChild(this.wrapper);
-    }
     setupResizeHandler() {
         this.resizeHandler = throttle(() => {
-            // Handle resize if needed
+            if (this.renderer) {
+                this.renderer.resize();
+            }
         }, 200);
         window.addEventListener('resize', this.resizeHandler);
     }
     getContainerSize() {
-        return {
-            width: this.options.container.clientWidth,
-            height: this.options.container.clientHeight
-        };
-    }
-    createParticleElement(particle) {
-        const element = document.createElement('div');
-        element.className = 'firework-particle';
-        Object.assign(element.style, {
-            position: 'absolute',
-            left: '0',
-            top: '0',
-            width: `${particle.size}px`,
-            height: `${particle.size}px`,
-            backgroundColor: particle.color,
-            borderRadius: '50%',
-            boxShadow: `0 0 ${particle.size * 2}px ${particle.color}`,
-            opacity: String(particle.opacity),
-            pointerEvents: 'none',
-            willChange: 'transform, opacity',
-            transform: `translate3d(${particle.x}px, ${particle.y}px, 0)`
-        });
-        return element;
+        if (this.renderer) {
+            return this.renderer.getSize();
+        }
+        return { width: 0, height: 0 };
     }
     launchRocket() {
         const { width, height } = this.getContainerSize();
+        if (width === 0 || height === 0)
+            return;
         const color = this.options.colors[Math.floor(Math.random() * this.options.colors.length)];
         // Random explosion height: 10% to 90% from top of screen
         const targetY = randomRange(height * 0.1, height * 0.9);
         const distanceToTravel = height - targetY;
         // Calculate time based on distance and speed
         const rocketSpeed = randomFromRange(this.options.rocketSpeed);
-        const travelTime = distanceToTravel / (rocketSpeed * 0.1); // approximate time in ms
+        const travelTime = distanceToTravel / (rocketSpeed * 0.1);
         const particle = {
             id: generateId(),
-            element: null,
             x: randomRange(width * 0.1, width * 0.9),
-            y: height + 10, // Start slightly below viewport
+            y: height + 10,
             vx: randomRange(-0.5, 0.5),
             vy: -rocketSpeed,
             size: 4,
             opacity: 1,
             color,
             age: 0,
-            maxAge: Math.min(travelTime, 3000), // Cap at 3 seconds
+            maxAge: Math.min(travelTime, 3000),
             phase: 'rocket',
             gravity: 0,
-            targetY // Store target explosion height
+            targetY,
+            stage: 0
         };
-        particle.element = this.createParticleElement(particle);
         this.particles.push(particle);
-        if (this.wrapper) {
-            this.wrapper.appendChild(particle.element);
-        }
     }
     explode(rocket) {
         const particleCount = this.options.particlesPerExplosion;
         const color = rocket.color;
-        // Create explosion particles spreading in all directions
-        for (let i = 0; i < particleCount; i++) {
-            // Spread evenly in 360 degrees
-            const angle = (i / particleCount) * Math.PI * 2 + randomRange(-0.1, 0.1);
+        // Get pattern (resolve 'random' or array to single pattern)
+        let pattern;
+        const patternOption = this.options.explosionPattern;
+        if (Array.isArray(patternOption)) {
+            // Pick random from array
+            pattern = patternOption[Math.floor(Math.random() * patternOption.length)];
+        }
+        else if (patternOption === 'random') {
+            const patterns = ['circular', 'ring', 'heart', 'star', 'willow', 'palm', 'chrysanthemum', 'embers', 'double'];
+            pattern = patterns[Math.floor(Math.random() * patterns.length)];
+        }
+        else {
+            pattern = patternOption;
+        }
+        // Generate particles based on pattern
+        const particles = this.generatePatternParticles(pattern, rocket, particleCount, color);
+        for (const particle of particles) {
+            this.particles.push(particle);
+        }
+    }
+    generatePatternParticles(pattern, rocket, count, color) {
+        switch (pattern) {
+            case 'ring':
+                return this.createRingExplosion(rocket, count, color);
+            case 'heart':
+                return this.createHeartExplosion(rocket, count, color);
+            case 'star':
+                return this.createStarExplosion(rocket, count, color);
+            case 'willow':
+                return this.createWillowExplosion(rocket, count, color);
+            case 'palm':
+                return this.createPalmExplosion(rocket, count, color);
+            case 'chrysanthemum':
+                return this.createChrysanthemumExplosion(rocket, count, color);
+            case 'embers':
+                return this.createEmbersExplosion(rocket, count, color);
+            case 'double':
+                return this.createDoubleExplosion(rocket, count, color);
+            case 'circular':
+            default:
+                return this.createCircularExplosion(rocket, count, color);
+        }
+    }
+    /** Standard circular explosion - even spread */
+    createCircularExplosion(rocket, count, color) {
+        const particles = [];
+        for (let i = 0; i < count; i++) {
+            const angle = (i / count) * Math.PI * 2 + randomRange(-0.1, 0.1);
             const speed = randomFromRange(this.options.explosionSpeed);
+            particles.push(this.createExplosionParticle(rocket, color, angle, speed));
+        }
+        return particles;
+    }
+    /** Ring/donut shape - particles at similar radius */
+    createRingExplosion(rocket, count, color) {
+        const particles = [];
+        const baseSpeed = (this.options.explosionSpeed.min + this.options.explosionSpeed.max) / 2;
+        for (let i = 0; i < count; i++) {
+            const angle = (i / count) * Math.PI * 2;
+            const speed = baseSpeed + randomRange(-0.5, 0.5);
+            particles.push(this.createExplosionParticle(rocket, color, angle, speed, 0.05)); // Low gravity
+        }
+        return particles;
+    }
+    /** Heart shape explosion */
+    createHeartExplosion(rocket, count, color) {
+        const particles = [];
+        for (let i = 0; i < count; i++) {
+            const t = (i / count) * Math.PI * 2;
+            // Heart parametric equation
+            const heartX = 16 * Math.pow(Math.sin(t), 3);
+            const heartY = -(13 * Math.cos(t) - 5 * Math.cos(2 * t) - 2 * Math.cos(3 * t) - Math.cos(4 * t));
+            const angle = Math.atan2(heartY, heartX);
+            const speed = Math.sqrt(heartX * heartX + heartY * heartY) / 16 * randomFromRange(this.options.explosionSpeed);
+            particles.push(this.createExplosionParticle(rocket, color, angle, speed * 0.8, 0.08));
+        }
+        return particles;
+    }
+    /** Star burst - concentrated beams */
+    createStarExplosion(rocket, count, color) {
+        const particles = [];
+        const points = 5; // 5-pointed star
+        for (let i = 0; i < count; i++) {
+            const starAngle = (Math.floor(i / (count / points)) / points) * Math.PI * 2;
+            const spreadAngle = starAngle + randomRange(-0.15, 0.15);
+            const speed = randomFromRange(this.options.explosionSpeed) * (0.8 + Math.random() * 0.4);
+            particles.push(this.createExplosionParticle(rocket, color, spreadAngle, speed));
+        }
+        return particles;
+    }
+    /** Willow - heavy gravity, long trails */
+    createWillowExplosion(rocket, count, color) {
+        const particles = [];
+        for (let i = 0; i < count; i++) {
+            const angle = (i / count) * Math.PI * 2 + randomRange(-0.1, 0.1);
+            const speed = randomFromRange(this.options.explosionSpeed) * 0.6;
+            const p = this.createExplosionParticle(rocket, '#ffd700', angle, speed, 0.25); // Gold, high gravity
+            p.maxAge *= 1.5; // Longer life
+            particles.push(p);
+        }
+        return particles;
+    }
+    /** Palm tree - upward bias */
+    createPalmExplosion(rocket, count, color) {
+        const particles = [];
+        for (let i = 0; i < count; i++) {
+            // Bias upward (angles from -60 to 240 degrees, avoiding straight down)
+            const angle = randomRange(-Math.PI * 0.8, Math.PI * 0.8) - Math.PI / 2;
+            const speed = randomFromRange(this.options.explosionSpeed) * (0.7 + Math.random() * 0.6);
+            const p = this.createExplosionParticle(rocket, color, angle, speed, 0.18);
+            p.maxAge *= 1.2;
+            particles.push(p);
+        }
+        return particles;
+    }
+    /** Chrysanthemum - dense spherical burst */
+    createChrysanthemumExplosion(rocket, count, color) {
+        const particles = [];
+        const layers = 3;
+        for (let layer = 0; layer < layers; layer++) {
+            const layerCount = Math.floor(count / layers);
+            const baseSpeed = this.options.explosionSpeed.min +
+                (this.options.explosionSpeed.max - this.options.explosionSpeed.min) * (layer / layers);
+            for (let i = 0; i < layerCount; i++) {
+                const angle = (i / layerCount) * Math.PI * 2 + (layer * 0.3);
+                const speed = baseSpeed + randomRange(-0.5, 0.5);
+                particles.push(this.createExplosionParticle(rocket, color, angle, speed, 0.08));
+            }
+        }
+        return particles;
+    }
+    /** Embers - Slow-falling micro particles (Tàn Lửa Trôi Nhẹ)
+     * Very small particles (0.5-1.5px) with low gravity and high drag
+     */
+    createEmbersExplosion(rocket, count, color) {
+        const particles = [];
+        // More particles for embers effect (1.5x normal count)
+        const emberCount = Math.floor(count * 1.5);
+        for (let i = 0; i < emberCount; i++) {
+            const angle = (i / emberCount) * Math.PI * 2 + randomRange(-0.3, 0.3);
+            // Very slow initial speed
+            const speed = randomFromRange(this.options.explosionSpeed) * 0.3;
+            const particle = {
+                id: generateId(),
+                x: rocket.x + randomRange(-5, 5), // Slight position randomness
+                y: rocket.y + randomRange(-5, 5),
+                vx: Math.cos(angle) * speed,
+                vy: Math.sin(angle) * speed,
+                // Very small particles (0.5 - 1.5 px)
+                size: randomRange(0.5, 1.5),
+                opacity: 1,
+                // Warm ember colors
+                color: this.getEmberColor(color),
+                age: 0,
+                // Long lifetime for slow fade
+                maxAge: randomFromRange(this.options.particleLifetime) * 2,
+                phase: 'explosion',
+                // Very low gravity - particles float
+                gravity: 0.02,
+                stage: rocket.stage + 1
+            };
+            particles.push(particle);
+        }
+        return particles;
+    }
+    /** Double explosion - first explosion creates particles that explode again
+     * Secondary particles are 2-3x smaller than primary
+     */
+    createDoubleExplosion(rocket, count, color) {
+        const particles = [];
+        // First explosion: create fewer, larger particles that will explode again
+        const primaryCount = Math.floor(count * 0.6);
+        for (let i = 0; i < primaryCount; i++) {
+            const angle = (i / primaryCount) * Math.PI * 2 + randomRange(-0.1, 0.1);
+            const speed = randomFromRange(this.options.explosionSpeed) * 0.8;
             const particle = {
                 id: generateId(),
-                element: null,
                 x: rocket.x,
                 y: rocket.y,
                 vx: Math.cos(angle) * speed,
                 vy: Math.sin(angle) * speed,
+                // Normal size for primary particles
                 size: randomFromRange(this.options.particleSize),
                 opacity: 1,
                 color: this.getVariantColor(color),
                 age: 0,
                 maxAge: randomFromRange(this.options.particleLifetime),
                 phase: 'explosion',
-                gravity: this.options.gravity
+                gravity: this.options.gravity,
+                stage: 1 // Mark as stage 1 - will trigger secondary explosion
+            };
+            particles.push(particle);
+        }
+        return particles;
+    }
+    /** Create secondary explosion particles (called when stage 1 particles reach 50% lifetime)
+     * These particles are 2-3x smaller than the originals
+     */
+    explodeSecondary(parent) {
+        const secondaryCount = Math.floor(this.options.particlesPerExplosion * 0.3); // 30% of normal
+        for (let i = 0; i < secondaryCount; i++) {
+            const angle = (i / secondaryCount) * Math.PI * 2 + randomRange(-0.2, 0.2);
+            const speed = randomFromRange(this.options.explosionSpeed) * 0.5;
+            const particle = {
+                id: generateId(),
+                x: parent.x,
+                y: parent.y,
+                vx: Math.cos(angle) * speed,
+                vy: Math.sin(angle) * speed,
+                // Secondary particles are 2-3x smaller!
+                size: Math.max(1, randomFromRange(this.options.particleSize) / randomRange(2, 3)),
+                opacity: 0.9,
+                color: this.getVariantColor(parent.color),
+                age: 0,
+                maxAge: randomFromRange(this.options.particleLifetime) * 0.7, // Shorter lifetime
+                phase: 'explosion',
+                gravity: this.options.gravity * 0.5, // Less gravity
+                stage: 2 // Stage 2 - no more explosions
             };
-            particle.element = this.createParticleElement(particle);
             this.particles.push(particle);
-            if (this.wrapper) {
-                this.wrapper.appendChild(particle.element);
-            }
         }
     }
+    /** Get warm ember color variant */
+    getEmberColor(baseColor) {
+        const emberColors = ['#ffaa00', '#ff6600', '#ff4400', '#ffcc00', '#ff8800', '#ffffff'];
+        if (Math.random() < 0.7) {
+            // 70% chance of ember colors
+            return emberColors[Math.floor(Math.random() * emberColors.length)];
+        }
+        return baseColor;
+    }
+    /** Helper to create a single explosion particle */
+    createExplosionParticle(rocket, color, angle, speed, gravity) {
+        return {
+            id: generateId(),
+            x: rocket.x,
+            y: rocket.y,
+            vx: Math.cos(angle) * speed,
+            vy: Math.sin(angle) * speed,
+            size: randomFromRange(this.options.particleSize),
+            opacity: 1,
+            color: this.getVariantColor(color),
+            age: 0,
+            maxAge: randomFromRange(this.options.particleLifetime),
+            phase: 'explosion',
+            gravity: gravity !== null && gravity !== void 0 ? gravity : this.options.gravity,
+            stage: rocket.stage + 1
+        };
+    }
     getVariantColor(baseColor) {
-        // Sometimes return white or a lighter variant for sparkle effect
         if (Math.random() < 0.2) {
             return '#ffffff';
         }
@@ -939,7 +1283,6 @@ class Fireworks {
         const index = this.particles.indexOf(particle);
         if (index > -1) {
             this.particles.splice(index, 1);
-            particle.element.remove();
         }
     }
     /** Start the fireworks */
@@ -961,10 +1304,10 @@ class Fireworks {
     }
     /** Clear all particles but keep running */
     clear() {
-        for (const particle of this.particles) {
-            particle.element.remove();
-        }
         this.particles = [];
+        if (this.renderer) {
+            this.renderer.clear();
+        }
     }
     /** Launch a single firework manually */
     launch() {
@@ -994,6 +1337,8 @@ class Fireworks {
             this.options.particleLifetime = newOptions.particleLifetime;
         if (newOptions.gravity !== undefined)
             this.options.gravity = newOptions.gravity;
+        if (newOptions.explosionPattern)
+            this.options.explosionPattern = newOptions.explosionPattern;
     }
     /** Get particle count */
     getParticleCount() {
@@ -1007,9 +1352,9 @@ class Fireworks {
     destroy() {
         this.stop();
         this.clear();
-        if (this.wrapper) {
-            this.wrapper.remove();
-            this.wrapper = null;
+        if (this.renderer) {
+            this.renderer.destroy();
+            this.renderer = null;
         }
         if (this.resizeHandler) {
             window.removeEventListener('resize', this.resizeHandler);