@hdcodedev/snowfall 1.0.6 → 1.0.8

package/dist/index.mjs

@@ -88,6 +88,7 @@ var TAG_HEADER = "header";
 var TAG_FOOTER = "footer";
 var ROLE_BANNER = "banner";
 var ROLE_CONTENTINFO = "contentinfo";
+var TAU = Math.PI * 2;
 
 // src/utils/snowfall/dom.ts
 var BOTTOM_TAGS = [TAG_HEADER];
@@ -172,38 +173,113 @@ var getElementRects = (accumulationMap) => {
 };
 
 // src/utils/snowfall/physics.ts
+var OPACITY_BUCKETS = [0.3, 0.5, 0.7, 0.9];
+var quantizeOpacity = (opacity) => {
+  return OPACITY_BUCKETS.reduce(
+    (prev, curr) => Math.abs(curr - opacity) < Math.abs(prev - opacity) ? curr : prev
+  );
+};
 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() * worldWidth,
-      y: window.scrollY - 5,
-      radius,
-      speed: radius * 0.3 + Math.random() * 0.2 + 0.2,
-      wind: (Math.random() - 0.5) * (config.WIND_STRENGTH * 0.625),
-      opacity: Math.random() * 0.2 + 0.2,
-      wobble: Math.random() * Math.PI * 2,
-      wobbleSpeed: Math.random() * 0.015 + 5e-3,
-      sizeRatio,
-      isBackground: true
-    };
-  } else {
-    const sizeRatio = Math.random();
-    const radius = config.FLAKE_SIZE.MIN + sizeRatio * (config.FLAKE_SIZE.MAX - config.FLAKE_SIZE.MIN);
-    return {
-      x: Math.random() * worldWidth,
-      y: window.scrollY - 5,
-      radius,
-      speed: radius * 0.5 + Math.random() * 0.3 + 0.5,
-      wind: (Math.random() - 0.5) * config.WIND_STRENGTH,
-      opacity: Math.random() * 0.3 + 0.5,
-      wobble: Math.random() * Math.PI * 2,
-      wobbleSpeed: Math.random() * 0.02 + 0.01,
-      sizeRatio,
-      isBackground: false
-    };
+  const x = Math.random() * worldWidth;
+  const dna = Math.random();
+  const noise = {
+    speed: dna * 13 % 1,
+    wind: dna * 7 % 1,
+    wobblePhase: dna * 23 % 1,
+    wobbleSpeed: dna * 5 % 1
+  };
+  const { MIN, MAX } = config.FLAKE_SIZE;
+  const sizeRatio = dna;
+  const profile = isBackground ? {
+    sizeMin: MIN * 0.6,
+    sizeRange: (MAX - MIN) * 0.4,
+    speedBase: 0.2,
+    speedScale: 0.3,
+    noiseSpeedScale: 0.2,
+    windScale: config.WIND_STRENGTH * 0.625,
+    opacityBase: 0.2,
+    opacityScale: 0.2,
+    wobbleBase: 5e-3,
+    wobbleScale: 0.015
+  } : {
+    sizeMin: MIN,
+    sizeRange: MAX - MIN,
+    speedBase: 0.5,
+    speedScale: 0.5,
+    noiseSpeedScale: 0.3,
+    windScale: config.WIND_STRENGTH,
+    opacityBase: 0.5,
+    opacityScale: 0.3,
+    wobbleBase: 0.01,
+    wobbleScale: 0.02
+  };
+  const radius = profile.sizeMin + sizeRatio * profile.sizeRange;
+  const glowRadius = radius * 1.5;
+  const rawOpacity = profile.opacityBase + sizeRatio * profile.opacityScale;
+  const opacity = quantizeOpacity(rawOpacity);
+  const rawGlowOpacity = opacity * 0.2;
+  const glowOpacity = quantizeOpacity(rawGlowOpacity);
+  return {
+    x,
+    y: window.scrollY - 5,
+    radius,
+    glowRadius,
+    speed: radius * profile.speedScale + noise.speed * profile.noiseSpeedScale + profile.speedBase,
+    wind: (noise.wind - 0.5) * profile.windScale,
+    opacity,
+    glowOpacity,
+    wobble: noise.wobblePhase * TAU,
+    wobbleSpeed: noise.wobbleSpeed * profile.wobbleScale + profile.wobbleBase,
+    sizeRatio,
+    isBackground
+  };
+};
+var initializeMaxHeights = (width, baseMax, borderRadius, isBottom = false) => {
+  let maxHeights = new Array(width);
+  for (let i = 0; i < width; i++) {
+    let edgeFactor = 1;
+    if (!isBottom && borderRadius > 0) {
+      if (i < borderRadius) {
+        edgeFactor = Math.pow(i / borderRadius, 1.2);
+      } else if (i > width - borderRadius) {
+        edgeFactor = Math.pow((width - i) / borderRadius, 1.2);
+      }
+    }
+    maxHeights[i] = baseMax * edgeFactor * (0.85 + Math.random() * 0.15);
   }
+  const smoothPasses = 4;
+  for (let p = 0; p < smoothPasses; p++) {
+    const smoothed = [...maxHeights];
+    for (let i = 1; i < width - 1; i++) {
+      smoothed[i] = (maxHeights[i - 1] + maxHeights[i] + maxHeights[i + 1]) / 3;
+    }
+    maxHeights = smoothed;
+  }
+  return maxHeights;
+};
+var calculateCurveOffsets = (width, borderRadius, isBottom) => {
+  const offsets = new Array(width).fill(0);
+  if (borderRadius <= 0 || isBottom) return offsets;
+  for (let x = 0; x < width; x++) {
+    let offset = 0;
+    if (x < borderRadius) {
+      const dist = borderRadius - x;
+      offset = borderRadius - Math.sqrt(Math.max(0, borderRadius * borderRadius - dist * dist));
+    } else if (x > width - borderRadius) {
+      const dist = x - (width - borderRadius);
+      offset = borderRadius - Math.sqrt(Math.max(0, borderRadius * borderRadius - dist * dist));
+    }
+    offsets[x] = offset;
+  }
+  return offsets;
+};
+var calculateGravityMultipliers = (height) => {
+  const multipliers = new Array(height);
+  for (let i = 0; i < height; i++) {
+    const ratio = i / height;
+    multipliers[i] = Math.sqrt(ratio);
+  }
+  return multipliers;
 };
 var initializeAccumulation = (accumulationMap, config) => {
   const elements = getAccumulationSurfaces(config.MAX_SURFACES);
@@ -222,6 +298,10 @@ var initializeAccumulation = (accumulationMap, config) => {
       if (existing.borderRadius !== void 0) {
         const styleBuffer = window.getComputedStyle(el);
         existing.borderRadius = parseFloat(styleBuffer.borderTopLeftRadius) || 0;
+        existing.curveOffsets = calculateCurveOffsets(width, existing.borderRadius, isBottom);
+        if (existing.leftSide.length === Math.ceil(rect.height) && !existing.sideGravityMultipliers) {
+          existing.sideGravityMultipliers = calculateGravityMultipliers(existing.leftSide.length);
+        }
       }
       return;
     }
@@ -229,26 +309,7 @@ var initializeAccumulation = (accumulationMap, config) => {
     const baseMax = isBottom ? config.MAX_DEPTH.BOTTOM : config.MAX_DEPTH.TOP;
     const styles = window.getComputedStyle(el);
     const borderRadius = parseFloat(styles.borderTopLeftRadius) || 0;
-    let maxHeights = new Array(width);
-    for (let i = 0; i < width; i++) {
-      let edgeFactor = 1;
-      if (!isBottom && borderRadius > 0) {
-        if (i < borderRadius) {
-          edgeFactor = Math.pow(i / borderRadius, 1.2);
-        } else if (i > width - borderRadius) {
-          edgeFactor = Math.pow((width - i) / borderRadius, 1.2);
-        }
-      }
-      maxHeights[i] = baseMax * edgeFactor * (0.85 + Math.random() * 0.15);
-    }
-    const smoothPasses = 4;
-    for (let p = 0; p < smoothPasses; p++) {
-      const smoothed = [...maxHeights];
-      for (let i = 1; i < width - 1; i++) {
-        smoothed[i] = (maxHeights[i - 1] + maxHeights[i] + maxHeights[i + 1]) / 3;
-      }
-      maxHeights = smoothed;
-    }
+    const maxHeights = initializeMaxHeights(width, baseMax, borderRadius, isBottom);
     accumulationMap.set(el, {
       heights: existing?.heights.length === width ? existing.heights : new Array(width).fill(0),
       maxHeights,
@@ -256,6 +317,8 @@ var initializeAccumulation = (accumulationMap, config) => {
       rightSide: existing?.rightSide.length === height ? existing.rightSide : new Array(height).fill(0),
       maxSideHeight: isBottom ? 0 : config.MAX_DEPTH.SIDE,
       borderRadius,
+      curveOffsets: calculateCurveOffsets(width, borderRadius, isBottom),
+      sideGravityMultipliers: calculateGravityMultipliers(height),
       type
     });
   });
@@ -380,54 +443,46 @@ var meltAndSmoothAccumulation = (elementRects, config, dt) => {
 };
 
 // src/utils/snowfall/draw.ts
-var drawSnowflake = (ctx, flake) => {
-  ctx.beginPath();
-  ctx.arc(flake.x, flake.y, flake.radius, 0, Math.PI * 2);
-  ctx.fillStyle = `rgba(255, 255, 255, ${flake.opacity})`;
-  ctx.fill();
-  ctx.beginPath();
-  ctx.arc(flake.x, flake.y, flake.radius * 1.5, 0, Math.PI * 2);
-  ctx.fillStyle = `rgba(255, 255, 255, ${flake.opacity * 0.2})`;
-  ctx.fill();
+var ACC_FILL_STYLE = "rgba(255, 255, 255, 0.95)";
+var ACC_SHADOW_COLOR = "rgba(200, 230, 255, 0.6)";
+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();
+      ctx.arc(flake.x, flake.y, flake.glowRadius, 0, TAU);
+      ctx.fill();
+    }
+    ctx.globalAlpha = flake.opacity;
+    ctx.beginPath();
+    ctx.arc(flake.x, flake.y, flake.radius, 0, TAU);
+    ctx.fill();
+  }
+  ctx.globalAlpha = 1;
 };
