@hdcodedev/snowfall 1.0.10 → 1.0.11

package/dist/index.mjs

@@ -1,9 +1,9 @@
 "use client";
 
-// src/Snowfall.tsx
-import { useEffect, useRef, useState as useState2 } from "react";
+// src/components/Snowfall.tsx
+import { useEffect, useRef as useRef4, useState as useState2 } from "react";
 
-// src/SnowfallProvider.tsx
+// src/components/SnowfallProvider.tsx
 import { createContext, useContext, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 var DEFAULT_PHYSICS = {
@@ -24,7 +24,9 @@ var DEFAULT_PHYSICS = {
     MIN: 0.5,
     MAX: 1.6
   },
-  MAX_SURFACES: 15
+  MAX_SURFACES: 15,
+  COLLISION_CHECK_RATE: 0.3
+  // 30% of snowflakes check collisions per frame
 };
 var SnowfallContext = createContext(void 0);
 function SnowfallProvider({ children, initialDebug = false }) {
@@ -79,7 +81,7 @@ function useSnowfall() {
   return context;
 }
 
-// src/utils/snowfall/constants.ts
+// src/core/constants.ts
 var ATTR_SNOWFALL = "data-snowfall";
 var VAL_IGNORE = "ignore";
 var VAL_TOP = "top";
@@ -90,7 +92,7 @@ var ROLE_BANNER = "banner";
 var ROLE_CONTENTINFO = "contentinfo";
 var TAU = Math.PI * 2;
 
-// src/utils/snowfall/dom.ts
+// src/core/dom.ts
 var BOTTOM_TAGS = [TAG_HEADER];
 var BOTTOM_ROLES = [ROLE_BANNER];
 var AUTO_DETECT_TAGS = [TAG_HEADER, TAG_FOOTER, "article", "section", "aside", "nav"];
@@ -172,7 +174,7 @@ var getElementRects = (accumulationMap) => {
   return elementRects;
 };
 
-// src/utils/snowfall/physics.ts
+// src/core/physics.ts
 var OPACITY_BUCKETS = [0.3, 0.5, 0.7, 0.9];
 var quantizeOpacity = (opacity) => {
   return OPACITY_BUCKETS.reduce(
@@ -219,6 +221,7 @@ var createSnowflake = (worldWidth, config, isBackground = false) => {
   const opacity = quantizeOpacity(rawOpacity);
   const rawGlowOpacity = opacity * 0.2;
   const glowOpacity = quantizeOpacity(rawGlowOpacity);
+  const initialWobble = noise.wobblePhase * TAU;
   return {
     x,
     y: window.scrollY - 5,
@@ -228,7 +231,7 @@ var createSnowflake = (worldWidth, config, isBackground = false) => {
     wind: (noise.wind - 0.5) * profile.windScale,
     opacity,
     glowOpacity,
-    wobble: noise.wobblePhase * TAU,
+    wobble: initialWobble,
     wobbleSpeed: noise.wobbleSpeed * profile.wobbleScale + profile.wobbleBase,
     sizeRatio,
     isBackground
@@ -344,84 +347,101 @@ var accumulateSide = (sideArray, rectHeight, localY, maxSideHeight, borderRadius
   }
   return newMax;
 };
+var updateSnowflakePosition = (flake, dt) => {
+  flake.wobble += flake.wobbleSpeed * 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) => {
+  const isInVerticalBounds = flakeViewportY >= rect.top && flakeViewportY <= rect.bottom;
+  if (!isInVerticalBounds || acc.maxSideHeight <= 0) {
+    return false;
+  }
+  const localY = Math.floor(flakeViewportY - rect.top);
+  const borderRadius = acc.borderRadius;
+  const isInTopCorner = localY < borderRadius;
+  const isInBottomCorner = localY > rect.height - borderRadius;
+  const isCorner = borderRadius > 0 && (isInTopCorner || isInBottomCorner);
+  if (isCorner) {
+    return false;
+  }
+  if (flakeViewportX >= rect.left - 5 && flakeViewportX < rect.left + 3) {
+    acc.leftMax = accumulateSide(acc.leftSide, rect.height, localY, acc.maxSideHeight, borderRadius, config, acc.leftMax);
+    return true;
+  }
+  if (flakeViewportX > rect.right - 3 && flakeViewportX <= rect.right + 5) {
+    acc.rightMax = accumulateSide(acc.rightSide, rect.height, localY, acc.maxSideHeight, borderRadius, config, acc.rightMax);
+    return true;
+  }
+  return false;
+};
+var checkSurfaceCollision = (flake, flakeViewportX, flakeViewportY, rect, acc, isBottom, config) => {
+  if (flakeViewportX < rect.left || flakeViewportX > rect.right) {
+    return false;
+  }
+  const localX = Math.floor(flakeViewportX - rect.left);
+  const currentHeight = acc.heights[localX] || 0;
+  const maxHeight = acc.maxHeights[localX] || 5;
+  const surfaceY = isBottom ? rect.bottom - currentHeight : rect.top - currentHeight;
+  if (flakeViewportY < surfaceY || flakeViewportY >= surfaceY + 10 || currentHeight >= maxHeight) {
+    return false;
+  }
+  const shouldAccumulate2 = isBottom ? Math.random() < 0.15 : true;
+  if (shouldAccumulate2) {
+    const baseSpread = Math.ceil(flake.radius);
+    const spread = baseSpread + Math.floor(Math.random() * 2);
+    const accumRate = isBottom ? config.ACCUMULATION.BOTTOM_RATE : config.ACCUMULATION.TOP_RATE;
+    const centerOffset = Math.floor(Math.random() * 3) - 1;
+    for (let dx = -spread; dx <= spread; dx++) {
+      if (Math.random() < 0.15) continue;
+      const idx = localX + dx + centerOffset;
+      if (idx >= 0 && idx < acc.heights.length) {
+        const dist = Math.abs(dx);
+        const pixelMax = acc.maxHeights[idx] || 5;
+        const normDist = dist / spread;
+        const falloff = (Math.cos(normDist * Math.PI) + 1) / 2;
+        const baseAdd = 0.3 * falloff;
+        const randomFactor = 0.8 + Math.random() * 0.4;
+        const addHeight = baseAdd * randomFactor * accumRate;
+        if (acc.heights[idx] < pixelMax && addHeight > 0) {
+          acc.heights[idx] = Math.min(pixelMax, acc.heights[idx] + addHeight);
+        }
+      }
+    }
+    if (isBottom) {
+      return true;
+    }
+  }
+  return !isBottom;
+};
+var shouldRemoveSnowflake = (flake, landed, worldWidth, worldHeight) => {
+  return landed || flake.y > worldHeight + 10 || flake.x < -20 || flake.x > worldWidth + 20;
+};
 var updateSnowflakes = (snowflakes, elementRects, config, dt, worldWidth, worldHeight) => {
   const scrollX = window.scrollX;
   const scrollY = window.scrollY;
   for (let i = snowflakes.length - 1; i >= 0; i--) {
     const flake = snowflakes[i];
-    flake.wobble += flake.wobbleSpeed * 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;
+    updateSnowflakePosition(flake, dt);
     let landed = false;
-    for (const item of elementRects) {
-      const { rect, acc } = item;
-      const isBottom = acc.type === VAL_BOTTOM;
+    const shouldCheckCollision = Math.random() < config.COLLISION_CHECK_RATE;
+    if (shouldCheckCollision) {
       const flakeViewportX = flake.x - scrollX;
       const flakeViewportY = flake.y - scrollY;
-      const isInVerticalBounds = flakeViewportY >= rect.top && flakeViewportY <= rect.bottom;
-      if (!landed && acc.maxSideHeight > 0 && !isBottom) {
-        if (isInVerticalBounds) {
-          const localY = Math.floor(flakeViewportY - rect.top);
-          const borderRadius = acc.borderRadius;
-          const isInTopCorner = localY < borderRadius;
-          const isInBottomCorner = localY > rect.height - borderRadius;
-          const isCorner = borderRadius > 0 && (isInTopCorner || isInBottomCorner);
-          if (flakeViewportX >= rect.left - 5 && flakeViewportX < rect.left + 3) {
-            if (!isCorner) {
-              acc.leftMax = accumulateSide(acc.leftSide, rect.height, localY, acc.maxSideHeight, borderRadius, config, acc.leftMax);
-              landed = true;
-            }
-          }
-          if (!landed && flakeViewportX > rect.right - 3 && flakeViewportX <= rect.right + 5) {
-            if (!isCorner) {
-              acc.rightMax = accumulateSide(acc.rightSide, rect.height, localY, acc.maxSideHeight, borderRadius, config, acc.rightMax);
-              landed = true;
-            }
-          }
+      for (const item of elementRects) {
+        const { rect, acc } = item;
+        const isBottom = acc.type === VAL_BOTTOM;
+        if (!landed && !isBottom) {
+          landed = checkSideCollision(flake, flakeViewportX, flakeViewportY, rect, acc, config);
           if (landed) break;
         }
-      }
-      if (flakeViewportX >= rect.left && flakeViewportX <= rect.right) {
-        const localX = Math.floor(flakeViewportX - rect.left);
-        const currentHeight = acc.heights[localX] || 0;
-        const maxHeight = acc.maxHeights[localX] || 5;
-        const surfaceY = isBottom ? rect.bottom - currentHeight : rect.top - currentHeight;
-        if (flakeViewportY >= surfaceY && flakeViewportY < surfaceY + 10 && currentHeight < maxHeight) {
-          const shouldAccumulate2 = isBottom ? Math.random() < 0.15 : true;
-          if (shouldAccumulate2) {
-            const baseSpread = Math.ceil(flake.radius);
-            const spread = baseSpread + Math.floor(Math.random() * 2);
-            const accumRate = isBottom ? config.ACCUMULATION.BOTTOM_RATE : config.ACCUMULATION.TOP_RATE;
-            const centerOffset = Math.floor(Math.random() * 3) - 1;
-            for (let dx = -spread; dx <= spread; dx++) {
-              if (Math.random() < 0.15) continue;
-              const idx = localX + dx + centerOffset;
-              if (idx >= 0 && idx < acc.heights.length) {
-                const dist = Math.abs(dx);
-                const pixelMax = acc.maxHeights[idx] || 5;
-                const normDist = dist / spread;
-                const falloff = (Math.cos(normDist * Math.PI) + 1) / 2;
-                const baseAdd = 0.3 * falloff;
-                const randomFactor = 0.8 + Math.random() * 0.4;
-                const addHeight = baseAdd * randomFactor * accumRate;
-                if (acc.heights[idx] < pixelMax && addHeight > 0) {
-                  acc.heights[idx] = Math.min(pixelMax, acc.heights[idx] + addHeight);
-                }
-              }
-            }
-            if (isBottom) {
-              landed = true;
-              break;
-            }
-          }
-          if (!isBottom) {
-            landed = true;
-            break;
-          }
+        if (!landed) {
+          landed = checkSurfaceCollision(flake, flakeViewportX, flakeViewportY, rect, acc, isBottom, config);
+          if (landed) break;
         }
       }
     }
-    if (landed || flake.y > worldHeight + 10 || flake.x < -20 || flake.x > worldWidth + 20) {
+    if (shouldRemoveSnowflake(flake, landed, worldWidth, worldHeight)) {
       snowflakes.splice(i, 1);
     }
   }
@@ -458,7 +478,85 @@ var meltAndSmoothAccumulation = (elementRects, config, dt) => {
   }
 };
 
-// src/utils/snowfall/draw.ts
+// src/hooks/usePerformanceMetrics.ts
+import { useRef, useCallback } from "react";
+function usePerformanceMetrics() {
+  const lastFpsSecondRef = useRef(0);
+  const framesInSecondRef = useRef(0);
+  const currentFpsRef = useRef(0);
+  const metricsRef = useRef({
+    scanTime: 0,
+    rectUpdateTime: 0,
+    frameTime: 0,
+    rafGap: 0,
+    clearTime: 0,
+    physicsTime: 0,
+    drawTime: 0
+  });
+  const updateFps = useCallback((now) => {
+    const currentSecond = Math.floor(now / 1e3);
+    if (currentSecond !== lastFpsSecondRef.current) {
+      currentFpsRef.current = framesInSecondRef.current;
+      framesInSecondRef.current = 1;
+      lastFpsSecondRef.current = currentSecond;
+    } else {
+      framesInSecondRef.current++;
+    }
+  }, []);
+  const getCurrentFps = useCallback(() => {
+    return currentFpsRef.current || framesInSecondRef.current;
+  }, []);
+  const buildMetrics = useCallback((surfaceCount, flakeCount, maxFlakes) => {
+    return {
+      fps: currentFpsRef.current || framesInSecondRef.current,
+      frameTime: metricsRef.current.frameTime,
+      scanTime: metricsRef.current.scanTime,
+      rectUpdateTime: metricsRef.current.rectUpdateTime,
+      surfaceCount,
+      flakeCount,
+      maxFlakes,
+      rafGap: metricsRef.current.rafGap,
+      clearTime: metricsRef.current.clearTime,
+      physicsTime: metricsRef.current.physicsTime,
+      drawTime: metricsRef.current.drawTime
+    };
+  }, []);
+  return {
+    metricsRef,
+    updateFps,
+    getCurrentFps,
+    buildMetrics
+  };
+}
+
+// src/hooks/useSnowfallCanvas.ts
+import { useRef as useRef2, useCallback as useCallback2 } from "react";
+function useSnowfallCanvas() {
+  const canvasRef = useRef2(null);
+  const dprRef = useRef2(1);
+  const resizeCanvas = useCallback2(() => {
+    if (canvasRef.current) {
+      const newWidth = window.innerWidth;
+      const newHeight = window.innerHeight;
+      const dpr = window.devicePixelRatio || 1;
+      dprRef.current = dpr;
+      canvasRef.current.width = newWidth * dpr;
+      canvasRef.current.height = newHeight * dpr;
+      canvasRef.current.style.width = `${newWidth}px`;
+      canvasRef.current.style.height = `${newHeight}px`;
+    }
+  }, []);
+  return {
+    canvasRef,
+    dprRef,
+    resizeCanvas
+  };
+}
+
+// src/hooks/useAnimationLoop.ts
+import { 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 drawSnowflakes = (ctx, flakes) => {
@@ -567,29 +665,149 @@ var drawSideAccumulations = (ctx, elementRects, scrollX, scrollY) => {
   ctx.shadowBlur = 0;
 };
 
-// src/Snowfall.tsx
+// src/hooks/useAnimationLoop.ts
+function useAnimationLoop(params) {
+  const animationIdRef = useRef3(0);
+  const lastTimeRef = useRef3(0);
+  const lastMetricsUpdateRef = useRef3(0);
+  const elementRectsRef = useRef3([]);
+  const dirtyRectsRef = useRef3(true);
+  const animate = useCallback3((currentTime) => {
+    const {
+      canvasRef,
+      dprRef,
+      snowflakesRef,
+      accumulationRef,
+      isEnabledRef,
+      physicsConfigRef,
+      metricsRef,
+      updateFps,
+      getCurrentFps,
+      buildMetrics,
+      setMetricsRef
+    } = params;
+    const canvas = canvasRef.current;
+    if (!canvas) {
+      animationIdRef.current = requestAnimationFrame(animate);
+      return;
+    }
+    const ctx = canvas.getContext("2d");
+    if (!ctx) {
+      animationIdRef.current = requestAnimationFrame(animate);
+      return;
+    }
+    if (lastTimeRef.current === 0) {
+      lastTimeRef.current = currentTime;
+      animationIdRef.current = requestAnimationFrame(animate);
+      return;
+    }
+    const deltaTime = Math.min(currentTime - lastTimeRef.current, 50);
+    const now = performance.now();
+    updateFps(now);
+    metricsRef.current.rafGap = currentTime - lastTimeRef.current;
+    lastTimeRef.current = currentTime;
+    const dt = deltaTime / 16.67;
+    const frameStartTime = performance.now();
+    const clearStart = performance.now();
+    const dpr = dprRef.current;
+    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+    ctx.clearRect(0, 0, canvas.width / dpr, canvas.height / dpr);
+    const scrollX = window.scrollX;
+    const scrollY = window.scrollY;
+    ctx.translate(-scrollX, -scrollY);
+    metricsRef.current.clearTime = performance.now() - clearStart;
+    const snowflakes = snowflakesRef.current;
+    if (dirtyRectsRef.current) {
+      const rectStart = performance.now();
+      elementRectsRef.current = getElementRects(accumulationRef.current);
+      metricsRef.current.rectUpdateTime = performance.now() - rectStart;
+      dirtyRectsRef.current = false;
+    }
+    const physicsStart = performance.now();
+    meltAndSmoothAccumulation(elementRectsRef.current, physicsConfigRef.current, dt);
+    updateSnowflakes(
+      snowflakes,
+      elementRectsRef.current,
+      physicsConfigRef.current,
+      dt,
+      document.documentElement.scrollWidth,
+      document.documentElement.scrollHeight
+    );
+    metricsRef.current.physicsTime = performance.now() - physicsStart;
+    const drawStart = performance.now();
+    drawSnowflakes(ctx, snowflakes);
+    if (isEnabledRef.current && snowflakes.length < physicsConfigRef.current.MAX_FLAKES) {
+      const currentFps = getCurrentFps();
+      const shouldSpawn = currentFps >= 40 || Math.random() < 0.2;
+      if (shouldSpawn) {
+        const isBackground = Math.random() < 0.4;
+        snowflakes.push(createSnowflake(document.documentElement.scrollWidth, 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
+    );
+    if (visibleRects.length > 0) {
+      drawAccumulations(ctx, visibleRects, scrollX, scrollY);
+      drawSideAccumulations(ctx, visibleRects, scrollX, scrollY);
+    }
+    metricsRef.current.drawTime = performance.now() - drawStart;
+    metricsRef.current.frameTime = performance.now() - frameStartTime;
+    if (currentTime - lastMetricsUpdateRef.current > 500) {
+      setMetricsRef.current(buildMetrics(
+        accumulationRef.current.size,
+        snowflakes.length,
+        physicsConfigRef.current.MAX_FLAKES
+      ));
+      lastMetricsUpdateRef.current = currentTime;
+    }
+    animationIdRef.current = requestAnimationFrame(animate);
+  }, [params]);
+  const start = useCallback3(() => {
+    lastTimeRef.current = 0;
+    lastMetricsUpdateRef.current = 0;
+    animationIdRef.current = requestAnimationFrame(animate);
+  }, [animate]);
+  const stop = useCallback3(() => {
+    cancelAnimationFrame(animationIdRef.current);
+  }, []);
+  const markRectsDirty = useCallback3(() => {
+    dirtyRectsRef.current = true;
+  }, []);
+  return {
+    start,
+    stop,
+    markRectsDirty
+  };
+}
+
+// src/components/Snowfall.tsx
 import { Fragment, jsx as jsx2 } from "react/jsx-runtime";
 function Snowfall() {
   const { isEnabled, physicsConfig, setMetrics } = useSnowfall();
-  const isEnabledRef = useRef(isEnabled);
-  const physicsConfigRef = useRef(physicsConfig);
-  const setMetricsRef = useRef(setMetrics);
+  const isEnabledRef = useRef4(isEnabled);
+  const physicsConfigRef = useRef4(physicsConfig);
+  const setMetricsRef = useRef4(setMetrics);
   const [isMounted, setIsMounted] = useState2(false);
   const [isVisible, setIsVisible] = useState2(false);
-  const canvasRef = useRef(null);
-  const snowflakesRef = useRef([]);
-  const accumulationRef = useRef(/* @__PURE__ */ new Map());
-  const animationIdRef = useRef(0);
-  const dprRef = useRef(1);
-  const fpsFrames = useRef([]);
-  const metricsRef = useRef({
-    scanTime: 0,
-    rectUpdateTime: 0,
-    frameTime: 0,
-    rafGap: 0,
-    clearTime: 0,
-    physicsTime: 0,
-    drawTime: 0
+  const snowflakesRef = useRef4([]);
+  const accumulationRef = useRef4(/* @__PURE__ */ new Map());
+  const { canvasRef, dprRef, resizeCanvas } = useSnowfallCanvas();
+  const { metricsRef, updateFps, getCurrentFps, buildMetrics } = usePerformanceMetrics();
+  const { start: startAnimation, stop: stopAnimation, markRectsDirty } = useAnimationLoop({
+    canvasRef,
+    dprRef,
+    snowflakesRef,
+    accumulationRef,
+    isEnabledRef,
+    physicsConfigRef,
+    metricsRef,
+    updateFps,
+    getCurrentFps,
+    buildMetrics,
+    setMetricsRef
   });
   useEffect(() => {
     requestAnimationFrame(() => setIsMounted(true));
@@ -609,23 +827,8 @@ function Snowfall() {
     if (!canvas) return;
     const ctx = canvas.getContext("2d");
     if (!ctx) return;
-    const resizeCanvas = () => {
-      if (canvasRef.current) {
-        const newWidth = window.innerWidth;
-        const newHeight = window.innerHeight;
-        const dpr = window.devicePixelRatio || 1;
-        dprRef.current = dpr;
-        canvasRef.current.width = newWidth * dpr;
-        canvasRef.current.height = newHeight * dpr;
-        canvasRef.current.style.width = `${newWidth}px`;
-        canvasRef.current.style.height = `${newHeight}px`;
-      }
-    };
     resizeCanvas();
-    const windowResizeObserver = new ResizeObserver(() => {
-      resizeCanvas();
-    });
-    windowResizeObserver.observe(document.body);
+    snowflakesRef.current = [];
     const surfaceObserver = new ResizeObserver((entries) => {
       let needsUpdate = false;
       for (const entry of entries) {
@@ -638,7 +841,6 @@ function Snowfall() {
         initAccumulationWrapper();
       }
     });
-    snowflakesRef.current = [];
     const initAccumulationWrapper = () => {
       const scanStart = performance.now();
       initializeAccumulation(accumulationRef.current, physicsConfigRef.current);
@@ -647,103 +849,48 @@ function Snowfall() {
         surfaceObserver.observe(el);
       }
       metricsRef.current.scanTime = performance.now() - scanStart;
+      markRectsDirty();
     };
     initAccumulationWrapper();
     requestAnimationFrame(() => {
       if (isMounted) setIsVisible(true);
     });
-    let lastTime = 0;
-    let lastMetricsUpdate = 0;
-    let elementRects = [];
-    const animate = (currentTime) => {
-      if (lastTime === 0) {
-        lastTime = currentTime;
-        animationIdRef.current = requestAnimationFrame(animate);
-        return;
-      }
-      const deltaTime = Math.min(currentTime - lastTime, 50);
-      const now = performance.now();
-      fpsFrames.current.push(now);
-      fpsFrames.current = fpsFrames.current.filter((t) => now - t < 1e3);
-      metricsRef.current.rafGap = currentTime - lastTime;
-      lastTime = currentTime;
-      const dt = deltaTime / 16.67;
-      const frameStartTime = performance.now();
-      const clearStart = performance.now();
-      const dpr = dprRef.current;
-      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
-      ctx.clearRect(0, 0, canvas.width / dpr, canvas.height / dpr);
-      const scrollX = window.scrollX;
-      const scrollY = window.scrollY;
-      ctx.translate(-scrollX, -scrollY);
-      metricsRef.current.clearTime = performance.now() - clearStart;
-      const snowflakes = snowflakesRef.current;
-      const rectStart = performance.now();
-      elementRects = getElementRects(accumulationRef.current);
-      metricsRef.current.rectUpdateTime = performance.now() - rectStart;
-      const physicsStart = performance.now();
-      meltAndSmoothAccumulation(elementRects, physicsConfigRef.current, dt);
-      updateSnowflakes(
-        snowflakes,
-        elementRects,
-        physicsConfigRef.current,
-        dt,
-        document.documentElement.scrollWidth,
-        document.documentElement.scrollHeight
-      );
-      metricsRef.current.physicsTime = performance.now() - physicsStart;
-      const drawStart = performance.now();
-      drawSnowflakes(ctx, snowflakes);
-      if (isEnabledRef.current && snowflakes.length < physicsConfigRef.current.MAX_FLAKES) {
-        const currentFps = fpsFrames.current.length;
-        const shouldSpawn = currentFps >= 40 || Math.random() < 0.2;
-        if (shouldSpawn) {
-          const isBackground = Math.random() < 0.4;
-          snowflakes.push(createSnowflake(document.documentElement.scrollWidth, physicsConfigRef.current, isBackground));
-        }
-      }
-      const viewportWidth = window.innerWidth;
-      const viewportHeight = window.innerHeight;
-      const visibleRects = elementRects.filter(
-        ({ rect }) => rect.right >= 0 && rect.left <= viewportWidth && rect.bottom >= 0 && rect.top <= viewportHeight
-      );
-      if (visibleRects.length > 0) {
-        drawAccumulations(ctx, visibleRects, scrollX, scrollY);
-        drawSideAccumulations(ctx, visibleRects, scrollX, scrollY);
-      }
-      metricsRef.current.drawTime = performance.now() - drawStart;
-      metricsRef.current.frameTime = performance.now() - frameStartTime;
-      if (currentTime - lastMetricsUpdate > 500) {
-        setMetricsRef.current({
-          fps: fpsFrames.current.length,
-          frameTime: metricsRef.current.frameTime,
-          scanTime: metricsRef.current.scanTime,
-          rectUpdateTime: metricsRef.current.rectUpdateTime,
-          surfaceCount: accumulationRef.current.size,
-          flakeCount: snowflakes.length,
-          maxFlakes: physicsConfigRef.current.MAX_FLAKES,
-          rafGap: metricsRef.current.rafGap,
-          clearTime: metricsRef.current.clearTime,
-          physicsTime: metricsRef.current.physicsTime,
-          drawTime: metricsRef.current.drawTime
-        });
-        lastMetricsUpdate = currentTime;
-      }
-      animationIdRef.current = requestAnimationFrame(animate);
-    };
-    animationIdRef.current = requestAnimationFrame(animate);
+    startAnimation();
     const handleResize = () => {
       resizeCanvas();
       accumulationRef.current.clear();
       initAccumulationWrapper();
+      markRectsDirty();
     };
     window.addEventListener("resize", handleResize);
-    const checkInterval = setInterval(initAccumulationWrapper, 5e3);
+    const windowResizeObserver = new ResizeObserver(() => {
+      resizeCanvas();
+    });
+    windowResizeObserver.observe(document.body);
+    const mutationObserver = new MutationObserver((mutations) => {
+      let hasStructuralChange = false;
+      for (const mutation of mutations) {
+        if (mutation.addedNodes.length > 0 || mutation.removedNodes.length > 0) {
+          hasStructuralChange = true;
+          break;
+        }
+      }
+      if (hasStructuralChange) {
+        const scanStart = performance.now();
+        initializeAccumulation(accumulationRef.current, physicsConfigRef.current);
+        metricsRef.current.scanTime = performance.now() - scanStart;
+        markRectsDirty();
+      }
+    });
+    mutationObserver.observe(document.body, {
+      childList: true,
+      subtree: true
+    });
     return () => {
-      cancelAnimationFrame(animationIdRef.current);
+      stopAnimation();
       window.removeEventListener("resize", handleResize);
-      clearInterval(checkInterval);
       windowResizeObserver.disconnect();
+      mutationObserver.disconnect();
       surfaceObserver.disconnect();
     };
   }, [isMounted]);
@@ -768,7 +915,7 @@ function Snowfall() {
   ) });
 }
 
-// src/DebugPanel.tsx
+// src/components/DebugPanel.tsx
 import { useEffect as useEffect2, useState as useState3 } from "react";
 import { Fragment as Fragment2, jsx as jsx3, jsxs } from "react/jsx-runtime";
 function DebugPanel({ defaultOpen = true }) {