@hdcodedev/snowfall 1.0.4 → 1.0.6

package/dist/index.mjs

@@ -23,15 +23,21 @@ var DEFAULT_PHYSICS = {
   FLAKE_SIZE: {
     MIN: 0.5,
     MAX: 1.6
-  }
+  },
+  MAX_SURFACES: 15
 };
 var SnowfallContext = createContext(void 0);
-function SnowfallProvider({ children }) {
+function SnowfallProvider({ children, initialDebug = false }) {
   const [isEnabled, setIsEnabled] = useState(true);
   const [physicsConfig, setPhysicsConfig] = useState(DEFAULT_PHYSICS);
+  const [debugMode, setDebugMode] = useState(initialDebug);
+  const [metrics, setMetrics] = useState(null);
   const toggleSnow = () => {
     setIsEnabled((prev) => !prev);
   };
+  const toggleDebug = () => {
+    setDebugMode((prev) => !prev);
+  };
   const updatePhysicsConfig = (config) => {
     setPhysicsConfig((prev) => ({
       ...prev,
@@ -58,7 +64,11 @@ function SnowfallProvider({ children }) {
     toggleSnow,
     physicsConfig,
     updatePhysicsConfig,
-    resetPhysics
+    resetPhysics,
+    debugMode,
+    toggleDebug,
+    metrics,
+    setMetrics
   }, children });
 }
 function useSnowfall() {
@@ -75,13 +85,15 @@ var VAL_IGNORE = "ignore";
 var VAL_TOP = "top";
 var VAL_BOTTOM = "bottom";
 var TAG_HEADER = "header";
+var TAG_FOOTER = "footer";
 var ROLE_BANNER = "banner";
+var ROLE_CONTENTINFO = "contentinfo";
 
 // src/utils/snowfall/dom.ts
 var BOTTOM_TAGS = [TAG_HEADER];
 var BOTTOM_ROLES = [ROLE_BANNER];
-var AUTO_DETECT_TAGS = ["header", "footer", "article", "section", "aside", "nav"];
-var AUTO_DETECT_ROLES = ['[role="banner"]', '[role="contentinfo"]', '[role="main"]'];
+var AUTO_DETECT_TAGS = [TAG_HEADER, TAG_FOOTER, "article", "section", "aside", "nav"];
+var AUTO_DETECT_ROLES = [`[role="${ROLE_BANNER}"]`, `[role="${ROLE_CONTENTINFO}"]`, '[role="main"]'];
 var AUTO_DETECT_CLASSES = [
   ".card",
   '[class*="card"]',
@@ -97,21 +109,21 @@ var getElementType = (el) => {
   if (role && BOTTOM_ROLES.includes(role)) return VAL_BOTTOM;
   return VAL_TOP;
 };
-var shouldAccumulate = (el) => {
+var shouldAccumulate = (el, precomputedStyle) => {
   if (el.getAttribute(ATTR_SNOWFALL) === VAL_IGNORE) return false;
   if (el.hasAttribute(ATTR_SNOWFALL)) return true;
-  const styles = window.getComputedStyle(el);
-  const rect = el.getBoundingClientRect();
+  const styles = precomputedStyle || window.getComputedStyle(el);
   const isVisible = styles.display !== "none" && styles.visibility !== "hidden" && parseFloat(styles.opacity) > 0.1;
   if (!isVisible) return false;
   const bgColor = styles.backgroundColor;
   const hasBackground = bgColor !== "rgba(0, 0, 0, 0)" && bgColor !== "transparent";
-  const hasBorder = parseFloat(styles.borderWidth) > 0 || styles.borderStyle !== "none";
+  const hasBorder = parseFloat(styles.borderWidth) > 0 && styles.borderColor !== "transparent" && styles.borderColor !== "rgba(0, 0, 0, 0)" && styles.borderStyle !== "none";
   const hasBoxShadow = styles.boxShadow !== "none";
-  const hasBorderRadius = parseFloat(styles.borderRadius) > 0;
-  return hasBackground || hasBorder || hasBoxShadow || hasBorderRadius;
+  const hasFilter = styles.filter !== "none" && styles.filter.includes("drop-shadow");
+  const hasBackdropFilter = styles.backdropFilter !== "none";
+  return hasBackground || hasBorder || hasBoxShadow || hasFilter || hasBackdropFilter;
 };
-var getAccumulationSurfaces = () => {
+var getAccumulationSurfaces = (maxSurfaces = 5) => {
   const surfaces = [];
   const seen = /* @__PURE__ */ new Set();
   const candidates = document.querySelectorAll(
@@ -122,44 +134,31 @@ var getAccumulationSurfaces = () => {
       ...AUTO_DETECT_CLASSES
     ].join(", ")
   );
-  candidates.forEach((el) => {
-    if (seen.has(el)) return;
-    const rect = el.getBoundingClientRect();
+  for (const el of candidates) {
+    if (surfaces.length >= maxSurfaces) break;
+    if (seen.has(el)) continue;
     const manualOverride = el.getAttribute(ATTR_SNOWFALL);
-    if (manualOverride === VAL_IGNORE) return;
+    if (manualOverride === VAL_IGNORE) continue;
     const isManuallyIncluded = manualOverride !== null;
     const styles = window.getComputedStyle(el);
     const isVisible = styles.display !== "none" && styles.visibility !== "hidden" && parseFloat(styles.opacity) > 0.1;
-    if (!isVisible && !isManuallyIncluded) return;
+    if (!isVisible && !isManuallyIncluded) continue;
+    const rect = el.getBoundingClientRect();
     const hasSize = rect.width >= 100 && rect.height >= 50;
-    if (!hasSize && !isManuallyIncluded) return;
+    if (!hasSize && !isManuallyIncluded) continue;
     const isFullPageWrapper = rect.top <= 10 && rect.height >= window.innerHeight * 0.9;
     const isBottomTag = BOTTOM_TAGS.includes(el.tagName.toLowerCase());
     const isBottomRole = BOTTOM_ROLES.includes(el.getAttribute("role") || "");
     const isBottomSurface = isBottomTag || isBottomRole || manualOverride === VAL_BOTTOM;
-    if (isFullPageWrapper && !isBottomSurface && !isManuallyIncluded) return;
-    let isFixed = false;
-    let currentEl = el;
-    while (currentEl && currentEl !== document.body) {
-      const style = window.getComputedStyle(currentEl);
-      if (style.position === "fixed" || style.position === "sticky") {
-        isFixed = true;
-        break;
-      }
-      currentEl = currentEl.parentElement;
-    }
-    if (shouldAccumulate(el)) {
+    if (isFullPageWrapper && !isBottomSurface && !isManuallyIncluded) continue;
+    if (shouldAccumulate(el, styles)) {
       let type = getElementType(el);
-      if (manualOverride === VAL_BOTTOM) {
-        type = VAL_BOTTOM;
-      } else if (manualOverride === VAL_TOP) {
-        type = VAL_TOP;
-      }
-      surfaces.push({ el, type, isFixed });
+      if (manualOverride === VAL_BOTTOM) type = VAL_BOTTOM;
+      else if (manualOverride === VAL_TOP) type = VAL_TOP;
+      surfaces.push({ el, type });
       seen.add(el);
     }
-  });
-  console.log(`[Snowfall] Auto-detection found ${surfaces.length} surfaces`);
+  }
   return surfaces;
 };
 var getElementRects = (accumulationMap) => {
@@ -167,31 +166,18 @@ var getElementRects = (accumulationMap) => {
   for (const [el, acc] of accumulationMap.entries()) {
     if (!el.isConnected) continue;
     const rect = el.getBoundingClientRect();
-    const absoluteRect = {
-      left: rect.left + window.scrollX,
-      right: rect.right + window.scrollX,
-      top: rect.top + window.scrollY,
-      bottom: rect.bottom + window.scrollY,
-      width: rect.width,
-      height: rect.height,
-      x: rect.x,
-      // Note: these are strictly viewport relative in DOMRect usually, 
-      // but we just need consistent absolute coords for physics
-      y: rect.y,
-      toJSON: rect.toJSON
-    };
-    elementRects.push({ el, rect: absoluteRect, acc });
+    elementRects.push({ el, rect, acc });
   }
   return elementRects;
 };
 
 // src/utils/snowfall/physics.ts
-var createSnowflake = (canvasWidth, config, isBackground = false) => {
+var createSnowflake = (worldWidth, config, isBackground = false) => {
   if (isBackground) {
     const sizeRatio = Math.random();
     const radius = config.FLAKE_SIZE.MIN * 0.6 + sizeRatio * (config.FLAKE_SIZE.MAX - config.FLAKE_SIZE.MIN) * 0.4;
     return {
-      x: Math.random() * canvasWidth,
+      x: Math.random() * worldWidth,
       y: window.scrollY - 5,
       radius,
       speed: radius * 0.3 + Math.random() * 0.2 + 0.2,
@@ -206,7 +192,7 @@ var createSnowflake = (canvasWidth, config, isBackground = false) => {
     const sizeRatio = Math.random();
     const radius = config.FLAKE_SIZE.MIN + sizeRatio * (config.FLAKE_SIZE.MAX - config.FLAKE_SIZE.MIN);
     return {
-      x: Math.random() * canvasWidth,
+      x: Math.random() * worldWidth,
       y: window.scrollY - 5,
       radius,
       speed: radius * 0.5 + Math.random() * 0.3 + 0.5,
@@ -220,20 +206,19 @@ var createSnowflake = (canvasWidth, config, isBackground = false) => {
   }
 };
 var initializeAccumulation = (accumulationMap, config) => {
-  const elements = getAccumulationSurfaces();
+  const elements = getAccumulationSurfaces(config.MAX_SURFACES);
   for (const [el] of accumulationMap.entries()) {
     if (!el.isConnected) {
       accumulationMap.delete(el);
     }
   }
-  elements.forEach(({ el, type, isFixed }) => {
+  elements.forEach(({ el, type }) => {
     const existing = accumulationMap.get(el);
     const rect = el.getBoundingClientRect();
     const width = Math.ceil(rect.width);
     const isBottom = type === VAL_BOTTOM;
     if (existing && existing.heights.length === width) {
       existing.type = type;
-      existing.isFixed = isFixed;
       if (existing.borderRadius !== void 0) {
         const styleBuffer = window.getComputedStyle(el);
         existing.borderRadius = parseFloat(styleBuffer.borderTopLeftRadius) || 0;
@@ -271,8 +256,7 @@ var initializeAccumulation = (accumulationMap, config) => {
       rightSide: existing?.rightSide.length === height ? existing.rightSide : new Array(height).fill(0),
       maxSideHeight: isBottom ? 0 : config.MAX_DEPTH.SIDE,
       borderRadius,
-      type,
-      isFixed
+      type
     });
   });
 };
@@ -291,30 +275,35 @@ var accumulateSide = (sideArray, rectHeight, localY, maxSideHeight, borderRadius
     }
   }
 };
-var updateSnowflakes = (snowflakes, elementRects, config, dt, canvasWidth, canvasHeight) => {
+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;
     let landed = false;
-    for (const { rect, acc } of elementRects) {
+    for (const item of elementRects) {
+      const { rect, acc } = item;
       const isBottom = acc.type === VAL_BOTTOM;
+      const flakeViewportX = flake.x - scrollX;
+      const flakeViewportY = flake.y - scrollY;
+      const isInVerticalBounds = flakeViewportY >= rect.top && flakeViewportY <= rect.bottom;
       if (!landed && acc.maxSideHeight > 0 && !isBottom) {
-        const isInVerticalBounds = flake.y >= rect.top && flake.y <= rect.bottom;
         if (isInVerticalBounds) {
-          const localY = Math.floor(flake.y - rect.top);
+          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 (flake.x >= rect.left - 5 && flake.x < rect.left + 3) {
+          if (flakeViewportX >= rect.left - 5 && flakeViewportX < rect.left + 3) {
             if (!isCorner) {
               accumulateSide(acc.leftSide, rect.height, localY, acc.maxSideHeight, borderRadius, config);
               landed = true;
             }
           }
-          if (!landed && flake.x > rect.right - 3 && flake.x <= rect.right + 5) {
+          if (!landed && flakeViewportX > rect.right - 3 && flakeViewportX <= rect.right + 5) {
             if (!isCorner) {
               accumulateSide(acc.rightSide, rect.height, localY, acc.maxSideHeight, borderRadius, config);
               landed = true;
@@ -323,12 +312,12 @@ var updateSnowflakes = (snowflakes, elementRects, config, dt, canvasWidth, canva
           if (landed) break;
         }
       }
-      if (flake.x >= rect.left && flake.x <= rect.right) {
-        const localX = Math.floor(flake.x - rect.left);
+      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 (flake.y >= surfaceY && flake.y < surfaceY + 10 && currentHeight < maxHeight) {
+        if (flakeViewportY >= surfaceY && flakeViewportY < surfaceY + 10 && currentHeight < maxHeight) {
           const shouldAccumulate2 = isBottom ? Math.random() < 0.15 : true;
           if (shouldAccumulate2) {
             const baseSpread = Math.ceil(flake.radius);
@@ -363,7 +352,7 @@ var updateSnowflakes = (snowflakes, elementRects, config, dt, canvasWidth, canva
         }
       }
     }
-    if (landed || flake.y > canvasHeight + 10 || flake.x < -20 || flake.x > canvasWidth + 20) {
+    if (landed || flake.y > worldHeight + 10 || flake.x < -20 || flake.x > worldWidth + 20) {
       snowflakes.splice(i, 1);
     }
   }
@@ -401,7 +390,7 @@ var drawSnowflake = (ctx, flake) => {
   ctx.fillStyle = `rgba(255, 255, 255, ${flake.opacity * 0.2})`;
   ctx.fill();
 };
-var drawAccumulations = (ctx, fixedCtx, elementRects) => {
+var drawAccumulations = (ctx, elementRects) => {
   const setupCtx = (c) => {
     c.fillStyle = "rgba(255, 255, 255, 0.95)";
     c.shadowColor = "rgba(200, 230, 255, 0.6)";
@@ -409,15 +398,13 @@ var drawAccumulations = (ctx, fixedCtx, elementRects) => {
     c.shadowOffsetY = -1;
   };
   setupCtx(ctx);
-  if (fixedCtx) setupCtx(fixedCtx);
-  const scrollX = window.scrollX;
-  const scrollY = window.scrollY;
-  for (const { rect, acc } of elementRects) {
+  const currentScrollX = window.scrollX;
+  const currentScrollY = window.scrollY;
+  for (const item of elementRects) {
+    const { rect, acc } = item;
     if (!acc.heights.some((h) => h > 0.1)) continue;
-    const useFixed = acc.isFixed && fixedCtx;
-    const targetCtx = useFixed ? fixedCtx : ctx;
-    const dx = useFixed ? -scrollX : 0;
-    const dy = useFixed ? -scrollY : 0;
+    const dx = currentScrollX;
+    const dy = currentScrollY;
     const isBottom = acc.type === VAL_BOTTOM;
     const baseY = isBottom ? rect.bottom - 1 : rect.top + 1;
     const borderRadius = acc.borderRadius;
@@ -433,7 +420,7 @@ var drawAccumulations = (ctx, fixedCtx, elementRects) => {
       }
       return offset;
     };
-    targetCtx.beginPath();
+    ctx.beginPath();
     let first = true;
     const step = 2;
     const len = acc.heights.length;
@@ -442,10 +429,10 @@ var drawAccumulations = (ctx, fixedCtx, elementRects) => {
       const px = rect.left + x + dx;
       const py = baseY - height + getCurveOffset(x) + dy;
       if (first) {
-        targetCtx.moveTo(px, py);
+        ctx.moveTo(px, py);
         first = false;
       } else {
-        targetCtx.lineTo(px, py);
+        ctx.lineTo(px, py);
       }
     }
     if ((len - 1) % step !== 0) {
@@ -453,50 +440,44 @@ var drawAccumulations = (ctx, fixedCtx, elementRects) => {
       const height = acc.heights[x] || 0;
       const px = rect.left + x + dx;
       const py = baseY - height + getCurveOffset(x) + dy;
-      targetCtx.lineTo(px, py);
+      ctx.lineTo(px, py);
     }
     for (let x = len - 1; x >= 0; x -= step) {
       const px = rect.left + x + dx;
       const py = baseY + getCurveOffset(x) + dy;
-      targetCtx.lineTo(px, py);
+      ctx.lineTo(px, py);
     }
     const startX = 0;
     const startPx = rect.left + startX + dx;
     const startPy = baseY + getCurveOffset(startX) + dy;
-    targetCtx.lineTo(startPx, startPy);
-    targetCtx.closePath();
-    targetCtx.fill();
+    ctx.lineTo(startPx, startPy);
+    ctx.closePath();
+    ctx.fill();
   }
   ctx.shadowBlur = 0;
   ctx.shadowOffsetY = 0;
-  if (fixedCtx) {
-    fixedCtx.shadowBlur = 0;
-    fixedCtx.shadowOffsetY = 0;
-  }
 };
-var drawSideAccumulations = (ctx, fixedCtx, elementRects) => {
+var drawSideAccumulations = (ctx, elementRects) => {
   const setupCtx = (c) => {
     c.fillStyle = "rgba(255, 255, 255, 0.95)";
     c.shadowColor = "rgba(200, 230, 255, 0.6)";
     c.shadowBlur = 3;
   };
   setupCtx(ctx);
-  if (fixedCtx) setupCtx(fixedCtx);
-  const scrollX = window.scrollX;
-  const scrollY = window.scrollY;
-  for (const { rect, acc } of elementRects) {
+  const currentScrollX = window.scrollX;
+  const currentScrollY = window.scrollY;
+  for (const item of elementRects) {
+    const { rect, acc } = item;
     if (acc.maxSideHeight === 0) continue;
     const hasLeftSnow = acc.leftSide.some((h) => h > 0.3);
     const hasRightSnow = acc.rightSide.some((h) => h > 0.3);
     if (!hasLeftSnow && !hasRightSnow) continue;
-    const useFixed = acc.isFixed && fixedCtx;
-    const targetCtx = useFixed ? fixedCtx : ctx;
-    const dx = useFixed ? -scrollX : 0;
-    const dy = useFixed ? -scrollY : 0;
+    const dx = currentScrollX;
+    const dy = currentScrollY;
     const drawSide = (sideArray, isLeft) => {
-      targetCtx.beginPath();
+      ctx.beginPath();
       const baseX = isLeft ? rect.left : rect.right;
-      targetCtx.moveTo(baseX + dx, rect.top + dy);
+      ctx.moveTo(baseX + dx, rect.top + dy);
       for (let y = 0; y < sideArray.length; y += 2) {
         const width = sideArray[y] || 0;
         const nextY = Math.min(y + 2, sideArray.length - 1);
@@ -509,33 +490,42 @@ var drawSideAccumulations = (ctx, fixedCtx, elementRects) => {
         const nRatio = nextY / sideArray.length;
         const nGravityMultiplier = Math.pow(nRatio, 1.5);
         const nx = (isLeft ? baseX - nextWidth * nGravityMultiplier : baseX + nextWidth * nGravityMultiplier) + dx;
-        targetCtx.lineTo(px, py);
-        targetCtx.lineTo(nx, ny);
+        ctx.lineTo(px, py);
+        ctx.lineTo(nx, ny);
       }
-      targetCtx.lineTo(baseX + dx, rect.bottom + dy);
-      targetCtx.closePath();
-      targetCtx.fill();
+      ctx.lineTo(baseX + dx, rect.bottom + dy);
+      ctx.closePath();
+      ctx.fill();
     };
     if (hasLeftSnow) drawSide(acc.leftSide, true);
     if (hasRightSnow) drawSide(acc.rightSide, false);
   }
   ctx.shadowBlur = 0;
-  if (fixedCtx) fixedCtx.shadowBlur = 0;
 };
 
 // src/Snowfall.tsx
-import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx as jsx2 } from "react/jsx-runtime";
 function Snowfall() {
-  const { isEnabled, physicsConfig } = useSnowfall();
+  const { isEnabled, physicsConfig, setMetrics } = useSnowfall();
   const isEnabledRef = useRef(isEnabled);
   const physicsConfigRef = useRef(physicsConfig);
+  const setMetricsRef = useRef(setMetrics);
   const [isMounted, setIsMounted] = useState2(false);
   const [isVisible, setIsVisible] = useState2(false);
   const canvasRef = useRef(null);
-  const fixedCanvasRef = useRef(null);
   const snowflakesRef = useRef([]);
   const accumulationRef = useRef(/* @__PURE__ */ new Map());
   const animationIdRef = useRef(0);
+  const fpsFrames = useRef([]);
+  const metricsRef = useRef({
+    scanTime: 0,
+    rectUpdateTime: 0,
+    frameTime: 0,
+    rafGap: 0,
+    clearTime: 0,
+    physicsTime: 0,
+    drawTime: 0
+  });
   useEffect(() => {
     setIsMounted(true);
   }, []);
@@ -545,40 +535,58 @@ function Snowfall() {
   useEffect(() => {
     physicsConfigRef.current = physicsConfig;
   }, [physicsConfig]);
+  useEffect(() => {
+    setMetricsRef.current = setMetrics;
+  }, [setMetrics]);
   useEffect(() => {
     if (!isMounted) return;
     const canvas = canvasRef.current;
-    const fixedCanvas = fixedCanvasRef.current;
-    if (!canvas || !fixedCanvas) return;
+    if (!canvas) return;
     const ctx = canvas.getContext("2d");
-    const fixedCtx = fixedCanvas.getContext("2d");
-    if (!ctx || !fixedCtx) return;
+    if (!ctx) return;
     const resizeCanvas = () => {
-      if (canvasRef.current && fixedCanvasRef.current) {
-        const newHeight = Math.max(document.documentElement.scrollHeight, window.innerHeight);
-        const newWidth = Math.max(document.documentElement.scrollWidth, window.innerWidth);
-        if (canvasRef.current.height !== newHeight || canvasRef.current.width !== newWidth) {
-          canvasRef.current.width = newWidth;
-          canvasRef.current.height = newHeight;
-        }
-        if (fixedCanvasRef.current.width !== window.innerWidth || fixedCanvasRef.current.height !== window.innerHeight) {
-          fixedCanvasRef.current.width = window.innerWidth;
-          fixedCanvasRef.current.height = window.innerHeight;
-        }
+      if (canvasRef.current) {
+        const newWidth = window.innerWidth;
+        const newHeight = window.innerHeight;
+        const dpr = window.devicePixelRatio || 1;
+        canvasRef.current.width = newWidth * dpr;
+        canvasRef.current.height = newHeight * dpr;
+        canvasRef.current.style.width = `${newWidth}px`;
+        canvasRef.current.style.height = `${newHeight}px`;
       }
     };
     resizeCanvas();
-    const resizeObserver = new ResizeObserver(() => {
+    const windowResizeObserver = new ResizeObserver(() => {
       resizeCanvas();
     });
-    resizeObserver.observe(document.body);
+    windowResizeObserver.observe(document.body);
+    const surfaceObserver = new ResizeObserver((entries) => {
+      let needsUpdate = false;
+      for (const entry of entries) {
+        if (entry.target.isConnected) {
+          needsUpdate = true;
+          break;
+        }
+      }
+      if (needsUpdate) {
+        initAccumulationWrapper();
+      }
+    });
     snowflakesRef.current = [];
     const initAccumulationWrapper = () => {
+      const scanStart = performance.now();
       initializeAccumulation(accumulationRef.current, physicsConfigRef.current);
+      surfaceObserver.disconnect();
+      for (const [el] of accumulationRef.current) {
+        surfaceObserver.observe(el);
+      }
+      metricsRef.current.scanTime = performance.now() - scanStart;
     };
     initAccumulationWrapper();
     setIsVisible(true);
     let lastTime = 0;
+    let lastMetricsUpdate = 0;
+    let elementRects = [];
     const animate = (currentTime) => {
       if (lastTime === 0) {
         lastTime = currentTime;
@@ -586,23 +594,64 @@ function Snowfall() {
         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;
-      ctx.clearRect(0, 0, canvas.width, canvas.height);
-      fixedCtx.clearRect(0, 0, fixedCanvas.width, fixedCanvas.height);
+      const frameStartTime = performance.now();
+      const clearStart = performance.now();
+      const dpr = window.devicePixelRatio || 1;
+      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 elementRects = getElementRects(accumulationRef.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, canvas.width, canvas.height);
+      updateSnowflakes(
+        snowflakes,
+        elementRects,
+        physicsConfigRef.current,
+        dt,
+        document.documentElement.scrollWidth,
+        document.documentElement.scrollHeight
+      );
+      metricsRef.current.physicsTime = performance.now() - physicsStart;
+      const drawStart = performance.now();
       for (const flake of snowflakes) {
         drawSnowflake(ctx, flake);
       }
       if (isEnabledRef.current && snowflakes.length < physicsConfigRef.current.MAX_FLAKES) {
         const isBackground = Math.random() < 0.4;
-        snowflakes.push(createSnowflake(canvas.width, physicsConfigRef.current, isBackground));
+        snowflakes.push(createSnowflake(document.documentElement.scrollWidth, physicsConfigRef.current, isBackground));
+      }
+      drawAccumulations(ctx, elementRects);
+      drawSideAccumulations(ctx, elementRects);
+      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;
       }
-      drawAccumulations(ctx, fixedCtx, elementRects);
-      drawSideAccumulations(ctx, fixedCtx, elementRects);
       animationIdRef.current = requestAnimationFrame(animate);
     };
     animationIdRef.current = requestAnimationFrame(animate);
@@ -612,52 +661,266 @@ function Snowfall() {
       initAccumulationWrapper();
     };
     window.addEventListener("resize", handleResize);
-    const checkInterval = setInterval(initAccumulationWrapper, 3e3);
+    const checkInterval = setInterval(initAccumulationWrapper, 5e3);
     return () => {
       cancelAnimationFrame(animationIdRef.current);
       window.removeEventListener("resize", handleResize);
       clearInterval(checkInterval);
-      resizeObserver.disconnect();
+      windowResizeObserver.disconnect();
+      surfaceObserver.disconnect();
     };
   }, [isMounted]);
   if (!isMounted) return null;
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx2(
-      "canvas",
-      {
-        ref: canvasRef,
-        style: {
-          position: "absolute",
-          top: 0,
-          left: 0,
-          pointerEvents: "none",
-          zIndex: 9999,
-          opacity: isVisible ? 1 : 0,
-          transition: "opacity 0.3s ease-in"
-        },
-        "aria-hidden": "true"
-      }
-    ),
-    /* @__PURE__ */ jsx2(
-      "canvas",
-      {
-        ref: fixedCanvasRef,
-        style: {
-          position: "fixed",
-          top: 0,
-          left: 0,
-          pointerEvents: "none",
-          zIndex: 9999,
-          opacity: isVisible ? 1 : 0,
-          transition: "opacity 0.3s ease-in"
-        },
-        "aria-hidden": "true"
+  return /* @__PURE__ */ jsx2(Fragment, { children: /* @__PURE__ */ jsx2(
+    "canvas",
+    {
+      ref: canvasRef,
+      style: {
+        position: "fixed",
+        // FIXED position to eliminate scroll jitter
+        top: 0,
+        left: 0,
+        pointerEvents: "none",
+        zIndex: 9999,
+        opacity: isVisible ? 1 : 0,
+        transition: "opacity 0.3s ease-in",
+        willChange: "transform"
+      },
+      "aria-hidden": "true"
+    }
+  ) });
+}
+
+// src/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 }) {
+  const { debugMode, toggleDebug, metrics } = useSnowfall();
+  const [isMinimized, setIsMinimized] = useState3(!defaultOpen);
+  const [copied, setCopied] = useState3(false);
+  useEffect2(() => {
+    const handleKeyDown = (e) => {
+      if (e.shiftKey && e.key === "D") {
+        toggleDebug();
       }
-    )
-  ] });
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [toggleDebug]);
+  const copyToClipboard = () => {
+    if (metrics) {
+      const data = {
+        ...metrics,
+        timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+        userAgent: navigator.userAgent,
+        canvasSize: {
+          width: window.innerWidth,
+          height: window.innerHeight
+        }
+      };
+      navigator.clipboard.writeText(JSON.stringify(data, null, 2));
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2e3);
+    }
+  };
+  if (!debugMode) return null;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-snowfall": "top",
+      style: {
+        position: "fixed",
+        bottom: "80px",
+        left: "24px",
+        backgroundColor: "rgba(15, 23, 42, 0.75)",
+        backdropFilter: "blur(16px)",
+        WebkitBackdropFilter: "blur(16px)",
+        color: "#e2e8f0",
+        fontFamily: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace",
+        fontSize: "12px",
+        padding: isMinimized ? "12px" : "20px",
+        borderRadius: "16px",
+        zIndex: 1e4,
+        minWidth: isMinimized ? "auto" : "300px",
+        maxWidth: "100%",
+        border: "1px solid rgba(255, 255, 255, 0.1)",
+        boxShadow: "0 20px 25px -5px rgba(0, 0, 0, 0.2), 0 8px 10px -6px rgba(0, 0, 0, 0.2)",
+        transition: "all 0.2s ease"
+      },
+      children: [
+        /* @__PURE__ */ jsxs("div", { style: {
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center",
+          marginBottom: isMinimized ? 0 : "16px",
+          gap: "16px"
+        }, children: [
+          /* @__PURE__ */ jsxs("div", { style: { fontWeight: "600", color: "#fff", display: "flex", alignItems: "center", gap: "8px" }, children: [
+            /* @__PURE__ */ jsx3("span", { style: { fontSize: "14px" }, children: "\u2744\uFE0F" }),
+            /* @__PURE__ */ jsx3("span", { style: {
+              background: "linear-gradient(to right, #60a5fa, #22d3ee)",
+              WebkitBackgroundClip: "text",
+              WebkitTextFillColor: "transparent",
+              fontWeight: "700"
+            }, children: "DEBUG" })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "8px" }, children: [
+            /* @__PURE__ */ jsx3(
+              "button",
+              {
+                onClick: () => setIsMinimized(!isMinimized),
+                style: {
+                  background: "rgba(255, 255, 255, 0.1)",
+                  border: "1px solid rgba(255, 255, 255, 0.1)",
+                  color: "#fff",
+                  cursor: "pointer",
+                  width: "24px",
+                  height: "24px",
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  borderRadius: "6px",
+                  fontSize: "10px"
+                },
+                children: isMinimized ? "\u25B2" : "\u25BC"
+              }
+            ),
+            /* @__PURE__ */ jsx3(
+              "button",
+              {
+                onClick: toggleDebug,
+                style: {
+                  background: "rgba(239, 68, 68, 0.15)",
+                  border: "1px solid rgba(239, 68, 68, 0.2)",
+                  color: "#f87171",
+                  cursor: "pointer",
+                  width: "24px",
+                  height: "24px",
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  borderRadius: "6px",
+                  fontSize: "12px"
+                },
+                children: "\u2715"
+              }
+            )
+          ] })
+        ] }),
+        !isMinimized && metrics && /* @__PURE__ */ jsxs(Fragment2, { children: [
+          /* @__PURE__ */ jsxs("div", { style: { marginBottom: "12px", paddingBottom: "12px", borderBottom: "1px solid rgba(255,255,255,0.08)" }, children: [
+            /* @__PURE__ */ jsx3("div", { style: { color: "#94a3b8", marginBottom: "8px", fontSize: "11px", fontWeight: "600", letterSpacing: "0.5px", textTransform: "uppercase" }, children: "Performance" }),
+            /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", marginBottom: "4px" }, children: [
+              /* @__PURE__ */ jsx3("span", { children: "FPS" }),
+              /* @__PURE__ */ jsx3("span", { style: { fontWeight: "bold", color: metrics.fps < 30 ? "#f87171" : metrics.fps < 50 ? "#facc15" : "#4ade80" }, children: metrics.fps.toFixed(1) })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", marginBottom: "4px" }, children: [
+              /* @__PURE__ */ jsx3("span", { children: "Frame Time" }),
+              /* @__PURE__ */ jsxs("span", { style: { fontFamily: "monospace" }, children: [
+                metrics.frameTime.toFixed(2),
+                "ms"
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between" }, children: [
+              /* @__PURE__ */ jsx3("span", { style: { color: metrics.rafGap && metrics.rafGap > 20 ? "#fbbf24" : "inherit" }, children: "rAF Gap" }),
+              /* @__PURE__ */ jsxs("span", { style: { fontFamily: "monospace" }, children: [
+                metrics.rafGap?.toFixed(1) || 0,
+                "ms"
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { style: { marginBottom: "12px", paddingBottom: "12px", borderBottom: "1px solid rgba(255,255,255,0.08)" }, children: [
+            /* @__PURE__ */ jsx3("div", { style: { color: "#94a3b8", marginBottom: "8px", fontSize: "11px", fontWeight: "600", letterSpacing: "0.5px", textTransform: "uppercase" }, children: "Detailed Timings" }),
+            /* @__PURE__ */ jsxs("div", { style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: "4px 12px" }, children: [
+              /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between" }, children: [
+                /* @__PURE__ */ jsx3("span", { children: "Clear" }),
+                " ",
+                /* @__PURE__ */ jsxs("span", { style: { fontFamily: "monospace" }, children: [
+                  metrics.clearTime?.toFixed(2) || 0,
+                  "ms"
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between" }, children: [
+                /* @__PURE__ */ jsx3("span", { children: "Physics" }),
+                " ",
+                /* @__PURE__ */ jsxs("span", { style: { fontFamily: "monospace" }, children: [
+                  metrics.physicsTime?.toFixed(2) || 0,
+                  "ms"
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between" }, children: [
+                /* @__PURE__ */ jsx3("span", { children: "Draw" }),
+                " ",
+                /* @__PURE__ */ jsxs("span", { style: { fontFamily: "monospace" }, children: [
+                  metrics.drawTime?.toFixed(2) || 0,
+                  "ms"
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between" }, children: [
+                /* @__PURE__ */ jsx3("span", { children: "Scan" }),
+                " ",
+                /* @__PURE__ */ jsxs("span", { style: { fontFamily: "monospace" }, children: [
+                  metrics.scanTime.toFixed(2),
+                  "ms"
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", gridColumn: "span 2" }, children: [
+                /* @__PURE__ */ jsx3("span", { children: "Rect Update" }),
+                " ",
+                /* @__PURE__ */ jsxs("span", { style: { fontFamily: "monospace" }, children: [
+                  metrics.rectUpdateTime.toFixed(2),
+                  "ms"
+                ] })
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { style: { marginBottom: "16px" }, children: [
+            /* @__PURE__ */ jsx3("div", { style: { color: "#94a3b8", marginBottom: "8px", fontSize: "11px", fontWeight: "600", letterSpacing: "0.5px", textTransform: "uppercase" }, children: "Counts" }),
+            /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", marginBottom: "4px" }, children: [
+              /* @__PURE__ */ jsx3("span", { children: "Snowflakes" }),
+              /* @__PURE__ */ jsxs("span", { style: { fontFamily: "monospace" }, children: [
+                metrics.flakeCount,
+                " / ",
+                metrics.maxFlakes
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between" }, children: [
+              /* @__PURE__ */ jsx3("span", { children: "Surfaces" }),
+              /* @__PURE__ */ jsx3("span", { style: { fontFamily: "monospace" }, children: metrics.surfaceCount })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx3(
+            "button",
+            {
+              onClick: copyToClipboard,
+              style: {
+                width: "100%",
+                padding: "10px",
+                background: copied ? "rgba(34, 197, 94, 0.2)" : "rgba(255, 255, 255, 0.05)",
+                border: copied ? "1px solid rgba(34, 197, 94, 0.5)" : "1px solid rgba(255, 255, 255, 0.1)",
+                color: copied ? "#4ade80" : "#fff",
+                cursor: "pointer",
+                borderRadius: "8px",
+                fontSize: "11px",
+                fontWeight: "600",
+                transition: "all 0.2s",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                gap: "6px"
+              },
+              children: copied ? "\u2713 COPIED" : "\u{1F4CB} COPY METRICS"
+            }
+          ),
+          /* @__PURE__ */ jsx3("div", { style: { marginTop: "12px", fontSize: "10px", color: "#64748b", textAlign: "center" }, children: "Shift+D to toggle" })
+        ] })
+      ]
+    }
+  );
 }
 export {
   DEFAULT_PHYSICS,
+  DebugPanel,
   Snowfall,
   SnowfallProvider,
   useSnowfall