@hdcodedev/snowfall 1.0.13 → 1.0.14

package/dist/index.mjs

@@ -1,7 +1,7 @@
 "use client";
 
 // src/components/Snowfall.tsx
-import { useEffect, useRef as useRef4, useState as useState2 } from "react";
+import { useEffect as useEffect2, useRef as useRef4, useState as useState2 } from "react";
 
 // src/components/SnowfallProvider.tsx
 import { createContext, useContext, useState } from "react";
@@ -25,8 +25,9 @@ var DEFAULT_PHYSICS = {
     MAX: 1.6
   },
   MAX_SURFACES: 15,
-  COLLISION_CHECK_RATE: 0.3
+  COLLISION_CHECK_RATE: 0.3,
   // 30% of snowflakes check collisions per frame
+  MAX_RENDER_DPR: 1.25
 };
 var SnowfallContext = createContext(void 0);
 function SnowfallProvider({ children, initialDebug = false, initialEnabled = true }) {
@@ -352,7 +353,7 @@ var updateSnowflakePosition = (flake, dt) => {
   flake.x += (flake.wind + Math.sin(flake.wobble) * 0.5) * dt;
   flake.y += (flake.speed + Math.cos(flake.wobble * 0.5) * 0.1) * dt;
 };
-var checkSideCollision = (flake, flakeViewportX, flakeViewportY, rect, acc, config) => {
+var checkSideCollision = (flakeViewportX, flakeViewportY, rect, acc, config) => {
   const isInVerticalBounds = flakeViewportY >= rect.top && flakeViewportY <= rect.bottom;
   if (!isInVerticalBounds || acc.maxSideHeight <= 0) {
     return false;
@@ -432,7 +433,7 @@ var updateSnowflakes = (snowflakes, elementRects, config, dt, worldWidth, worldH
         const { rect, acc } = item;
         const isBottom = acc.type === VAL_BOTTOM;
         if (!landed && !isBottom) {
-          landed = checkSideCollision(flake, flakeViewportX, flakeViewportY, rect, acc, config);
+          landed = checkSideCollision(flakeViewportX, flakeViewportY, rect, acc, config);
           if (landed) break;
         }
         if (!landed) {
@@ -534,11 +535,11 @@ import { useRef as useRef2, useCallback as useCallback2 } from "react";
 function useSnowfallCanvas() {
   const canvasRef = useRef2(null);
   const dprRef = useRef2(1);
-  const resizeCanvas = useCallback2(() => {
+  const resizeCanvas = useCallback2((maxRenderDpr = Number.POSITIVE_INFINITY) => {
     if (canvasRef.current) {
       const newWidth = window.innerWidth;
       const newHeight = window.innerHeight;
-      const dpr = window.devicePixelRatio || 1;
+      const dpr = Math.min(window.devicePixelRatio || 1, Math.max(1, maxRenderDpr));
       dprRef.current = dpr;
       canvasRef.current.width = newWidth * dpr;
       canvasRef.current.height = newHeight * dpr;
@@ -554,25 +555,46 @@ function useSnowfallCanvas() {
 }
 
 // src/hooks/useAnimationLoop.ts
-import { useRef as useRef3, useCallback as useCallback3 } from "react";
+import { useEffect, useRef as useRef3, useCallback as useCallback3 } from "react";
 
 // src/core/draw.ts
 var ACC_FILL_STYLE = "rgba(255, 255, 255, 0.95)";
 var ACC_SHADOW_COLOR = "rgba(200, 230, 255, 0.6)";
+var OPACITY_BUCKETS2 = [0.3, 0.5, 0.7, 0.9];
 var drawSnowflakes = (ctx, flakes) => {
   if (flakes.length === 0) return;
   ctx.fillStyle = "#FFFFFF";
-  for (const flake of flakes) {
-    if (!flake.isBackground) {
-      ctx.globalAlpha = flake.glowOpacity;
-      ctx.beginPath();
+  for (const alpha of OPACITY_BUCKETS2) {
+    let hasPath = false;
+    for (const flake of flakes) {
+      if (flake.isBackground || flake.glowOpacity !== alpha) continue;
+      if (!hasPath) {
+        ctx.globalAlpha = alpha;
+        ctx.beginPath();
+        hasPath = true;
+      }
+      ctx.moveTo(flake.x + flake.glowRadius, flake.y);
       ctx.arc(flake.x, flake.y, flake.glowRadius, 0, TAU);
+    }
+    if (hasPath) {
+      ctx.fill();
+    }
+  }
+  for (const alpha of OPACITY_BUCKETS2) {
+    let hasPath = false;
+    for (const flake of flakes) {
+      if (flake.opacity !== alpha) continue;
+      if (!hasPath) {
+        ctx.globalAlpha = alpha;
+        ctx.beginPath();
+        hasPath = true;
+      }
+      ctx.moveTo(flake.x + flake.radius, flake.y);
+      ctx.arc(flake.x, flake.y, flake.radius, 0, TAU);
+    }
+    if (hasPath) {
       ctx.fill();
     }
-    ctx.globalAlpha = flake.opacity;
-    ctx.beginPath();
-    ctx.arc(flake.x, flake.y, flake.radius, 0, TAU);
-    ctx.fill();
   }
   ctx.globalAlpha = 1;
 };
@@ -668,9 +690,12 @@ var drawSideAccumulations = (ctx, elementRects, scrollX, scrollY) => {
 // src/hooks/useAnimationLoop.ts
 function useAnimationLoop(params) {
   const animationIdRef = useRef3(0);
+  const animateRef = useRef3(() => {
+  });
   const lastTimeRef = useRef3(0);
   const lastMetricsUpdateRef = useRef3(0);
   const elementRectsRef = useRef3([]);
+  const visibleRectsRef = useRef3([]);
   const dirtyRectsRef = useRef3(true);
   const animate = useCallback3((currentTime) => {
     const {
@@ -688,17 +713,17 @@ function useAnimationLoop(params) {
     } = params;
     const canvas = canvasRef.current;
     if (!canvas) {
-      animationIdRef.current = requestAnimationFrame(animate);
+      animationIdRef.current = requestAnimationFrame(animateRef.current);
       return;
     }
     const ctx = canvas.getContext("2d");
     if (!ctx) {
-      animationIdRef.current = requestAnimationFrame(animate);
+      animationIdRef.current = requestAnimationFrame(animateRef.current);
       return;
     }
     if (lastTimeRef.current === 0) {
       lastTimeRef.current = currentTime;
-      animationIdRef.current = requestAnimationFrame(animate);
+      animationIdRef.current = requestAnimationFrame(animateRef.current);
       return;
     }
     const deltaTime = Math.min(currentTime - lastTimeRef.current, 50);
@@ -707,8 +732,8 @@ function useAnimationLoop(params) {
     metricsRef.current.rafGap = currentTime - lastTimeRef.current;
     lastTimeRef.current = currentTime;
     const dt = deltaTime / 16.67;
-    const frameStartTime = performance.now();
-    const clearStart = performance.now();
+    const frameStartTime = now;
+    const clearStart = now;
     const dpr = dprRef.current;
     ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
     ctx.clearRect(0, 0, canvas.width / dpr, canvas.height / dpr);
@@ -725,30 +750,42 @@ function useAnimationLoop(params) {
     }
     const physicsStart = performance.now();
     meltAndSmoothAccumulation(elementRectsRef.current, physicsConfigRef.current, dt);
+    const docEl = document.documentElement;
+    const worldWidth = docEl.scrollWidth;
+    const worldHeight = docEl.scrollHeight;
     updateSnowflakes(
       snowflakes,
       elementRectsRef.current,
       physicsConfigRef.current,
       dt,
-      document.documentElement.scrollWidth,
-      document.documentElement.scrollHeight
+      worldWidth,
+      worldHeight
     );
     metricsRef.current.physicsTime = performance.now() - physicsStart;
     const drawStart = performance.now();
     drawSnowflakes(ctx, snowflakes);
     if (isEnabledRef.current && snowflakes.length < physicsConfigRef.current.MAX_FLAKES) {
+      const minFlakeFloor = Math.min(80, physicsConfigRef.current.MAX_FLAKES);
+      const shouldForceSpawn = snowflakes.length < minFlakeFloor;
       const currentFps = getCurrentFps();
-      const shouldSpawn = currentFps >= 40 || Math.random() < 0.2;
+      const isVisible = document.visibilityState === "visible";
+      const isUnderFpsThreshold = isVisible && currentFps > 0 && currentFps < 40;
+      const shouldSpawn = shouldForceSpawn || !isUnderFpsThreshold || Math.random() < 0.2;
       if (shouldSpawn) {
         const isBackground = Math.random() < 0.4;
-        snowflakes.push(createSnowflake(document.documentElement.scrollWidth, physicsConfigRef.current, isBackground));
+        snowflakes.push(createSnowflake(worldWidth, physicsConfigRef.current, isBackground));
       }
     }
     const viewportWidth = window.innerWidth;
     const viewportHeight = window.innerHeight;
-    const visibleRects = elementRectsRef.current.filter(
-      ({ rect }) => rect.right >= 0 && rect.left <= viewportWidth && rect.bottom >= 0 && rect.top <= viewportHeight
-    );
+    const visibleRects = visibleRectsRef.current;
+    visibleRects.length = 0;
+    for (const item of elementRectsRef.current) {
+      const { rect } = item;
+      if (rect.right >= 0 && rect.left <= viewportWidth && rect.bottom >= 0 && rect.top <= viewportHeight) {
+        visibleRects.push(item);
+      }
+    }
     if (visibleRects.length > 0) {
       drawAccumulations(ctx, visibleRects, scrollX, scrollY);
       drawSideAccumulations(ctx, visibleRects, scrollX, scrollY);
@@ -763,13 +800,16 @@ function useAnimationLoop(params) {
       ));
       lastMetricsUpdateRef.current = currentTime;
     }
-    animationIdRef.current = requestAnimationFrame(animate);
+    animationIdRef.current = requestAnimationFrame(animateRef.current);
   }, [params]);
+  useEffect(() => {
+    animateRef.current = animate;
+  }, [animate]);
   const start = useCallback3(() => {
     lastTimeRef.current = 0;
     lastMetricsUpdateRef.current = 0;
-    animationIdRef.current = requestAnimationFrame(animate);
-  }, [animate]);
+    animationIdRef.current = requestAnimationFrame(animateRef.current);
+  }, []);
   const stop = useCallback3(() => {
     cancelAnimationFrame(animationIdRef.current);
   }, []);
@@ -809,26 +849,31 @@ function Snowfall() {
     buildMetrics,
     setMetricsRef
   });
-  useEffect(() => {
+  useEffect2(() => {
     requestAnimationFrame(() => setIsMounted(true));
   }, []);
-  useEffect(() => {
+  useEffect2(() => {
     isEnabledRef.current = isEnabled;
   }, [isEnabled]);
-  useEffect(() => {
+  useEffect2(() => {
     physicsConfigRef.current = physicsConfig;
-  }, [physicsConfig]);
-  useEffect(() => {
+    if (isMounted) {
+      resizeCanvas(physicsConfig.MAX_RENDER_DPR);
+    }
+  }, [isMounted, physicsConfig, resizeCanvas]);
+  useEffect2(() => {
     setMetricsRef.current = setMetrics;
   }, [setMetrics]);
-  useEffect(() => {
+  useEffect2(() => {
     if (!isMounted) return;
     const canvas = canvasRef.current;
     if (!canvas) return;
     const ctx = canvas.getContext("2d");
     if (!ctx) return;
-    resizeCanvas();
+    resizeCanvas(physicsConfigRef.current.MAX_RENDER_DPR);
     snowflakesRef.current = [];
+    let isUnmounted = false;
+    let scheduledInitFrame = 0;
     const surfaceObserver = new ResizeObserver((entries) => {
       let needsUpdate = false;
       for (const entry of entries) {
@@ -838,10 +883,11 @@ function Snowfall() {
         }
       }
       if (needsUpdate) {
-        initAccumulationWrapper();
+        scheduleAccumulationInit();
       }
     });
     const initAccumulationWrapper = () => {
+      if (isUnmounted) return;
       const scanStart = performance.now();
       initializeAccumulation(accumulationRef.current, physicsConfigRef.current);
       surfaceObserver.disconnect();
@@ -851,22 +897,25 @@ function Snowfall() {
       metricsRef.current.scanTime = performance.now() - scanStart;
       markRectsDirty();
     };
+    const scheduleAccumulationInit = () => {
+      if (scheduledInitFrame !== 0 || isUnmounted) return;
+      scheduledInitFrame = requestAnimationFrame(() => {
+        scheduledInitFrame = 0;
+        initAccumulationWrapper();
+      });
+    };
     initAccumulationWrapper();
     requestAnimationFrame(() => {
-      if (isMounted) setIsVisible(true);
+      if (!isUnmounted && isMounted) setIsVisible(true);
     });
     startAnimation();
     const handleResize = () => {
-      resizeCanvas();
+      resizeCanvas(physicsConfigRef.current.MAX_RENDER_DPR);
       accumulationRef.current.clear();
       initAccumulationWrapper();
       markRectsDirty();
     };
     window.addEventListener("resize", handleResize);
-    const windowResizeObserver = new ResizeObserver(() => {
-      resizeCanvas();
-    });
-    windowResizeObserver.observe(document.body);
     const mutationObserver = new MutationObserver((mutations) => {
       let hasStructuralChange = false;
       for (const mutation of mutations) {
@@ -876,10 +925,7 @@ function Snowfall() {
         }
       }
       if (hasStructuralChange) {
-        const scanStart = performance.now();
-        initializeAccumulation(accumulationRef.current, physicsConfigRef.current);
-        metricsRef.current.scanTime = performance.now() - scanStart;
-        markRectsDirty();
+        scheduleAccumulationInit();
       }
     });
     mutationObserver.observe(document.body, {
@@ -887,9 +933,12 @@ function Snowfall() {
       subtree: true
     });
     return () => {
+      isUnmounted = true;
+      if (scheduledInitFrame !== 0) {
+        cancelAnimationFrame(scheduledInitFrame);
+      }
       stopAnimation();
       window.removeEventListener("resize", handleResize);
-      windowResizeObserver.disconnect();
       mutationObserver.disconnect();
       surfaceObserver.disconnect();
     };
@@ -916,13 +965,13 @@ function Snowfall() {
 }
 
 // src/components/DebugPanel.tsx
-import { useEffect as useEffect2, useState as useState3 } from "react";
+import { useEffect as useEffect3, useState as useState3 } from "react";
 import { Fragment as Fragment2, jsx as jsx3, jsxs } from "react/jsx-runtime";
 function DebugPanel({ defaultOpen = true }) {
   const { debugMode, toggleDebug, metrics } = useSnowfall();
   const [isMinimized, setIsMinimized] = useState3(!defaultOpen);
   const [copied, setCopied] = useState3(false);
-  useEffect2(() => {
+  useEffect3(() => {
     const handleKeyDown = (e) => {
       if (e.shiftKey && e.key === "D") {
         toggleDebug();