@hdcodedev/snowfall 1.0.6 → 1.0.7

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];
@@ -173,37 +174,99 @@ var getElementRects = (accumulationMap) => {
 
 // src/utils/snowfall/physics.ts
 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;
+  return {
+    x,
+    y: window.scrollY - 5,
+    radius,
+    speed: radius * profile.speedScale + noise.speed * profile.noiseSpeedScale + profile.speedBase,
+    wind: (noise.wind - 0.5) * profile.windScale,
+    opacity: profile.opacityBase + sizeRatio * profile.opacityScale,
+    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 +285,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 +296,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 +304,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,26 +430,35 @@ 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) {
+    ctx.globalAlpha = flake.opacity;
+    ctx.beginPath();
+    ctx.arc(flake.x, flake.y, flake.radius, 0, TAU);
+    ctx.fill();
+  }
+  for (const flake of flakes) {
+    if (flake.isBackground) continue;
+    ctx.globalAlpha = flake.opacity * 0.2;
+    ctx.beginPath();
+    ctx.arc(flake.x, flake.y, flake.radius * 1.5, 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);
+  ctx.fillStyle = ACC_FILL_STYLE;
+  ctx.shadowColor = ACC_SHADOW_COLOR;
+  ctx.shadowBlur = 4;
+  ctx.shadowOffsetY = -1;
+  ctx.globalAlpha = 1;
   const currentScrollX = window.scrollX;
   const currentScrollY = window.scrollY;
+  ctx.beginPath();
   for (const item of elementRects) {
     const { rect, acc } = item;
     if (!acc.heights.some((h) => h > 0.1)) continue;
@@ -407,27 +466,13 @@ var drawAccumulations = (ctx, elementRects) => {
     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();
     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 py = baseY - height + (acc.curveOffsets[x] || 0) + dy;
       if (first) {
         ctx.moveTo(px, py);
         first = false;
@@ -439,33 +484,49 @@ var drawAccumulations = (ctx, elementRects) => {
       const x = len - 1;
       const height = acc.heights[x] || 0;
       const px = rect.left + x + dx;
-      const py = baseY - height + getCurveOffset(x) + dy;
+      const py = baseY - height + (acc.curveOffsets[x] || 0) + dy;
       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 py = baseY + (acc.curveOffsets[x] || 0) + dy;
       ctx.lineTo(px, py);
     }
     const startX = 0;
     const startPx = rect.left + startX + dx;
-    const startPy = baseY + getCurveOffset(startX) + dy;
+    const startPy = baseY + (acc.curveOffsets[startX] || 0) + dy;
     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;
-  };
-  setupCtx(ctx);
+  ctx.fillStyle = ACC_FILL_STYLE;
+  ctx.shadowColor = ACC_SHADOW_COLOR;
+  ctx.shadowBlur = 3;
+  ctx.globalAlpha = 1;
   const currentScrollX = window.scrollX;
   const currentScrollY = window.scrollY;
+  ctx.beginPath();
+  const drawSide = (sideArray, isLeft, multipliers, rect, dx, dy) => {
+    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 gravityMultiplier = multipliers[y] || 0;
+      const py = rect.top + y + dy;
+      const px = (isLeft ? baseX - width * gravityMultiplier : baseX + width * gravityMultiplier) + dx;
+      const ny = rect.top + nextY + dy;
+      const nGravityMultiplier = multipliers[nextY] || 0;
+      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);
+  };
   for (const item of elementRects) {
     const { rect, acc } = item;
     if (acc.maxSideHeight === 0) continue;
@@ -474,32 +535,10 @@ var drawSideAccumulations = (ctx, elementRects) => {
     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, dx, dy);
+    if (hasRightSnow) drawSide(acc.rightSide, false, acc.sideGravityMultipliers, rect, dx, dy);
   }
+  ctx.fill();
   ctx.shadowBlur = 0;
 };
 
@@ -527,7 +566,7 @@ function Snowfall() {
     drawTime: 0
   });
   useEffect(() => {
-    setIsMounted(true);
+    requestAnimationFrame(() => setIsMounted(true));
   }, []);
   useEffect(() => {
     isEnabledRef.current = isEnabled;
@@ -583,7 +622,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 = [];
@@ -625,9 +666,7 @@ 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));