-var drawAccumulations = (ctx, elementRects) => {
-  const setupCtx = (c) => {
-    c.fillStyle = "rgba(255, 255, 255, 0.95)";
-    c.shadowColor = "rgba(200, 230, 255, 0.6)";
-    c.shadowBlur = 4;
-    c.shadowOffsetY = -1;
-  };
-  setupCtx(ctx);
-  const currentScrollX = window.scrollX;
-  const currentScrollY = window.scrollY;
+var drawAccumulations = (ctx, elementRects, scrollX, scrollY) => {
+  ctx.fillStyle = ACC_FILL_STYLE;
+  ctx.shadowColor = ACC_SHADOW_COLOR;
+  ctx.shadowBlur = 4;
+  ctx.shadowOffsetY = -1;
+  ctx.globalAlpha = 1;
+  ctx.beginPath();
   for (const item of elementRects) {
     const { rect, acc } = item;
     if (!acc.heights.some((h) => h > 0.1)) continue;
-    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;
-    const getCurveOffset = (xPos) => {
-      if (borderRadius <= 0 || isBottom) return 0;
-      let offset = 0;
-      if (xPos < borderRadius) {
-        const dist = borderRadius - xPos;
-        offset = borderRadius - Math.sqrt(Math.max(0, borderRadius * borderRadius - dist * dist));
-      } else if (xPos > rect.width - borderRadius) {
-        const dist = xPos - (rect.width - borderRadius);
-        offset = borderRadius - Math.sqrt(Math.max(0, borderRadius * borderRadius - dist * dist));
-      }
-      return offset;
-    };
-    ctx.beginPath();
+    const worldLeft = rect.left + scrollX;
+    const worldBaseY = baseY + scrollY;
     let first = true;
     const step = 2;
     const len = acc.heights.length;
     for (let x = 0; x < len; x += step) {
       const height = acc.heights[x] || 0;
-      const px = rect.left + x + dx;
-      const py = baseY - height + getCurveOffset(x) + dy;
+      const px = worldLeft + x;
+      const py = worldBaseY - height + (acc.curveOffsets[x] || 0);
       if (first) {
         ctx.moveTo(px, py);
         first = false;
@@ -438,68 +493,61 @@ var drawAccumulations = (ctx, elementRects) => {
     if ((len - 1) % step !== 0) {
       const x = len - 1;
       const height = acc.heights[x] || 0;
-      const px = rect.left + x + dx;
-      const py = baseY - height + getCurveOffset(x) + dy;
+      const px = worldLeft + x;
+      const py = worldBaseY - height + (acc.curveOffsets[x] || 0);
       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;
+      const px = worldLeft + x;
+      const py = worldBaseY + (acc.curveOffsets[x] || 0);
       ctx.lineTo(px, py);
     }
     const startX = 0;
-    const startPx = rect.left + startX + dx;
-    const startPy = baseY + getCurveOffset(startX) + dy;
+    const startPx = worldLeft + startX;
+    const startPy = worldBaseY + (acc.curveOffsets[startX] || 0);
     ctx.lineTo(startPx, startPy);
-    ctx.closePath();
-    ctx.fill();
   }
+  ctx.fill();
   ctx.shadowBlur = 0;
   ctx.shadowOffsetY = 0;
 };
-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;
+var drawSideAccumulations = (ctx, elementRects, scrollX, scrollY) => {
+  ctx.fillStyle = ACC_FILL_STYLE;
+  ctx.shadowColor = ACC_SHADOW_COLOR;
+  ctx.shadowBlur = 3;
+  ctx.globalAlpha = 1;
+  ctx.beginPath();
+  const drawSide = (sideArray, isLeft, multipliers, rect, dx, dy) => {
+    const baseX = isLeft ? rect.left : rect.right;
+    const worldBaseX = baseX + dx;
+    const worldTop = rect.top + dy;
+    const worldBottom = rect.bottom + dy;
+    ctx.moveTo(worldBaseX, worldTop);
+    for (let y = 0; y < sideArray.length; y += 2) {
+      const width = sideArray[y] || 0;
+      const nextY = Math.min(y + 2, sideArray.length - 1);
+      const nextWidth = sideArray[nextY] || 0;
+      const gravityMultiplier = multipliers[y] || 0;
+      const py = worldTop + y;
+      const px = isLeft ? worldBaseX - width * gravityMultiplier : worldBaseX + width * gravityMultiplier;
+      const ny = worldTop + nextY;
+      const nGravityMultiplier = multipliers[nextY] || 0;
+      const nx = isLeft ? worldBaseX - nextWidth * nGravityMultiplier : worldBaseX + nextWidth * nGravityMultiplier;
+      ctx.lineTo(px, py);
+      ctx.lineTo(nx, ny);
+    }
+    ctx.lineTo(worldBaseX, worldBottom);
   };
-  setupCtx(ctx);
-  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 dx = currentScrollX;
-    const dy = currentScrollY;
-    const drawSide = (sideArray, isLeft) => {
-      ctx.beginPath();
-      const baseX = isLeft ? rect.left : rect.right;
-      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);
-        const nextWidth = sideArray[nextY] || 0;
-        const heightRatio = y / sideArray.length;
-        const gravityMultiplier = Math.pow(heightRatio, 1.5);
-        const py = rect.top + y + dy;
-        const px = (isLeft ? baseX - width * gravityMultiplier : baseX + width * gravityMultiplier) + dx;
-        const ny = rect.top + nextY + dy;
-        const nRatio = nextY / sideArray.length;
-        const nGravityMultiplier = Math.pow(nRatio, 1.5);
-        const nx = (isLeft ? baseX - nextWidth * nGravityMultiplier : baseX + nextWidth * nGravityMultiplier) + dx;
-        ctx.lineTo(px, py);
-        ctx.lineTo(nx, ny);
-      }
-      ctx.lineTo(baseX + dx, rect.bottom + dy);
-      ctx.closePath();
-      ctx.fill();
-    };
-    if (hasLeftSnow) drawSide(acc.leftSide, true);
-    if (hasRightSnow) drawSide(acc.rightSide, false);
+    if (hasLeftSnow) drawSide(acc.leftSide, true, acc.sideGravityMultipliers, rect, scrollX, scrollY);
+    if (hasRightSnow) drawSide(acc.rightSide, false, acc.sideGravityMultipliers, rect, scrollX, scrollY);
   }
+  ctx.fill();
   ctx.shadowBlur = 0;
 };
 
@@ -516,6 +564,7 @@ function Snowfall() {
   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,
@@ -527,7 +576,7 @@ function Snowfall() {
     drawTime: 0
   });
   useEffect(() => {
-    setIsMounted(true);
+    requestAnimationFrame(() => setIsMounted(true));
   }, []);
   useEffect(() => {
     isEnabledRef.current = isEnabled;
@@ -549,6 +598,7 @@ function Snowfall() {
         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`;
@@ -583,7 +633,9 @@ function Snowfall() {
       metricsRef.current.scanTime = performance.now() - scanStart;
     };
     initAccumulationWrapper();
-    setIsVisible(true);
+    requestAnimationFrame(() => {
+      if (isMounted) setIsVisible(true);
+    });
     let lastTime = 0;
     let lastMetricsUpdate = 0;
     let elementRects = [];
@@ -602,7 +654,7 @@ function Snowfall() {
       const dt = deltaTime / 16.67;
       const frameStartTime = performance.now();
       const clearStart = performance.now();
-      const dpr = window.devicePixelRatio || 1;
+      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;
@@ -625,15 +677,24 @@ function Snowfall() {
       );
       metricsRef.current.physicsTime = performance.now() - physicsStart;
       const drawStart = performance.now();
-      for (const flake of snowflakes) {
-        drawSnowflake(ctx, flake);
-      }
+      drawSnowflakes(ctx, snowflakes);
       if (isEnabledRef.current && snowflakes.length < physicsConfigRef.current.MAX_FLAKES) {
-        const isBackground = Math.random() < 0.4;
-        snowflakes.push(createSnowflake(document.documentElement.scrollWidth, physicsConfigRef.current, isBackground));
+        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);
       }
-      drawAccumulations(ctx, elementRects);
-      drawSideAccumulations(ctx, elementRects);
       metricsRef.current.drawTime = performance.now() - drawStart;
       metricsRef.current.frameTime = performance.now() - frameStartTime;
       if (currentTime - lastMetricsUpdate > 500) {