@hdcodedev/snowfall 1.0.7 → 1.0.9

package/dist/index.mjs

@@ -173,6 +173,12 @@ 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) => {
   const x = Math.random() * worldWidth;
   const dna = Math.random();
@@ -208,13 +214,20 @@ var createSnowflake = (worldWidth, config, isBackground = false) => {
     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: profile.opacityBase + sizeRatio * profile.opacityScale,
+    opacity,
+    glowOpacity,
     wobble: noise.wobblePhase * TAU,
     wobbleSpeed: noise.wobbleSpeed * profile.wobbleScale + profile.wobbleBase,
     sizeRatio,
@@ -303,6 +316,8 @@ var initializeAccumulation = (accumulationMap, config) => {
       leftSide: existing?.leftSide.length === height ? existing.leftSide : new Array(height).fill(0),
       rightSide: existing?.rightSide.length === height ? existing.rightSide : new Array(height).fill(0),
       maxSideHeight: isBottom ? 0 : config.MAX_DEPTH.SIDE,
+      leftMax: existing?.leftSide.length === height ? existing.leftMax : 0,
+      rightMax: existing?.rightSide.length === height ? existing.rightMax : 0,
       borderRadius,
       curveOffsets: calculateCurveOffsets(width, borderRadius, isBottom),
       sideGravityMultipliers: calculateGravityMultipliers(height),
@@ -310,9 +325,10 @@ var initializeAccumulation = (accumulationMap, config) => {
     });
   });
 };
-var accumulateSide = (sideArray, rectHeight, localY, maxSideHeight, borderRadius, config) => {
+var accumulateSide = (sideArray, rectHeight, localY, maxSideHeight, borderRadius, config, currentMax) => {
   const spread = 4;
   const addHeight = config.ACCUMULATION.SIDE_RATE * (0.8 + Math.random() * 0.4);
+  let newMax = currentMax;
   for (let dy = -spread; dy <= spread; dy++) {
     const y = localY + dy;
     if (y >= 0 && y < sideArray.length) {
@@ -321,9 +337,12 @@ var accumulateSide = (sideArray, rectHeight, localY, maxSideHeight, borderRadius
       if (borderRadius > 0 && (inTop || inBottom)) continue;
       const normalizedDist = Math.abs(dy) / spread;
       const falloff = (Math.cos(normalizedDist * Math.PI) + 1) / 2;
-      sideArray[y] = Math.min(maxSideHeight, sideArray[y] + addHeight * falloff);
+      const newHeight = Math.min(maxSideHeight, sideArray[y] + addHeight * falloff);
+      sideArray[y] = newHeight;
+      if (newHeight > newMax) newMax = newHeight;
     }
   }
+  return newMax;
 };
 var updateSnowflakes = (snowflakes, elementRects, config, dt, worldWidth, worldHeight) => {
   const scrollX = window.scrollX;
@@ -349,13 +368,13 @@ var updateSnowflakes = (snowflakes, elementRects, config, dt, worldWidth, worldH
           const isCorner = borderRadius > 0 && (isInTopCorner || isInBottomCorner);
           if (flakeViewportX >= rect.left - 5 && flakeViewportX < rect.left + 3) {
             if (!isCorner) {
-              accumulateSide(acc.leftSide, rect.height, localY, acc.maxSideHeight, borderRadius, config);
+              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) {
-              accumulateSide(acc.rightSide, rect.height, localY, acc.maxSideHeight, borderRadius, config);
+              acc.rightMax = accumulateSide(acc.rightSide, rect.height, localY, acc.maxSideHeight, borderRadius, config, acc.rightMax);
               landed = true;
             }
           }
@@ -422,10 +441,20 @@ var meltAndSmoothAccumulation = (elementRects, config, dt) => {
     for (let i = 0; i < acc.heights.length; i++) {
       if (acc.heights[i] > 0) acc.heights[i] = Math.max(0, acc.heights[i] - meltRate);
     }
+    let leftMax = 0;
+    let rightMax = 0;
     for (let i = 0; i < acc.leftSide.length; i++) {
-      if (acc.leftSide[i] > 0) acc.leftSide[i] = Math.max(0, acc.leftSide[i] - meltRate);
-      if (acc.rightSide[i] > 0) acc.rightSide[i] = Math.max(0, acc.rightSide[i] - meltRate);
+      if (acc.leftSide[i] > 0) {
+        acc.leftSide[i] = Math.max(0, acc.leftSide[i] - meltRate);
+        if (acc.leftSide[i] > leftMax) leftMax = acc.leftSide[i];
+      }
+      if (acc.rightSide[i] > 0) {
+        acc.rightSide[i] = Math.max(0, acc.rightSide[i] - meltRate);
+        if (acc.rightSide[i] > rightMax) rightMax = acc.rightSide[i];
+      }
     }
+    acc.leftMax = leftMax;
+    acc.rightMax = rightMax;
   }
 };
 
@@ -436,43 +465,40 @@ 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();
   }
-  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) => {
+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;
-  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;
-    const dx = currentScrollX;
-    const dy = currentScrollY;
     const isBottom = acc.type === VAL_BOTTOM;
     const baseY = isBottom ? rect.bottom - 1 : rect.top + 1;
+    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 + (acc.curveOffsets[x] || 0) + dy;
+      const px = worldLeft + x;
+      const py = worldBaseY - height + (acc.curveOffsets[x] || 0);
       if (first) {
         ctx.moveTo(px, py);
         first = false;
@@ -483,60 +509,59 @@ 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 + (acc.curveOffsets[x] || 0) + 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 + (acc.curveOffsets[x] || 0) + 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 + (acc.curveOffsets[startX] || 0) + dy;
+    const startPx = worldLeft + startX;
+    const startPy = worldBaseY + (acc.curveOffsets[startX] || 0);
     ctx.lineTo(startPx, startPy);
   }
   ctx.fill();
   ctx.shadowBlur = 0;
   ctx.shadowOffsetY = 0;
 };
-var drawSideAccumulations = (ctx, elementRects) => {
+var drawSideAccumulations = (ctx, elementRects, scrollX, scrollY) => {
   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);
+    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 = rect.top + y + dy;
-      const px = (isLeft ? baseX - width * gravityMultiplier : baseX + width * gravityMultiplier) + dx;
-      const ny = rect.top + nextY + dy;
+      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 ? baseX - nextWidth * nGravityMultiplier : baseX + nextWidth * nGravityMultiplier) + dx;
+      const nx = isLeft ? worldBaseX - nextWidth * nGravityMultiplier : worldBaseX + nextWidth * nGravityMultiplier;
       ctx.lineTo(px, py);
       ctx.lineTo(nx, ny);
     }
-    ctx.lineTo(baseX + dx, rect.bottom + dy);
+    ctx.lineTo(worldBaseX, worldBottom);
   };
   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);
+    const hasLeftSnow = acc.leftMax > 0.3;
+    const hasRightSnow = acc.rightMax > 0.3;
     if (!hasLeftSnow && !hasRightSnow) continue;
-    const dx = currentScrollX;
-    const dy = currentScrollY;
-    if (hasLeftSnow) drawSide(acc.leftSide, true, acc.sideGravityMultipliers, rect, dx, dy);
-    if (hasRightSnow) drawSide(acc.rightSide, false, acc.sideGravityMultipliers, rect, dx, dy);
+    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;
@@ -555,6 +580,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,
@@ -588,6 +614,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`;
@@ -643,7 +670,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;
@@ -668,11 +695,22 @@ function Snowfall() {
       const drawStart = performance.now();
       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) {