@once-ui-system/core 1.7.10 → 1.7.12

package/dist/components/MatrixFx.js

@@ -58,368 +58,216 @@ const MatrixFx = React.forwardRef(({ speed = 1, colors = ["brand-solid-medium"],
         const ctx = canvas.getContext("2d", { willReadFrequently: true });
         if (!ctx)
             return;
-        // Set canvas size
+        // Set canvas size — skip until the container has layout (0×0 crashes getImageData)
         let canvasWidth = 0;
         let canvasHeight = 0;
-        const updateSize = () => {
+        let initialized = false;
+        let disposed = false;
+        const applySize = () => {
             const rect = container.getBoundingClientRect();
+            if (rect.width <= 0 || rect.height <= 0) {
+                return false;
+            }
             canvasWidth = rect.width;
             canvasHeight = rect.height;
-            canvas.width = rect.width * 2; // 2x for retina
-            canvas.height = rect.height * 2;
+            canvas.width = Math.floor(rect.width * 2);
+            canvas.height = Math.floor(rect.height * 2);
             canvas.style.width = `${rect.width}px`;
             canvas.style.height = `${rect.height}px`;
-            ctx.scale(2, 2); // Scale for retina
+            ctx.setTransform(1, 0, 0, 1, 0, 0);
+            ctx.scale(2, 2);
+            return true;
         };
-        updateSize();
-        window.addEventListener("resize", updateSize);
-        // Parse colors - convert token names to CSS variables
-        const parsedColors = colors.map((color) => {
-            // Get computed value from CSS variable
-            const computedColor = getComputedStyle(container).getPropertyValue(`--${color}`);
-            return computedColor || color;
-        });
-        // Create dot grid with padding to prevent edge gaps during displacement
-        const totalSize = size + spacing;
-        const maxDisplacement = (bulge?.intensity ?? 10) * 2; // Account for max possible displacement
-        const paddedWidth = canvasWidth + maxDisplacement * 2;
-        const paddedHeight = canvasHeight + maxDisplacement * 2;
-        const cols = Math.ceil(paddedWidth / totalSize);
-        const rows = Math.ceil(paddedHeight / totalSize);
-        // Only create new dots if grid doesn't exist or dimensions/size changed
-        let dots = dotsRef.current;
-        let maxDistance = 0;
-        if (dots.length === 0 || dots[0]?.gridSize !== totalSize || dots[0]?.canvasW !== canvasWidth || dots[0]?.canvasH !== canvasHeight) {
-            // Create new dot grid
-            dots = [];
-            for (let row = 0; row < rows; row++) {
-                for (let col = 0; col < cols; col++) {
-                    const x = col * totalSize + size / 2 - maxDisplacement;
-                    const y = row * totalSize + size / 2 - maxDisplacement;
-                    // Calculate distance from reveal origin
-                    let distanceFromOrigin = 0;
-                    const centerX = canvasWidth / 2;
-                    const centerY = canvasHeight / 2;
-                    switch (revealFrom) {
-                        case "center":
-                            const dx = x - centerX;
-                            const dy = y - centerY;
-                            distanceFromOrigin = Math.sqrt(dx * dx + dy * dy);
-                            break;
-                        case "top":
-                            distanceFromOrigin = y;
-                            break;
-                        case "bottom":
-                            distanceFromOrigin = canvasHeight - y;
-                            break;
-                        case "left":
-                            distanceFromOrigin = x;
-                            break;
-                        case "right":
-                            distanceFromOrigin = canvasWidth - x;
-                            break;
-                    }
-                    dots.push({
-                        x,
-                        y,
-                        gridX: col,
-                        gridY: row,
-                        color: parsedColors[Math.floor(Math.random() * parsedColors.length)],
-                        baseOpacity: 0.3 + Math.random() * 0.7,
-                        distanceFromOrigin,
-                        randomOffset: Math.random() * 0.3,
-                        flickerPhase: Math.random() * Math.PI * 2,
-                        flickerSpeed: 0.8 + Math.random() * 0.4,
-                        gridSize: totalSize,
-                        canvasW: canvasWidth,
-                        canvasH: canvasHeight,
-                    });
-                }
-            }
-            // Find max distance for normalization
-            maxDistance = Math.max(...dots.map((d) => d.distanceFromOrigin));
-            dotsRef.current = dots;
-        }
-        else {
-            // Update colors on existing dots
-            dots.forEach((dot) => {
-                dot.color = parsedColors[Math.floor(Math.random() * parsedColors.length)];
-            });
-            maxDistance = Math.max(...dots.map((d) => d.distanceFromOrigin));
-        }
-        // Animation loop
-        const startTime = Date.now();
-        const frameInterval = 1000 / fps; // Target ms per frame
-        // Bulge configuration
-        const bulgeEnabled = !!bulge;
-        const bulgeType = bulge?.type ?? "ripple"; // Default: ripple
-        const bulgeDuration = bulge?.duration ?? 3; // Default: 3 seconds per wave
-        const bulgeIntensity = bulge?.intensity ?? 10; // Default: 10px displacement
-        const bulgeRepeat = bulge?.repeat ?? true; // Default: true
-        const bulgeDelay = bulge?.delay ?? 0; // Default: 0ms
-        // Calculate center point for circular wave
-        const centerX = canvasWidth / 2;
-        const centerY = canvasHeight / 2;
-        const maxRadius = Math.sqrt(centerX * centerX + centerY * centerY);
-        // Cache for static rendering (when animation completes)
-        let cachedImageData = null;
-        // When reduced motion is active, force static rendering after first frame
-        if (!shouldAnimate) {
-            isStaticRef.current = true;
-            mountAnimationCompleteRef.current = true;
-        }
-        const animate = (currentTime = 0) => {
-            // Skip rendering if not visible in viewport
-            if (!isVisibleRef.current) {
-                animationRef.current = requestAnimationFrame(animate);
+        const handleResize = () => {
+            const prevW = canvasWidth;
+            const prevH = canvasHeight;
+            if (!applySize())
                 return;
+            if (initialized && (prevW !== canvasWidth || prevH !== canvasHeight)) {
+                dotsRef.current = [];
+                isStaticRef.current = false;
             }
-            // FPS throttling
-            if (currentTime - lastFrameTimeRef.current < frameInterval) {
-                animationRef.current = requestAnimationFrame(animate);
+        };
+        window.addEventListener("resize", handleResize);
+        const setup = () => {
+            if (disposed || initialized)
                 return;
-            }
-            lastFrameTimeRef.current = currentTime;
-            // If static and we have cached image, just render that and stop animating
-            if (isStaticRef.current && cachedImageData) {
-                ctx.putImageData(cachedImageData, 0, 0);
-                // Don't request another frame - animation is complete
+            if (!applySize())
                 return;
-            }
-            ctx.clearRect(0, 0, canvasWidth, canvasHeight);
-            const time = (Date.now() - startTime) / 1000; // Time in seconds
-            // Calculate circular wave radius (travels from center to edge)
-            let waveProgress = 0;
-            let showBulge = false;
-            let bulgeFadeOut = 1; // Multiplier for fading out bulge effect (1 = full effect, 0 = no effect)
-            if (bulgeEnabled) {
-                const bulgeElapsed = (Date.now() - bulgeStartTimeRef.current) / 1000;
-                const delaySeconds = bulgeDelay / 1000;
-                const totalCycleDuration = bulgeDuration + delaySeconds;
-                const adjustedTime = bulgeElapsed - delaySeconds;
-                const fadeStartPercent = 0.6; // Start fading at 60% of wave duration
-                if (adjustedTime >= 0) {
-                    showBulge = true;
-                    if (bulgeRepeat) {
-                        // Continuous repeating wave
-                        const cycleTime = adjustedTime % totalCycleDuration;
-                        waveProgress = cycleTime < bulgeDuration ? cycleTime / bulgeDuration : 0;
-                        showBulge = cycleTime < bulgeDuration; // Only show during active wave, not delay
-                    }
-                    else {
-                        // Single wave with opacity fade during last 40%
-                        if (adjustedTime <= bulgeDuration) {
-                            waveProgress = adjustedTime / bulgeDuration;
-                            // Start fading opacity at 60% of duration
-                            if (waveProgress >= fadeStartPercent) {
-                                const fadeProgress = (waveProgress - fadeStartPercent) / (1 - fadeStartPercent);
-                                bulgeFadeOut = 1 - fadeProgress; // Fade from 1 to 0
+            initialized = true;
+            // Parse colors - convert token names to CSS variables
+            const parsedColors = colors.map((color) => {
+                const computedColor = getComputedStyle(container).getPropertyValue(`--${color}`);
+                return computedColor || color;
+            });
+            // Create dot grid with padding to prevent edge gaps during displacement
+            const totalSize = size + spacing;
+            const maxDisplacement = (bulge?.intensity ?? 10) * 2;
+            const paddedWidth = canvasWidth + maxDisplacement * 2;
+            const paddedHeight = canvasHeight + maxDisplacement * 2;
+            const cols = Math.ceil(paddedWidth / totalSize);
+            const rows = Math.ceil(paddedHeight / totalSize);
+            let dots = dotsRef.current;
+            let maxDistance = 0;
+            if (dots.length === 0 || dots[0]?.gridSize !== totalSize || dots[0]?.canvasW !== canvasWidth || dots[0]?.canvasH !== canvasHeight) {
+                dots = [];
+                for (let row = 0; row < rows; row++) {
+                    for (let col = 0; col < cols; col++) {
+                        const x = col * totalSize + size / 2 - maxDisplacement;
+                        const y = row * totalSize + size / 2 - maxDisplacement;
+                        let distanceFromOrigin = 0;
+                        const centerX = canvasWidth / 2;
+                        const centerY = canvasHeight / 2;
+                        switch (revealFrom) {
+                            case "center": {
+                                const dx = x - centerX;
+                                const dy = y - centerY;
+                                distanceFromOrigin = Math.sqrt(dx * dx + dy * dy);
+                                break;
                             }
+                            case "top":
+                                distanceFromOrigin = y;
+                                break;
+                            case "bottom":
+                                distanceFromOrigin = canvasHeight - y;
+                                break;
+                            case "left":
+                                distanceFromOrigin = x;
+                                break;
+                            case "right":
+                                distanceFromOrigin = canvasWidth - x;
+                                break;
                         }
-                        else {
-                            waveProgress = 0;
-                            showBulge = false;
-                        }
+                        dots.push({
+                            x,
+                            y,
+                            gridX: col,
+                            gridY: row,
+                            color: parsedColors[Math.floor(Math.random() * parsedColors.length)],
+                            baseOpacity: 0.3 + Math.random() * 0.7,
+                            distanceFromOrigin,
+                            randomOffset: Math.random() * 0.3,
+                            flickerPhase: Math.random() * Math.PI * 2,
+                            flickerSpeed: 0.8 + Math.random() * 0.4,
+                            gridSize: totalSize,
+                            canvasW: canvasWidth,
+                            canvasH: canvasHeight,
+                        });
                     }
                 }
+                maxDistance = dots.length > 0 ? Math.max(...dots.map((d) => d.distanceFromOrigin)) : 0;
+                dotsRef.current = dots;
             }
-            const waveRadius = waveProgress * maxRadius * 1.5; // Travel beyond edges for smooth cycle
-            // For instant trigger, show all dots immediately at full opacity
-            if (trigger === "instant") {
-                // Check if we're in a static state (no flicker, no active bulge)
-                const isCurrentlyStatic = !flicker && (!bulgeEnabled || !showBulge);
-                if (isCurrentlyStatic && isStaticRef.current && cachedImageData) {
-                    // Use cached render
-                    ctx.putImageData(cachedImageData, 0, 0);
+            else {
+                dots.forEach((dot) => {
+                    dot.color = parsedColors[Math.floor(Math.random() * parsedColors.length)];
+                });
+                maxDistance = dots.length > 0 ? Math.max(...dots.map((d) => d.distanceFromOrigin)) : 0;
+            }
+            const startTime = Date.now();
+            const frameInterval = 1000 / fps;
+            const bulgeEnabled = !!bulge;
+            const bulgeType = bulge?.type ?? "ripple";
+            const bulgeDuration = bulge?.duration ?? 3;
+            const bulgeIntensity = bulge?.intensity ?? 10;
+            const bulgeRepeat = bulge?.repeat ?? true;
+            const bulgeDelay = bulge?.delay ?? 0;
+            const centerX = canvasWidth / 2;
+            const centerY = canvasHeight / 2;
+            const maxRadius = Math.sqrt(centerX * centerX + centerY * centerY);
+            let cachedImageData = null;
+            const cacheStaticFrame = () => {
+                if (canvas.width <= 0 || canvas.height <= 0)
+                    return;
+                try {
+                    cachedImageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
                 }
-                else {
-                    // Render dots
-                    dots.forEach((dot) => {
-                        ctx.fillStyle = dot.color;
-                        let opacity = dot.baseOpacity;
-                        // Apply flicker effect if enabled
-                        if (flicker) {
-                            const flickerValue = Math.sin(time * dot.flickerSpeed * 3 + dot.flickerPhase);
-                            const flickerMultiplier = 0.6 + (flickerValue * 0.4); // Oscillate between 0.6 and 1.0
-                            opacity *= flickerMultiplier;
-                        }
-                        // Calculate bulge displacement
-                        let offsetX = 0;
-                        let offsetY = 0;
-                        let sizeMultiplier = 1;
-                        let bulgeOpacity = 1;
-                        if (bulgeEnabled && showBulge) {
-                            if (bulgeType === "ripple") {
-                                // Ripple: circular wave from center
-                                const dx = dot.x - centerX;
-                                const dy = dot.y - centerY;
-                                const distanceFromCenter = Math.sqrt(dx * dx + dy * dy);
-                                const distanceToWave = Math.abs(distanceFromCenter - waveRadius);
-                                const waveWidth = maxRadius * 0.15;
-                                const distanceNorm = distanceToWave / waveWidth;
-                                const waveFactor = Math.exp(-distanceNorm * distanceNorm * 4);
-                                const angle = Math.atan2(dy, dx);
-                                const displacementAmount = waveFactor * bulgeIntensity * bulgeFadeOut;
-                                offsetX = Math.cos(angle) * displacementAmount;
-                                offsetY = Math.sin(angle) * displacementAmount;
-                                sizeMultiplier = 1 + waveFactor * 0.8 * bulgeFadeOut;
-                                const waveOpacity = 0.3 + waveFactor * 0.7;
-                                bulgeOpacity = 1 + (waveOpacity - 1) * bulgeFadeOut;
-                            }
-                            else if (bulgeType === "wave") {
-                                // Wave: Organic S-curve from bottom-left to top-right with rotation
-                                const diagonalLength = Math.sqrt(canvasWidth * canvasWidth + canvasHeight * canvasHeight);
-                                // Start wave off-screen before bottom-left, end off-screen after top-right
-                                const wavePosOnDiagonal = (waveProgress * diagonalLength * 1.4) - (diagonalLength * 0.2);
-                                // Calculate distance along the diagonal (from bottom-left to top-right)
-                                const normalizedX = dot.x / canvasWidth;
-                                const normalizedY = 1 - (dot.y / canvasHeight);
-                                const dotDiagonalPos = (normalizedX + normalizedY) / 2 * diagonalLength;
-                                // Distance from wave front
-                                const distanceToWaveFront = dotDiagonalPos - wavePosOnDiagonal;
-                                const waveWidth = diagonalLength * 0.25;
-                                const distanceNorm = distanceToWaveFront / waveWidth;
-                                // Smooth wave factor with wider influence
-                                const waveFactor = Math.exp(-distanceNorm * distanceNorm * 2.5);
-                                // Create rotating S-curve with multiple frequency components
-                                const perpendicularOffset = normalizedY - normalizedX;
-                                // Primary S-curve that rotates over time
-                                const rotationPhase = waveProgress * Math.PI * 3; // Rotates 1.5 times during animation
-                                const primaryFreq = 3; // Number of S-curves along the wave
-                                const sCurvePrimary = Math.sin(perpendicularOffset * Math.PI * primaryFreq + rotationPhase);
-                                // Secondary curve for complexity (higher frequency, lower amplitude)
-                                const secondaryFreq = 7;
-                                const sCurveSecondary = Math.sin(perpendicularOffset * Math.PI * secondaryFreq - rotationPhase * 1.5) * 0.4;
-                                // Combine curves for organic motion
-                                const sCurveFactor = sCurvePrimary + sCurveSecondary;
-                                // Wave straightens at the edges (distanceNorm affects curve strength)
-                                const curveStrength = 1 - Math.abs(distanceNorm) * 0.5;
-                                const modulatedCurve = sCurveFactor * curveStrength;
-                                // Apply displacement
-                                const baseDisplacement = waveFactor * bulgeIntensity * bulgeFadeOut;
-                                const diagonalAngle = Math.PI / 4;
-                                // Perpendicular displacement creates the S-curve
-                                const perpAngle = diagonalAngle + Math.PI / 2;
-                                offsetX = Math.cos(diagonalAngle) * baseDisplacement + Math.cos(perpAngle) * modulatedCurve * baseDisplacement * 0.8;
-                                offsetY = -Math.sin(diagonalAngle) * baseDisplacement - Math.sin(perpAngle) * modulatedCurve * baseDisplacement * 0.8;
-                                sizeMultiplier = 1 + waveFactor * 0.5 * bulgeFadeOut;
-                                const waveOpacity = 0.4 + waveFactor * 0.6;
-                                bulgeOpacity = 1 + (waveOpacity - 1) * bulgeFadeOut;
-                            }
-                        }
-                        ctx.globalAlpha = opacity * bulgeOpacity;
-                        const adjustedSize = size * sizeMultiplier;
-                        const sizeOffset = (adjustedSize - size) / 2;
-                        ctx.fillRect(dot.x + offsetX - sizeOffset, dot.y + offsetY - sizeOffset, adjustedSize, adjustedSize);
-                    });
-                    // Cache if now static
-                    if (isCurrentlyStatic) {
-                        cachedImageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
-                        isStaticRef.current = true;
-                    }
+                catch {
+                    cachedImageData = null;
                 }
-                ctx.globalAlpha = 1;
-                // Only continue animating if there's something dynamic (flicker or bulge)
-                if (!isCurrentlyStatic) {
+            };
+            // When reduced motion is active, force static rendering after first frame
+            if (!shouldAnimate) {
+                isStaticRef.current = true;
+                mountAnimationCompleteRef.current = true;
+            }
+            const animate = (currentTime = 0) => {
+                if (canvasWidth <= 0 || canvasHeight <= 0) {
                     animationRef.current = requestAnimationFrame(animate);
+                    return;
                 }
-                else {
-                    // Clear the ref so the animation can be restarted
-                    animationRef.current = undefined;
+                // Skip rendering if not visible in viewport
+                if (!isVisibleRef.current) {
+                    animationRef.current = requestAnimationFrame(animate);
+                    return;
                 }
-                return;
-            }
-            // For mount trigger - progressive reveal on load, then static
-            if (trigger === "mount") {
-                if (!mountAnimationCompleteRef.current) {
-                    // Revealing animation with explosive easing
-                    const now = Date.now();
-                    const elapsed = (now - revealStartTimeRef.current) / 1000;
-                    // Cubic easing: starts very slow, then explodes
-                    const revealProgress = Math.pow(elapsed, 3) * speed * 3;
-                    // Check if animation is complete (max offset is ~1.3)
-                    if (revealProgress >= 2.0) {
-                        mountAnimationCompleteRef.current = true;
-                    }
-                    dots.forEach((dot) => {
-                        const normalizedDistance = dot.distanceFromOrigin / maxDistance;
-                        const introOffset = normalizedDistance * 0.8 + dot.randomOffset * 0.5;
-                        let opacity = 0;
-                        if (revealProgress > introOffset) {
-                            const fadeIn = (revealProgress - introOffset) * 8;
-                            opacity = Math.min(1, fadeIn * fadeIn) * dot.baseOpacity;
-                            // Apply flicker effect if enabled
-                            if (flicker) {
-                                const flickerValue = Math.sin(time * dot.flickerSpeed * 3 + dot.flickerPhase);
-                                const flickerMultiplier = 0.6 + (flickerValue * 0.4);
-                                opacity *= flickerMultiplier;
-                            }
+                // FPS throttling
+                if (currentTime - lastFrameTimeRef.current < frameInterval) {
+                    animationRef.current = requestAnimationFrame(animate);
+                    return;
+                }
+                lastFrameTimeRef.current = currentTime;
+                // If static and we have cached image, just render that and stop animating
+                if (isStaticRef.current && cachedImageData) {
+                    ctx.putImageData(cachedImageData, 0, 0);
+                    // Don't request another frame - animation is complete
+                    return;
+                }
+                ctx.clearRect(0, 0, canvasWidth, canvasHeight);
+                const time = (Date.now() - startTime) / 1000; // Time in seconds
+                // Calculate circular wave radius (travels from center to edge)
+                let waveProgress = 0;
+                let showBulge = false;
+                let bulgeFadeOut = 1; // Multiplier for fading out bulge effect (1 = full effect, 0 = no effect)
+                if (bulgeEnabled) {
+                    const bulgeElapsed = (Date.now() - bulgeStartTimeRef.current) / 1000;
+                    const delaySeconds = bulgeDelay / 1000;
+                    const totalCycleDuration = bulgeDuration + delaySeconds;
+                    const adjustedTime = bulgeElapsed - delaySeconds;
+                    const fadeStartPercent = 0.6; // Start fading at 60% of wave duration
+                    if (adjustedTime >= 0) {
+                        showBulge = true;
+                        if (bulgeRepeat) {
+                            // Continuous repeating wave
+                            const cycleTime = adjustedTime % totalCycleDuration;
+                            waveProgress = cycleTime < bulgeDuration ? cycleTime / bulgeDuration : 0;
+                            showBulge = cycleTime < bulgeDuration; // Only show during active wave, not delay
                         }
-                        if (opacity > 0) {
-                            // Calculate bulge displacement
-                            let offsetX = 0;
-                            let offsetY = 0;
-                            let sizeMultiplier = 1;
-                            let bulgeOpacity = 1;
-                            if (bulgeEnabled) {
-                                if (bulgeType === "ripple") {
-                                    const dx = dot.x - centerX;
-                                    const dy = dot.y - centerY;
-                                    const distanceFromCenter = Math.sqrt(dx * dx + dy * dy);
-                                    const distanceToWave = Math.abs(distanceFromCenter - waveRadius);
-                                    const waveWidth = maxRadius * 0.15;
-                                    const distanceNorm = distanceToWave / waveWidth;
-                                    const waveFactor = Math.exp(-distanceNorm * distanceNorm * 4);
-                                    const angle = Math.atan2(dy, dx);
-                                    const displacementAmount = waveFactor * bulgeIntensity;
-                                    offsetX = Math.cos(angle) * displacementAmount;
-                                    offsetY = Math.sin(angle) * displacementAmount;
-                                    sizeMultiplier = 1 + waveFactor * 0.8;
-                                    bulgeOpacity = 0.3 + waveFactor * 0.7;
-                                }
-                                else if (bulgeType === "wave") {
-                                    const diagonalLength = Math.sqrt(canvasWidth * canvasWidth + canvasHeight * canvasHeight);
-                                    const wavePosOnDiagonal = waveProgress * diagonalLength * 1.2;
-                                    const normalizedX = dot.x / canvasWidth;
-                                    const normalizedY = 1 - (dot.y / canvasHeight);
-                                    const dotDiagonalPos = (normalizedX + normalizedY) / 2 * diagonalLength;
-                                    const distanceToWaveFront = dotDiagonalPos - wavePosOnDiagonal;
-                                    const waveWidth = diagonalLength * 0.2;
-                                    const distanceNorm = Math.abs(distanceToWaveFront) / waveWidth;
-                                    const waveFactor = Math.exp(-distanceNorm * distanceNorm * 3);
-                                    const perpendicularOffset = normalizedY - normalizedX;
-                                    const sCurvePhase = perpendicularOffset * Math.PI * 2;
-                                    const sCurveFactor = Math.sin(sCurvePhase + waveProgress * Math.PI * 2);
-                                    const baseDisplacement = waveFactor * bulgeIntensity;
-                                    const diagonalAngle = Math.PI / 4;
-                                    offsetX = Math.cos(diagonalAngle) * baseDisplacement + sCurveFactor * baseDisplacement * 0.5;
-                                    offsetY = -Math.sin(diagonalAngle) * baseDisplacement + sCurveFactor * baseDisplacement * 0.5;
-                                    sizeMultiplier = 1 + waveFactor * 0.6;
-                                    bulgeOpacity = 0.4 + waveFactor * 0.6;
+                        else {
+                            // Single wave with opacity fade during last 40%
+                            if (adjustedTime <= bulgeDuration) {
+                                waveProgress = adjustedTime / bulgeDuration;
+                                // Start fading opacity at 60% of duration
+                                if (waveProgress >= fadeStartPercent) {
+                                    const fadeProgress = (waveProgress - fadeStartPercent) / (1 - fadeStartPercent);
+                                    bulgeFadeOut = 1 - fadeProgress; // Fade from 1 to 0
                                 }
                             }
-                            ctx.fillStyle = dot.color;
-                            ctx.globalAlpha = opacity * bulgeOpacity;
-                            const adjustedSize = size * sizeMultiplier;
-                            const sizeOffset = (adjustedSize - size) / 2;
-                            ctx.fillRect(dot.x + offsetX - sizeOffset, dot.y + offsetY - sizeOffset, adjustedSize, adjustedSize);
+                            else {
+                                waveProgress = 0;
+                                showBulge = false;
+                            }
                         }
-                    });
+                    }
                 }
-                else {
-                    // Animation complete - show all dots with optional flicker
+                const waveRadius = waveProgress * maxRadius * 1.5; // Travel beyond edges for smooth cycle
+                // For instant trigger, show all dots immediately at full opacity
+                if (trigger === "instant") {
+                    // Check if we're in a static state (no flicker, no active bulge)
                     const isCurrentlyStatic = !flicker && (!bulgeEnabled || !showBulge);
                     if (isCurrentlyStatic && isStaticRef.current && cachedImageData) {
-                        // Use cached render for completed static state
+                        // Use cached render
                         ctx.putImageData(cachedImageData, 0, 0);
                     }
                     else {
+                        // Render dots
                         dots.forEach((dot) => {
                             ctx.fillStyle = dot.color;
                             let opacity = dot.baseOpacity;
+                            // Apply flicker effect if enabled
                             if (flicker) {
                                 const flickerValue = Math.sin(time * dot.flickerSpeed * 3 + dot.flickerPhase);
-                                const flickerMultiplier = 0.6 + (flickerValue * 0.4);
+                                const flickerMultiplier = 0.6 + (flickerValue * 0.4); // Oscillate between 0.6 and 1.0
                                 opacity *= flickerMultiplier;
                             }
                             // Calculate bulge displacement
@@ -427,8 +275,9 @@ const MatrixFx = React.forwardRef(({ speed = 1, colors = ["brand-solid-medium"],
                             let offsetY = 0;
                             let sizeMultiplier = 1;
                             let bulgeOpacity = 1;
-                            if (bulgeEnabled) {
+                            if (bulgeEnabled && showBulge) {
                                 if (bulgeType === "ripple") {
+                                    // Ripple: circular wave from center
                                     const dx = dot.x - centerX;
                                     const dy = dot.y - centerY;
                                     const distanceFromCenter = Math.sqrt(dx * dx + dy * dy);
@@ -437,31 +286,52 @@ const MatrixFx = React.forwardRef(({ speed = 1, colors = ["brand-solid-medium"],
                                     const distanceNorm = distanceToWave / waveWidth;
                                     const waveFactor = Math.exp(-distanceNorm * distanceNorm * 4);
                                     const angle = Math.atan2(dy, dx);
-                                    const displacementAmount = waveFactor * bulgeIntensity;
+                                    const displacementAmount = waveFactor * bulgeIntensity * bulgeFadeOut;
                                     offsetX = Math.cos(angle) * displacementAmount;
                                     offsetY = Math.sin(angle) * displacementAmount;
-                                    sizeMultiplier = 1 + waveFactor * 0.8;
-                                    bulgeOpacity = 0.3 + waveFactor * 0.7;
+                                    sizeMultiplier = 1 + waveFactor * 0.8 * bulgeFadeOut;
+                                    const waveOpacity = 0.3 + waveFactor * 0.7;
+                                    bulgeOpacity = 1 + (waveOpacity - 1) * bulgeFadeOut;
                                 }
                                 else if (bulgeType === "wave") {
+                                    // Wave: Organic S-curve from bottom-left to top-right with rotation
                                     const diagonalLength = Math.sqrt(canvasWidth * canvasWidth + canvasHeight * canvasHeight);
-                                    const wavePosOnDiagonal = waveProgress * diagonalLength * 1.2;
+                                    // Start wave off-screen before bottom-left, end off-screen after top-right
+                                    const wavePosOnDiagonal = (waveProgress * diagonalLength * 1.4) - (diagonalLength * 0.2);
+                                    // Calculate distance along the diagonal (from bottom-left to top-right)
                                     const normalizedX = dot.x / canvasWidth;
                                     const normalizedY = 1 - (dot.y / canvasHeight);
                                     const dotDiagonalPos = (normalizedX + normalizedY) / 2 * diagonalLength;
+                                    // Distance from wave front
                                     const distanceToWaveFront = dotDiagonalPos - wavePosOnDiagonal;
-                                    const waveWidth = diagonalLength * 0.2;
-                                    const distanceNorm = Math.abs(distanceToWaveFront) / waveWidth;
-                                    const waveFactor = Math.exp(-distanceNorm * distanceNorm * 3);
+                                    const waveWidth = diagonalLength * 0.25;
+                                    const distanceNorm = distanceToWaveFront / waveWidth;
+                                    // Smooth wave factor with wider influence
+                                    const waveFactor = Math.exp(-distanceNorm * distanceNorm * 2.5);
+                                    // Create rotating S-curve with multiple frequency components
                                     const perpendicularOffset = normalizedY - normalizedX;
-                                    const sCurvePhase = perpendicularOffset * Math.PI * 2;
-                                    const sCurveFactor = Math.sin(sCurvePhase + waveProgress * Math.PI * 2);
-                                    const baseDisplacement = waveFactor * bulgeIntensity;
+                                    // Primary S-curve that rotates over time
+                                    const rotationPhase = waveProgress * Math.PI * 3; // Rotates 1.5 times during animation
+                                    const primaryFreq = 3; // Number of S-curves along the wave
+                                    const sCurvePrimary = Math.sin(perpendicularOffset * Math.PI * primaryFreq + rotationPhase);
+                                    // Secondary curve for complexity (higher frequency, lower amplitude)
+                                    const secondaryFreq = 7;
+                                    const sCurveSecondary = Math.sin(perpendicularOffset * Math.PI * secondaryFreq - rotationPhase * 1.5) * 0.4;
+                                    // Combine curves for organic motion
+                                    const sCurveFactor = sCurvePrimary + sCurveSecondary;
+                                    // Wave straightens at the edges (distanceNorm affects curve strength)
+                                    const curveStrength = 1 - Math.abs(distanceNorm) * 0.5;
+                                    const modulatedCurve = sCurveFactor * curveStrength;
+                                    // Apply displacement
+                                    const baseDisplacement = waveFactor * bulgeIntensity * bulgeFadeOut;
                                     const diagonalAngle = Math.PI / 4;
-                                    offsetX = Math.cos(diagonalAngle) * baseDisplacement + sCurveFactor * baseDisplacement * 0.5;
-                                    offsetY = -Math.sin(diagonalAngle) * baseDisplacement + sCurveFactor * baseDisplacement * 0.5;
-                                    sizeMultiplier = 1 + waveFactor * 0.6;
-                                    bulgeOpacity = 0.4 + waveFactor * 0.6;
+                                    // Perpendicular displacement creates the S-curve
+                                    const perpAngle = diagonalAngle + Math.PI / 2;
+                                    offsetX = Math.cos(diagonalAngle) * baseDisplacement + Math.cos(perpAngle) * modulatedCurve * baseDisplacement * 0.8;
+                                    offsetY = -Math.sin(diagonalAngle) * baseDisplacement - Math.sin(perpAngle) * modulatedCurve * baseDisplacement * 0.8;
+                                    sizeMultiplier = 1 + waveFactor * 0.5 * bulgeFadeOut;
+                                    const waveOpacity = 0.4 + waveFactor * 0.6;
+                                    bulgeOpacity = 1 + (waveOpacity - 1) * bulgeFadeOut;
                                 }
                             }
                             ctx.globalAlpha = opacity * bulgeOpacity;
@@ -471,133 +341,121 @@ const MatrixFx = React.forwardRef(({ speed = 1, colors = ["brand-solid-medium"],
                         });
                         // Cache if now static
                         if (isCurrentlyStatic) {
-                            cachedImageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+                            cacheStaticFrame();
                             isStaticRef.current = true;
                         }
                     }
+                    ctx.globalAlpha = 1;
+                    // Only continue animating if there's something dynamic (flicker or bulge)
+                    if (!isCurrentlyStatic) {
+                        animationRef.current = requestAnimationFrame(animate);
+                    }
+                    else {
+                        // Clear the ref so the animation can be restarted
+                        animationRef.current = undefined;
+                    }
+                    return;
                 }
-                ctx.globalAlpha = 1;
-                // Only continue animating if mount animation is incomplete or there's something dynamic
-                const isCurrentlyStatic = mountAnimationCompleteRef.current && !flicker && (!bulgeEnabled || !showBulge);
-                if (!isCurrentlyStatic) {
-                    animationRef.current = requestAnimationFrame(animate);
-                }
-                else {
-                    // Clear the ref so the animation can be restarted
-                    animationRef.current = undefined;
-                }
-                return;
-            }
-            // For hover, click, and manual triggers with animation
-            if (trigger === "hover" || trigger === "click" || trigger === "manual") {
-                if (isHoveredRef.current) {
-                    // Revealing animation with explosive easing
-                    const now = Date.now();
-                    const elapsed = (now - revealStartTimeRef.current) / 1000;
-                    // Cubic easing: starts very slow, then explodes
-                    const revealProgress = Math.pow(elapsed, 3) * speed * 3;
-                    // Cap progress to prevent infinite growth (max offset is ~1.3)
-                    const cappedProgress = Math.min(revealProgress, 2.0);
-                    // Track maximum progress for reverse animation
-                    maxRevealProgressRef.current = cappedProgress;
-                    dots.forEach((dot) => {
-                        const normalizedDistance = dot.distanceFromOrigin / maxDistance;
-                        const introOffset = normalizedDistance * 0.8 + dot.randomOffset * 0.5; // Much lower threshold
-                        let opacity = 0;
-                        if (cappedProgress > introOffset) {
-                            // Explosive opacity increase
-                            const fadeIn = (cappedProgress - introOffset) * 8; // Faster fade-in
-                            opacity = Math.min(1, fadeIn * fadeIn) * dot.baseOpacity;
-                            // Apply flicker effect if enabled
-                            if (flicker) {
-                                const flickerValue = Math.sin(time * dot.flickerSpeed * 3 + dot.flickerPhase);
-                                const flickerMultiplier = 0.6 + (flickerValue * 0.4); // Oscillate between 0.6 and 1.0
-                                opacity *= flickerMultiplier;
-                            }
+                // For mount trigger - progressive reveal on load, then static
+                if (trigger === "mount") {
+                    if (!mountAnimationCompleteRef.current) {
+                        // Revealing animation with explosive easing
+                        const now = Date.now();
+                        const elapsed = (now - revealStartTimeRef.current) / 1000;
+                        // Cubic easing: starts very slow, then explodes
+                        const revealProgress = Math.pow(elapsed, 3) * speed * 3;
+                        // Check if animation is complete (max offset is ~1.3)
+                        if (revealProgress >= 2.0) {
+                            mountAnimationCompleteRef.current = true;
                         }
-                        if (opacity > 0) {
-                            // Calculate bulge displacement
-                            let offsetX = 0;
-                            let offsetY = 0;
-                            let sizeMultiplier = 1;
-                            let bulgeOpacity = 1;
-                            if (bulgeEnabled) {
-                                if (bulgeType === "ripple") {
-                                    const dx = dot.x - centerX;
-                                    const dy = dot.y - centerY;
-                                    const distanceFromCenter = Math.sqrt(dx * dx + dy * dy);
-                                    const distanceToWave = Math.abs(distanceFromCenter - waveRadius);
-                                    const waveWidth = maxRadius * 0.15;
-                                    const distanceNorm = distanceToWave / waveWidth;
-                                    const waveFactor = Math.exp(-distanceNorm * distanceNorm * 4);
-                                    const angle = Math.atan2(dy, dx);
-                                    const displacementAmount = waveFactor * bulgeIntensity;
-                                    offsetX = Math.cos(angle) * displacementAmount;
-                                    offsetY = Math.sin(angle) * displacementAmount;
-                                    sizeMultiplier = 1 + waveFactor * 0.8;
-                                    bulgeOpacity = 0.3 + waveFactor * 0.7;
+                        dots.forEach((dot) => {
+                            const normalizedDistance = dot.distanceFromOrigin / maxDistance;
+                            const introOffset = normalizedDistance * 0.8 + dot.randomOffset * 0.5;
+                            let opacity = 0;
+                            if (revealProgress > introOffset) {
+                                const fadeIn = (revealProgress - introOffset) * 8;
+                                opacity = Math.min(1, fadeIn * fadeIn) * dot.baseOpacity;
+                                // Apply flicker effect if enabled
+                                if (flicker) {
+                                    const flickerValue = Math.sin(time * dot.flickerSpeed * 3 + dot.flickerPhase);
+                                    const flickerMultiplier = 0.6 + (flickerValue * 0.4);
+                                    opacity *= flickerMultiplier;
                                 }
-                                else if (bulgeType === "wave") {
-                                    const diagonalLength = Math.sqrt(canvasWidth * canvasWidth + canvasHeight * canvasHeight);
-                                    const wavePosOnDiagonal = waveProgress * diagonalLength * 1.2;
-                                    const normalizedX = dot.x / canvasWidth;
-                                    const normalizedY = 1 - (dot.y / canvasHeight);
-                                    const dotDiagonalPos = (normalizedX + normalizedY) / 2 * diagonalLength;
-                                    const distanceToWaveFront = dotDiagonalPos - wavePosOnDiagonal;
-                                    const waveWidth = diagonalLength * 0.2;
-                                    const distanceNorm = Math.abs(distanceToWaveFront) / waveWidth;
-                                    const waveFactor = Math.exp(-distanceNorm * distanceNorm * 3);
-                                    const perpendicularOffset = normalizedY - normalizedX;
-                                    const sCurvePhase = perpendicularOffset * Math.PI * 2;
-                                    const sCurveFactor = Math.sin(sCurvePhase + waveProgress * Math.PI * 2);
-                                    const baseDisplacement = waveFactor * bulgeIntensity;
-                                    const diagonalAngle = Math.PI / 4;
-                                    offsetX = Math.cos(diagonalAngle) * baseDisplacement + sCurveFactor * baseDisplacement * 0.5;
-                                    offsetY = -Math.sin(diagonalAngle) * baseDisplacement + sCurveFactor * baseDisplacement * 0.5;
-                                    sizeMultiplier = 1 + waveFactor * 0.6;
-                                    bulgeOpacity = 0.4 + waveFactor * 0.6;
+                            }
+                            if (opacity > 0) {
+                                // Calculate bulge displacement
+                                let offsetX = 0;
+                                let offsetY = 0;
+                                let sizeMultiplier = 1;
+                                let bulgeOpacity = 1;
+                                if (bulgeEnabled) {
+                                    if (bulgeType === "ripple") {
+                                        const dx = dot.x - centerX;
+                                        const dy = dot.y - centerY;
+                                        const distanceFromCenter = Math.sqrt(dx * dx + dy * dy);
+                                        const distanceToWave = Math.abs(distanceFromCenter - waveRadius);
+                                        const waveWidth = maxRadius * 0.15;
+                                        const distanceNorm = distanceToWave / waveWidth;
+                                        const waveFactor = Math.exp(-distanceNorm * distanceNorm * 4);
+                                        const angle = Math.atan2(dy, dx);
+                                        const displacementAmount = waveFactor * bulgeIntensity;
+                                        offsetX = Math.cos(angle) * displacementAmount;
+                                        offsetY = Math.sin(angle) * displacementAmount;
+                                        sizeMultiplier = 1 + waveFactor * 0.8;
+                                        bulgeOpacity = 0.3 + waveFactor * 0.7;
+                                    }
+                                    else if (bulgeType === "wave") {
+                                        const diagonalLength = Math.sqrt(canvasWidth * canvasWidth + canvasHeight * canvasHeight);
+                                        const wavePosOnDiagonal = waveProgress * diagonalLength * 1.2;
+                                        const normalizedX = dot.x / canvasWidth;
+                                        const normalizedY = 1 - (dot.y / canvasHeight);
+                                        const dotDiagonalPos = (normalizedX + normalizedY) / 2 * diagonalLength;
+                                        const distanceToWaveFront = dotDiagonalPos - wavePosOnDiagonal;
+                                        const waveWidth = diagonalLength * 0.2;
+                                        const distanceNorm = Math.abs(distanceToWaveFront) / waveWidth;
+                                        const waveFactor = Math.exp(-distanceNorm * distanceNorm * 3);
+                                        const perpendicularOffset = normalizedY - normalizedX;
+                                        const sCurvePhase = perpendicularOffset * Math.PI * 2;
+                                        const sCurveFactor = Math.sin(sCurvePhase + waveProgress * Math.PI * 2);
+                                        const baseDisplacement = waveFactor * bulgeIntensity;
+                                        const diagonalAngle = Math.PI / 4;
+                                        offsetX = Math.cos(diagonalAngle) * baseDisplacement + sCurveFactor * baseDisplacement * 0.5;
+                                        offsetY = -Math.sin(diagonalAngle) * baseDisplacement + sCurveFactor * baseDisplacement * 0.5;
+                                        sizeMultiplier = 1 + waveFactor * 0.6;
+                                        bulgeOpacity = 0.4 + waveFactor * 0.6;
+                                    }
                                 }
+                                ctx.fillStyle = dot.color;
+                                ctx.globalAlpha = opacity * bulgeOpacity;
+                                const adjustedSize = size * sizeMultiplier;
+                                const sizeOffset = (adjustedSize - size) / 2;
+                                ctx.fillRect(dot.x + offsetX - sizeOffset, dot.y + offsetY - sizeOffset, adjustedSize, adjustedSize);
                             }
-                            ctx.fillStyle = dot.color;
-                            ctx.globalAlpha = opacity * bulgeOpacity;
-                            const adjustedSize = size * sizeMultiplier;
-                            const sizeOffset = (adjustedSize - size) / 2;
-                            ctx.fillRect(dot.x + offsetX - sizeOffset, dot.y + offsetY - sizeOffset, adjustedSize, adjustedSize);
+                        });
+                    }
+                    else {
+                        // Animation complete - show all dots with optional flicker
+                        const isCurrentlyStatic = !flicker && (!bulgeEnabled || !showBulge);
+                        if (isCurrentlyStatic && isStaticRef.current && cachedImageData) {
+                            // Use cached render for completed static state
+                            ctx.putImageData(cachedImageData, 0, 0);
                         }
-                    });
-                }
-                else {
-                    // Reverse animation when hover ends - only run if there's something to hide
-                    if (hideStartProgressRef.current > 0) {
-                        const elapsed = (Date.now() - hideStartTimeRef.current) / 1000;
-                        // Use quadratic easing for faster hide (power of 2)
-                        const hideSpeed = speed * 6; // Faster to handle max progress of 2.0
-                        const hideProgress = Math.pow(elapsed, 2) * hideSpeed;
-                        // Reverse from the progress we had when hide started
-                        const reverseProgress = Math.max(0, hideStartProgressRef.current - hideProgress);
-                        if (reverseProgress > 0.01) { // Small threshold to ensure completion
-                            // Still have dots to hide
+                        else {
                             dots.forEach((dot) => {
-                                const normalizedDistance = dot.distanceFromOrigin / maxDistance;
-                                const introOffset = normalizedDistance * 0.8 + dot.randomOffset * 0.5;
-                                let opacity = 0;
-                                if (reverseProgress > introOffset) {
-                                    const fadeIn = (reverseProgress - introOffset) * 8;
-                                    opacity = Math.min(1, fadeIn * fadeIn) * dot.baseOpacity;
-                                    // Apply flicker effect if enabled
-                                    if (flicker) {
-                                        const flickerValue = Math.sin(time * dot.flickerSpeed * 3 + dot.flickerPhase);
-                                        const flickerMultiplier = 0.6 + (flickerValue * 0.4);
-                                        opacity *= flickerMultiplier;
-                                    }
+                                ctx.fillStyle = dot.color;
+                                let opacity = dot.baseOpacity;
+                                if (flicker) {
+                                    const flickerValue = Math.sin(time * dot.flickerSpeed * 3 + dot.flickerPhase);
+                                    const flickerMultiplier = 0.6 + (flickerValue * 0.4);
+                                    opacity *= flickerMultiplier;
                                 }
-                                if (opacity > 0) {
-                                    // Calculate bulge displacement
-                                    let offsetX = 0;
-                                    let offsetY = 0;
-                                    let sizeMultiplier = 1;
-                                    let bulgeOpacity = 1;
-                                    if (bulgeEnabled) {
+                                // Calculate bulge displacement
+                                let offsetX = 0;
+                                let offsetY = 0;
+                                let sizeMultiplier = 1;
+                                let bulgeOpacity = 1;
+                                if (bulgeEnabled) {
+                                    if (bulgeType === "ripple") {
                                         const dx = dot.x - centerX;
                                         const dy = dot.y - centerY;
                                         const distanceFromCenter = Math.sqrt(dx * dx + dy * dy);
@@ -607,48 +465,230 @@ const MatrixFx = React.forwardRef(({ speed = 1, colors = ["brand-solid-medium"],
                                         const waveFactor = Math.exp(-distanceNorm * distanceNorm * 4);
                                         const angle = Math.atan2(dy, dx);
                                         const displacementAmount = waveFactor * bulgeIntensity;
-                                        offsetX = Math.cos(angle) * displacementAmount * 0.3;
-                                        offsetY = Math.sin(angle) * displacementAmount * 0.3 - waveFactor * bulgeIntensity;
+                                        offsetX = Math.cos(angle) * displacementAmount;
+                                        offsetY = Math.sin(angle) * displacementAmount;
                                         sizeMultiplier = 1 + waveFactor * 0.8;
                                         bulgeOpacity = 0.3 + waveFactor * 0.7;
                                     }
-                                    ctx.fillStyle = dot.color;
-                                    ctx.globalAlpha = opacity * bulgeOpacity;
-                                    const adjustedSize = size * sizeMultiplier;
-                                    const sizeOffset = (adjustedSize - size) / 2;
-                                    ctx.fillRect(dot.x + offsetX - sizeOffset, dot.y + offsetY - sizeOffset, adjustedSize, adjustedSize);
+                                    else if (bulgeType === "wave") {
+                                        const diagonalLength = Math.sqrt(canvasWidth * canvasWidth + canvasHeight * canvasHeight);
+                                        const wavePosOnDiagonal = waveProgress * diagonalLength * 1.2;
+                                        const normalizedX = dot.x / canvasWidth;
+                                        const normalizedY = 1 - (dot.y / canvasHeight);
+                                        const dotDiagonalPos = (normalizedX + normalizedY) / 2 * diagonalLength;
+                                        const distanceToWaveFront = dotDiagonalPos - wavePosOnDiagonal;
+                                        const waveWidth = diagonalLength * 0.2;
+                                        const distanceNorm = Math.abs(distanceToWaveFront) / waveWidth;
+                                        const waveFactor = Math.exp(-distanceNorm * distanceNorm * 3);
+                                        const perpendicularOffset = normalizedY - normalizedX;
+                                        const sCurvePhase = perpendicularOffset * Math.PI * 2;
+                                        const sCurveFactor = Math.sin(sCurvePhase + waveProgress * Math.PI * 2);
+                                        const baseDisplacement = waveFactor * bulgeIntensity;
+                                        const diagonalAngle = Math.PI / 4;
+                                        offsetX = Math.cos(diagonalAngle) * baseDisplacement + sCurveFactor * baseDisplacement * 0.5;
+                                        offsetY = -Math.sin(diagonalAngle) * baseDisplacement + sCurveFactor * baseDisplacement * 0.5;
+                                        sizeMultiplier = 1 + waveFactor * 0.6;
+                                        bulgeOpacity = 0.4 + waveFactor * 0.6;
+                                    }
                                 }
+                                ctx.globalAlpha = opacity * bulgeOpacity;
+                                const adjustedSize = size * sizeMultiplier;
+                                const sizeOffset = (adjustedSize - size) / 2;
+                                ctx.fillRect(dot.x + offsetX - sizeOffset, dot.y + offsetY - sizeOffset, adjustedSize, adjustedSize);
                             });
+                            // Cache if now static
+                            if (isCurrentlyStatic) {
+                                cacheStaticFrame();
+                                isStaticRef.current = true;
+                            }
                         }
-                        else {
-                            // Hide animation complete, reset progress and clear canvas
-                            hideStartProgressRef.current = 0;
+                    }
+                    ctx.globalAlpha = 1;
+                    // Only continue animating if mount animation is incomplete or there's something dynamic
+                    const isCurrentlyStatic = mountAnimationCompleteRef.current && !flicker && (!bulgeEnabled || !showBulge);
+                    if (!isCurrentlyStatic) {
+                        animationRef.current = requestAnimationFrame(animate);
+                    }
+                    else {
+                        // Clear the ref so the animation can be restarted
+                        animationRef.current = undefined;
+                    }
+                    return;
+                }
+                // For hover, click, and manual triggers with animation
+                if (trigger === "hover" || trigger === "click" || trigger === "manual") {
+                    if (isHoveredRef.current) {
+                        // Revealing animation with explosive easing
+                        const now = Date.now();
+                        const elapsed = (now - revealStartTimeRef.current) / 1000;
+                        // Cubic easing: starts very slow, then explodes
+                        const revealProgress = Math.pow(elapsed, 3) * speed * 3;
+                        // Cap progress to prevent infinite growth (max offset is ~1.3)
+                        const cappedProgress = Math.min(revealProgress, 2.0);
+                        // Track maximum progress for reverse animation
+                        maxRevealProgressRef.current = cappedProgress;
+                        dots.forEach((dot) => {
+                            const normalizedDistance = dot.distanceFromOrigin / maxDistance;
+                            const introOffset = normalizedDistance * 0.8 + dot.randomOffset * 0.5; // Much lower threshold
+                            let opacity = 0;
+                            if (cappedProgress > introOffset) {
+                                // Explosive opacity increase
+                                const fadeIn = (cappedProgress - introOffset) * 8; // Faster fade-in
+                                opacity = Math.min(1, fadeIn * fadeIn) * dot.baseOpacity;
+                                // Apply flicker effect if enabled
+                                if (flicker) {
+                                    const flickerValue = Math.sin(time * dot.flickerSpeed * 3 + dot.flickerPhase);
+                                    const flickerMultiplier = 0.6 + (flickerValue * 0.4); // Oscillate between 0.6 and 1.0
+                                    opacity *= flickerMultiplier;
+                                }
+                            }
+                            if (opacity > 0) {
+                                // Calculate bulge displacement
+                                let offsetX = 0;
+                                let offsetY = 0;
+                                let sizeMultiplier = 1;
+                                let bulgeOpacity = 1;
+                                if (bulgeEnabled) {
+                                    if (bulgeType === "ripple") {
+                                        const dx = dot.x - centerX;
+                                        const dy = dot.y - centerY;
+                                        const distanceFromCenter = Math.sqrt(dx * dx + dy * dy);
+                                        const distanceToWave = Math.abs(distanceFromCenter - waveRadius);
+                                        const waveWidth = maxRadius * 0.15;
+                                        const distanceNorm = distanceToWave / waveWidth;
+                                        const waveFactor = Math.exp(-distanceNorm * distanceNorm * 4);
+                                        const angle = Math.atan2(dy, dx);
+                                        const displacementAmount = waveFactor * bulgeIntensity;
+                                        offsetX = Math.cos(angle) * displacementAmount;
+                                        offsetY = Math.sin(angle) * displacementAmount;
+                                        sizeMultiplier = 1 + waveFactor * 0.8;
+                                        bulgeOpacity = 0.3 + waveFactor * 0.7;
+                                    }
+                                    else if (bulgeType === "wave") {
+                                        const diagonalLength = Math.sqrt(canvasWidth * canvasWidth + canvasHeight * canvasHeight);
+                                        const wavePosOnDiagonal = waveProgress * diagonalLength * 1.2;
+                                        const normalizedX = dot.x / canvasWidth;
+                                        const normalizedY = 1 - (dot.y / canvasHeight);
+                                        const dotDiagonalPos = (normalizedX + normalizedY) / 2 * diagonalLength;
+                                        const distanceToWaveFront = dotDiagonalPos - wavePosOnDiagonal;
+                                        const waveWidth = diagonalLength * 0.2;
+                                        const distanceNorm = Math.abs(distanceToWaveFront) / waveWidth;
+                                        const waveFactor = Math.exp(-distanceNorm * distanceNorm * 3);
+                                        const perpendicularOffset = normalizedY - normalizedX;
+                                        const sCurvePhase = perpendicularOffset * Math.PI * 2;
+                                        const sCurveFactor = Math.sin(sCurvePhase + waveProgress * Math.PI * 2);
+                                        const baseDisplacement = waveFactor * bulgeIntensity;
+                                        const diagonalAngle = Math.PI / 4;
+                                        offsetX = Math.cos(diagonalAngle) * baseDisplacement + sCurveFactor * baseDisplacement * 0.5;
+                                        offsetY = -Math.sin(diagonalAngle) * baseDisplacement + sCurveFactor * baseDisplacement * 0.5;
+                                        sizeMultiplier = 1 + waveFactor * 0.6;
+                                        bulgeOpacity = 0.4 + waveFactor * 0.6;
+                                    }
+                                }
+                                ctx.fillStyle = dot.color;
+                                ctx.globalAlpha = opacity * bulgeOpacity;
+                                const adjustedSize = size * sizeMultiplier;
+                                const sizeOffset = (adjustedSize - size) / 2;
+                                ctx.fillRect(dot.x + offsetX - sizeOffset, dot.y + offsetY - sizeOffset, adjustedSize, adjustedSize);
+                            }
+                        });
+                    }
+                    else {
+                        // Reverse animation when hover ends - only run if there's something to hide
+                        if (hideStartProgressRef.current > 0) {
+                            const elapsed = (Date.now() - hideStartTimeRef.current) / 1000;
+                            // Use quadratic easing for faster hide (power of 2)
+                            const hideSpeed = speed * 6; // Faster to handle max progress of 2.0
+                            const hideProgress = Math.pow(elapsed, 2) * hideSpeed;
+                            // Reverse from the progress we had when hide started
+                            const reverseProgress = Math.max(0, hideStartProgressRef.current - hideProgress);
+                            if (reverseProgress > 0.01) { // Small threshold to ensure completion
+                                // Still have dots to hide
+                                dots.forEach((dot) => {
+                                    const normalizedDistance = dot.distanceFromOrigin / maxDistance;
+                                    const introOffset = normalizedDistance * 0.8 + dot.randomOffset * 0.5;
+                                    let opacity = 0;
+                                    if (reverseProgress > introOffset) {
+                                        const fadeIn = (reverseProgress - introOffset) * 8;
+                                        opacity = Math.min(1, fadeIn * fadeIn) * dot.baseOpacity;
+                                        // Apply flicker effect if enabled
+                                        if (flicker) {
+                                            const flickerValue = Math.sin(time * dot.flickerSpeed * 3 + dot.flickerPhase);
+                                            const flickerMultiplier = 0.6 + (flickerValue * 0.4);
+                                            opacity *= flickerMultiplier;
+                                        }
+                                    }
+                                    if (opacity > 0) {
+                                        // Calculate bulge displacement
+                                        let offsetX = 0;
+                                        let offsetY = 0;
+                                        let sizeMultiplier = 1;
+                                        let bulgeOpacity = 1;
+                                        if (bulgeEnabled) {
+                                            const dx = dot.x - centerX;
+                                            const dy = dot.y - centerY;
+                                            const distanceFromCenter = Math.sqrt(dx * dx + dy * dy);
+                                            const distanceToWave = Math.abs(distanceFromCenter - waveRadius);
+                                            const waveWidth = maxRadius * 0.15;
+                                            const distanceNorm = distanceToWave / waveWidth;
+                                            const waveFactor = Math.exp(-distanceNorm * distanceNorm * 4);
+                                            const angle = Math.atan2(dy, dx);
+                                            const displacementAmount = waveFactor * bulgeIntensity;
+                                            offsetX = Math.cos(angle) * displacementAmount * 0.3;
+                                            offsetY = Math.sin(angle) * displacementAmount * 0.3 - waveFactor * bulgeIntensity;
+                                            sizeMultiplier = 1 + waveFactor * 0.8;
+                                            bulgeOpacity = 0.3 + waveFactor * 0.7;
+                                        }
+                                        ctx.fillStyle = dot.color;
+                                        ctx.globalAlpha = opacity * bulgeOpacity;
+                                        const adjustedSize = size * sizeMultiplier;
+                                        const sizeOffset = (adjustedSize - size) / 2;
+                                        ctx.fillRect(dot.x + offsetX - sizeOffset, dot.y + offsetY - sizeOffset, adjustedSize, adjustedSize);
+                                    }
+                                });
+                            }
+                            else {
+                                // Hide animation complete, reset progress and clear canvas
+                                hideStartProgressRef.current = 0;
+                            }
                         }
                     }
                 }
-            }
-            ctx.globalAlpha = 1;
-            // Only continue animating if there's active animation or dynamic content
-            const hasActiveAnimation = isHoveredRef.current || hideStartProgressRef.current > 0;
-            const hasDynamicContent = flicker || (bulgeEnabled && showBulge);
-            if (hasActiveAnimation || hasDynamicContent) {
-                animationRef.current = requestAnimationFrame(animate);
+                ctx.globalAlpha = 1;
+                // Only continue animating if there's active animation or dynamic content
+                const hasActiveAnimation = isHoveredRef.current || hideStartProgressRef.current > 0;
+                const hasDynamicContent = flicker || (bulgeEnabled && showBulge);
+                if (hasActiveAnimation || hasDynamicContent) {
+                    animationRef.current = requestAnimationFrame(animate);
+                }
+                else {
+                    // Clear the ref so the animation can be restarted
+                    animationRef.current = undefined;
+                }
+            };
+            // Store animate function in ref so it can be restarted
+            animateFnRef.current = animate;
+            animate();
+        };
+        setup();
+        const resizeObserver = new ResizeObserver(() => {
+            if (!initialized) {
+                setup();
             }
             else {
-                // Clear the ref so the animation can be restarted
-                animationRef.current = undefined;
+                handleResize();
             }
-        };
-        // Store animate function in ref so it can be restarted
-        animateFnRef.current = animate;
-        animate();
+        });
+        resizeObserver.observe(container);
         return () => {
-            window.removeEventListener("resize", updateSize);
+            disposed = true;
+            resizeObserver.disconnect();
+            window.removeEventListener("resize", handleResize);
             if (animationRef.current) {
                 cancelAnimationFrame(animationRef.current);
             }
         };
-    }, [colors, size, spacing, speed, revealFrom, trigger, flicker, bulge, fps]);
+    }, [colors, size, spacing, speed, revealFrom, trigger, flicker, bulge, fps, shouldAnimate]);
     // Manual trigger control via `active` prop
     useEffect(() => {
         if (trigger !== "manual")