@hdcodedev/snowfall 1.0.13 → 1.0.14

package/dist/index.d.mts

@@ -23,6 +23,10 @@ interface PhysicsConfig {
     };
     MAX_SURFACES: number;
     COLLISION_CHECK_RATE: number;
+    /**
+     * Optional cap for render DPR. Lower values reduce GPU load on high-DPI displays.
+     */
+    MAX_RENDER_DPR?: number;
 }
 declare const DEFAULT_PHYSICS: PhysicsConfig;
 interface PerformanceMetrics {

package/dist/index.d.ts

@@ -23,6 +23,10 @@ interface PhysicsConfig {
     };
     MAX_SURFACES: number;
     COLLISION_CHECK_RATE: number;
+    /**
+     * Optional cap for render DPR. Lower values reduce GPU load on high-DPI displays.
+     */
+    MAX_RENDER_DPR?: number;
 }
 declare const DEFAULT_PHYSICS: PhysicsConfig;
 interface PerformanceMetrics {

package/dist/index.js

@@ -54,8 +54,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 = (0, import_react.createContext)(void 0);
 function SnowfallProvider({ children, initialDebug = false, initialEnabled = true }) {
@@ -381,7 +382,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;
@@ -461,7 +462,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) {
@@ -563,11 +564,11 @@ var import_react3 = require("react");
 function useSnowfallCanvas() {
   const canvasRef = (0, import_react3.useRef)(null);
   const dprRef = (0, import_react3.useRef)(1);
-  const resizeCanvas = (0, import_react3.useCallback)(() => {
+  const resizeCanvas = (0, import_react3.useCallback)((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;
@@ -588,20 +589,41 @@ var import_react4 = require("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;
 };
@@ -697,9 +719,12 @@ var drawSideAccumulations = (ctx, elementRects, scrollX, scrollY) => {
 // src/hooks/useAnimationLoop.ts
 function useAnimationLoop(params) {
   const animationIdRef = (0, import_react4.useRef)(0);
+  const animateRef = (0, import_react4.useRef)(() => {
+  });
   const lastTimeRef = (0, import_react4.useRef)(0);
   const lastMetricsUpdateRef = (0, import_react4.useRef)(0);
   const elementRectsRef = (0, import_react4.useRef)([]);
+  const visibleRectsRef = (0, import_react4.useRef)([]);
   const dirtyRectsRef = (0, import_react4.useRef)(true);
   const animate = (0, import_react4.useCallback)((currentTime) => {
     const {
@@ -717,17 +742,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);
@@ -736,8 +761,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);
@@ -754,30 +779,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);
@@ -792,13 +829,16 @@ function useAnimationLoop(params) {
       ));
       lastMetricsUpdateRef.current = currentTime;
     }
-    animationIdRef.current = requestAnimationFrame(animate);
+    animationIdRef.current = requestAnimationFrame(animateRef.current);
   }, [params]);
+  (0, import_react4.useEffect)(() => {
+    animateRef.current = animate;
+  }, [animate]);
   const start = (0, import_react4.useCallback)(() => {
     lastTimeRef.current = 0;
     lastMetricsUpdateRef.current = 0;
-    animationIdRef.current = requestAnimationFrame(animate);
-  }, [animate]);
+    animationIdRef.current = requestAnimationFrame(animateRef.current);
+  }, []);
   const stop = (0, import_react4.useCallback)(() => {
     cancelAnimationFrame(animationIdRef.current);
   }, []);
@@ -846,7 +886,10 @@ function Snowfall() {
   }, [isEnabled]);
   (0, import_react5.useEffect)(() => {
     physicsConfigRef.current = physicsConfig;
-  }, [physicsConfig]);
+    if (isMounted) {
+      resizeCanvas(physicsConfig.MAX_RENDER_DPR);
+    }
+  }, [isMounted, physicsConfig, resizeCanvas]);
   (0, import_react5.useEffect)(() => {
     setMetricsRef.current = setMetrics;
   }, [setMetrics]);
@@ -856,8 +899,10 @@ function Snowfall() {
     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) {
@@ -867,10 +912,11 @@ function Snowfall() {
         }
       }
       if (needsUpdate) {
-        initAccumulationWrapper();
+        scheduleAccumulationInit();
       }
     });
     const initAccumulationWrapper = () => {
+      if (isUnmounted) return;
       const scanStart = performance.now();
       initializeAccumulation(accumulationRef.current, physicsConfigRef.current);
       surfaceObserver.disconnect();
@@ -880,22 +926,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) {
@@ -905,10 +954,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, {
@@ -916,9 +962,12 @@ function Snowfall() {
       subtree: true
     });
     return () => {
+      isUnmounted = true;
+      if (scheduledInitFrame !== 0) {
+        cancelAnimationFrame(scheduledInitFrame);
+      }
       stopAnimation();
       window.removeEventListener("resize", handleResize);
-      windowResizeObserver.disconnect();
       mutationObserver.disconnect();
       surfaceObserver.disconnect();
     };