i

Author: i1li

dist/bundle-31946.css

@@ -24,6 +24,7 @@ canvas {
     opacity: 1;
 }
 #header-verse {
+    display: none;
     position: absolute;
     left: 6%;
     top: -.75em;

dist/bundle-31946.js

@@ -1,12 +1,13 @@
 if (!isMobile) {
-
 function constructVerseURL(verse) {
 const [book, chapter_verse] = verse.split(' ');
 const [chapter, verse_range] = chapter_verse.split(':');
 const formatted_book = book.toLowerCase().substring(0, 3);
 return `https://www.blb.org/csb/${formatted_book}/${chapter}/${verse_range}`;
 }
 function displayRandomBibleVerse() {
+  const headerVerse = document.getElementById('header-verse');
+  headerVerse.style.display = 'block';
   shuffle(bibleVerses);
   let currentIndex = 0;
   let remainingTime = 0;
@@ -32,23 +33,23 @@ function displayRandomBibleVerse() {
     }
     function tick() {
       if (isWindowActive && !document.querySelector('header').classList.contains('scrolled-down')) {
+        headerVerse.style.display = 'block';
         remainingTime -= tickInterval;
         if (remainingTime <= 0) {
           displayVerse();
         } else {
           timerPause = setTimeout(tick, tickInterval);
         }
       } else {
+        headerVerse.style.display = 'none';
         timerPause = setTimeout(tick, tickInterval);
       }
     }
     tick();
   }
   displayVerse();
 }
-const headerVerse = document.getElementById('header-verse');
 document.addEventListener("DOMContentLoaded", function() {
-
   if (isInitialLoad) {
     displayRandomBibleVerse();
   }

dist/bundle-650e6.css

@@ -1,10 +1,7 @@
-if (!isMobile) {
-
 const hoverShift = document.querySelectorAll('button, a, .article-nav-bottom, footer');
 const alwaysShift = document.querySelectorAll('header, #site-title, #toolbar, nav .col a, .article-header, .article-title, .section-nav, footer');
 
 function getRandomDegree() {
-  // More uniform distribution and efficient rounding
   return Math.random() < 0.5
     ? -45 - Math.floor(Math.random() * 270)
     : 46 + Math.floor(Math.random() * 224);
@@ -48,72 +45,99 @@ function startShift(element, interval, isHover = false) {
     element.style.filter = filterValue;
   }
 
-  function animate(time) {
+  function animateColors(time) {
     if (!isRunning) return;
     if (isWindowActive && isElementInViewport(element)) {
       const deltaTime = time - lastTime;
       lastTime = time;
       progress += deltaTime / interval;
-
       if (progress >= 1) {
         targetDegree = getRandomDegree();
         targetSaturation = Math.random() * 35 + 90; // 90-125
         targetContrast = Math.random() * (isHover ? 90 : 40) + 80;
         targetBrightness = Math.random() * (isHover ? 50 : 20) + (isHover ? 85 : 90);
         progress = 0;
       }
-
       const t = () => metaRecursiveEaseNoise(progress);
-
       currentDegree += Math.round((targetDegree - currentDegree) * t() * Math.random() * 0.07);
       currentSaturation += Math.round((targetSaturation - currentSaturation) * t() * Math.random());
       currentContrast += Math.round((targetContrast - currentContrast) * t() * Math.random());
       currentBrightness += Math.round((targetBrightness - currentBrightness) * t() * Math.random());
-
       updateFilter();
     }
-
-    if (isRunning) requestAnimationFrame(animate);
+    if (isRunning) requestAnimationFrame(animateColors);
   }
 
-  requestAnimationFrame(animate);
-
+  // Initial filter apply (starts from random state)
+  updateFilter();
+  requestAnimationFrame(animateColors);
   return () => {
     isRunning = false;
     element.style.filter = 'none';
   };
 }
 
-function handleDisengage(element, stopAnimationFunction) {
-  if (stopAnimationFunction) {
-    stopAnimationFunction();
+function handleDisengage(element, stopAnim) {
+  if (stopAnim) {
+    stopAnim();
   }
   element.style.filter = 'none';
 }
 
-// Initialize alwaysShift elements with throttled animations
-alwaysShift.forEach(element => {
-  element.animateFunction = throttle(() => startShift(element, getRandomInterval()), 30)();
+// Viewport-lazy with light staggering: Observe in batches for gradual init
+const observerOptions = {
+  threshold: 0,
+  rootMargin: '200px',
+};
+
+const animationObserver = new IntersectionObserver((entries) => {
+  entries.forEach(entry => {
+    const element = entry.target;
+    if (entry.isIntersecting && !element._isAnimating) {
+      element._stopper = startShift(element, getRandomInterval());
+      element._isAnimating = true;
+    }
+  });
+}, observerOptions);
+
+// Stagger .observe() calls lightly (~20ms batches) for perf ramp-up
+let observeDelay = 0;
+const observeBatchSize = 10;
+alwaysShift.forEach((element, index) => {
+  setTimeout(() => {
+    animationObserver.observe(element);
+  }, observeDelay);
+  if (index % observeBatchSize === observeBatchSize - 1) {
+    observeDelay += 20;  // Tune: 10-50ms for balance
+  }
 });
 
-// Initialize hoverShift elements with event handlers and throttle/debounce control
-hoverShift.forEach(element => {
-  let stopAnimationFunction = null;
-  let disengageTimeout = null;
-
-  const startAnim = throttle(() => {
-    if (stopAnimationFunction) stopAnimationFunction();
-    stopAnimationFunction = startShift(element, getRandomInterval(), true);
-  }, 30);
-
-  element.addEventListener('mouseover', startAnim);
-  element.addEventListener('click', startAnim);
-  element.addEventListener('touchstart', () => {
-    if (stopAnimationFunction) stopAnimationFunction();
-    stopAnimationFunction = startShift(element, getRandomInterval(), true);
-    disengageTimeout = setTimeout(() => handleDisengage(element, stopAnimationFunction), 888);
+// Cleanup on unload
+window.addEventListener('beforeunload', () => {
+  alwaysShift.forEach(element => {
+    if (element._stopper) {
+      element._stopper();
+      element._stopper = null;
+    }
   });
-  element.addEventListener('mouseout', debounce(() => handleDisengage(element, stopAnimationFunction), 30));
+  animationObserver.disconnect();
 });
 
-}
+if (!isMobile) {
+  hoverShift.forEach(element => {
+    let stopAnim = null;
+    let disengageTimeout = null;
+    const startAnim = throttle(() => {
+      if (stopAnim) stopAnim();
+      stopAnim = startShift(element, getRandomInterval(), true);
+    }, 30);
+    element.addEventListener('mouseover', startAnim);
+    element.addEventListener('click', startAnim);
+    element.addEventListener('touchstart', () => {
+      if (stopAnim) stopAnim();
+      stopAnim = startShift(element, getRandomInterval(), true);
+      disengageTimeout = setTimeout(() => handleDisengage(element, stopAnim), 888);
+    });
+    element.addEventListener('mouseout', debounce(() => handleDisengage(element, stopAnim), 30));
+  });
+}