@anglefeint/astro-theme 0.1.22 → 0.1.23

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@anglefeint/astro-theme",
-  "version": "0.1.22",
+  "version": "0.1.23",
   "type": "module",
   "description": "Anglefeint core theme package for Astro",
   "keywords": [

package/src/layouts/BlogPost.astro

@@ -108,12 +108,22 @@ const enableRedQueen = THEME.EFFECTS.ENABLE_RED_QUEEN;
 					{heroImage && (
 						<div class="hero-shell">
 							<div class="hero-pane">
-								<div class="hero-image">
-									<div class="hero-stack">
-										<div class="hero-canvas-wrap" aria-hidden="true">
-											<canvas class="hero-canvas" data-hero-src={heroImage.src}></canvas>
+									<div class="hero-image">
+										<div class="hero-stack">
+											<div class="hero-base-wrap">
+												<Image
+													class="hero-base-image"
+													src={heroImage}
+													alt={title}
+													loading="eager"
+													decoding="async"
+													fetchpriority="high"
+												/>
+											</div>
+											<div class="hero-canvas-wrap" aria-hidden="true">
+												<canvas class="hero-canvas" data-hero-src={heroImage.src}></canvas>
+											</div>
 										</div>
-									</div>
 									<div class="hero-frame" aria-hidden="true">
 										<span>neural monitor</span>
 										<span class="hero-frame-dot"></span>

package/src/scripts/blogpost/hero-canvas.js

@@ -15,8 +15,12 @@ export function initHeroCanvas(prefersReducedMotion) {
   var heroStart = 0;
   var heroRaf = 0;
   var resizeTimer = 0;
+  var prepareTimer = 0;
+  var prepareIdleHandle = 0;
   var isInViewport = true;
   var heroObserver = null;
+  var heroEffectsPrepared = false;
+  var heroEffectsPreparing = false;
   var baseCanvas = document.createElement('canvas');
   var baseCtx = baseCanvas.getContext('2d');
   var pixelCanvas = document.createElement('canvas');
@@ -251,7 +255,7 @@ export function initHeroCanvas(prefersReducedMotion) {
   }
 
   function startHeroLoop() {
-    if (prefersReducedMotion || document.hidden || !isInViewport || !canvas.img || heroRaf) return;
+    if (prefersReducedMotion || document.hidden || !isInViewport || !canvas.img || !heroEffectsPrepared || heroRaf) return;
     heroRaf = requestAnimationFrame(heroRender);
   }
 
@@ -261,17 +265,60 @@ export function initHeroCanvas(prefersReducedMotion) {
     heroRaf = 0;
   }
 
+  function drawStaticFrame(img) {
+    var w = canvas.width;
+    var h = canvas.height;
+    baseCanvas.width = w;
+    baseCanvas.height = h;
+    drawBase(baseCtx, img, w, h);
+    ctx.clearRect(0, 0, w, h);
+    ctx.drawImage(baseCanvas, 0, 0);
+  }
+
+  function scheduleHeroEffectsPrepare() {
+    if (prefersReducedMotion || !canvas.img || heroEffectsPrepared || heroEffectsPreparing) return;
+    heroEffectsPreparing = true;
+
+    function runPrepare() {
+      prepareTimer = 0;
+      prepareIdleHandle = 0;
+      if (!canvas.img) {
+        heroEffectsPreparing = false;
+        return;
+      }
+      buildEdge(canvas.img);
+      heroEffectsPrepared = true;
+      heroEffectsPreparing = false;
+      startHeroLoop();
+    }
+
+    if (typeof window.requestIdleCallback === 'function') {
+      prepareIdleHandle = window.requestIdleCallback(runPrepare, { timeout: 1200 });
+      return;
+    }
+
+    function afterLoad() {
+      prepareTimer = setTimeout(runPrepare, 180);
+    }
+
+    if (document.readyState === 'complete') afterLoad();
+    else window.addEventListener('load', afterLoad, { once: true });
+  }
+
   var img = new Image();
   img.onload = function() {
     canvas.img = img;
     sizeCanvas();
-    buildEdge(img);
+    drawStaticFrame(img);
     wrap.classList.add('ready');
     if (prefersReducedMotion) {
-      ctx.drawImage(baseCanvas, 0, 0);
       return;
     }
-    startHeroLoop();
+    // Keep first paint static for LCP, then prepare heavy effects when idle.
+    scheduleHeroEffectsPrepare();
+  };
+  img.onerror = function() {
+    wrap.classList.add('ready');
   };
   img.src = new URL(src, window.location.href).href;
 
@@ -281,7 +328,8 @@ export function initHeroCanvas(prefersReducedMotion) {
     resizeTimer = setTimeout(function() {
       resizeTimer = 0;
       sizeCanvas();
-      buildEdge(canvas.img);
+      drawStaticFrame(canvas.img);
+      if (heroEffectsPrepared) buildEdge(canvas.img);
     }, 180);
   }, { passive: true });
 
@@ -309,6 +357,10 @@ export function initHeroCanvas(prefersReducedMotion) {
   window.addEventListener('beforeunload', function() {
     if (resizeTimer) clearTimeout(resizeTimer);
     stopHeroLoop();
+    if (prepareTimer) clearTimeout(prepareTimer);
+    if (prepareIdleHandle && typeof window.cancelIdleCallback === 'function') {
+      window.cancelIdleCallback(prepareIdleHandle);
+    }
     if (heroObserver) heroObserver.disconnect();
   }, { once: true });
 }

package/src/scripts/blogpost/red-queen-tv.js

@@ -8,7 +8,7 @@ export function initRedQueenTv(prefersReducedMotion) {
   var source2 = stage.getAttribute('data-rq-src2') || '';
   if (!source) return;
 
-  var OPEN_DELAY_MS = 500;
+  var OPEN_DELAY_MS = 2000;
   var COLLAPSE_DELAY_MS = 260;
   var FRAME_MS = 33;
   var FALLBACK_STEP_MS = 650;
@@ -24,6 +24,10 @@ export function initRedQueenTv(prefersReducedMotion) {
   var revealTimer = 0;
   var preloadTimeoutTimer = 0;
   var preloadRetryTimers = new Set();
+  var autoDelayTimer = 0;
+  var autoIdleHandle = 0;
+  var autoLoadHandler = null;
+  var autoStarted = false;
 
   var start = 0;
   var width = 320;
@@ -105,6 +109,21 @@ export function initRedQueenTv(prefersReducedMotion) {
     preloadRetryTimers.clear();
   }
 
+  function clearAutoStartTimers() {
+    if (autoDelayTimer) {
+      clearTimeout(autoDelayTimer);
+      autoDelayTimer = 0;
+    }
+    if (autoIdleHandle && typeof window.cancelIdleCallback === 'function') {
+      window.cancelIdleCallback(autoIdleHandle);
+      autoIdleHandle = 0;
+    }
+    if (autoLoadHandler) {
+      window.removeEventListener('load', autoLoadHandler);
+      autoLoadHandler = null;
+    }
+  }
+
   function scheduleSequence(fn, delay) {
     clearSequenceTimer();
     sequenceTimer = setTimeout(function runTask() {
@@ -283,6 +302,7 @@ export function initRedQueenTv(prefersReducedMotion) {
     forceStaticUntil = 0;
     clearSequenceTimer();
     clearPreloadTimers();
+    clearAutoStartTimers();
     if (revealTimer) {
       clearTimeout(revealTimer);
       revealTimer = 0;
@@ -535,22 +555,53 @@ export function initRedQueenTv(prefersReducedMotion) {
   }
 
   function queueAutoPlay() {
-    function run() {
-      clearSequenceTimer();
-      sequenceTimer = setTimeout(function() {
-        if (document.hidden) {
-          pendingAutoPlay = true;
-          return;
-        }
-        startPlayback();
-      }, OPEN_DELAY_MS);
+    var readyByDelay = false;
+    var readyByLoad = document.readyState === 'complete';
+    var readyByIdle = false;
+
+    function tryAutoStart() {
+      if (autoStarted || !readyByDelay || !readyByLoad || !readyByIdle) return;
+      if (document.hidden) {
+        pendingAutoPlay = true;
+        return;
+      }
+      autoStarted = true;
+      clearAutoStartTimers();
+      startPlayback();
     }
 
-    if (document.readyState === 'complete') run();
-    else window.addEventListener('load', run, { once: true });
+    autoDelayTimer = setTimeout(function() {
+      autoDelayTimer = 0;
+      readyByDelay = true;
+      tryAutoStart();
+    }, OPEN_DELAY_MS);
+
+    if (!readyByLoad) {
+      autoLoadHandler = function() {
+        readyByLoad = true;
+        autoLoadHandler = null;
+        tryAutoStart();
+      };
+      window.addEventListener('load', autoLoadHandler, { once: true });
+    }
+
+    if (typeof window.requestIdleCallback === 'function') {
+      autoIdleHandle = window.requestIdleCallback(function() {
+        autoIdleHandle = 0;
+        readyByIdle = true;
+        tryAutoStart();
+      }, { timeout: 1500 });
+    } else {
+      setTimeout(function() {
+        readyByIdle = true;
+        tryAutoStart();
+      }, 600);
+    }
   }
 
   toggle.addEventListener('click', function() {
+    autoStarted = true;
+    clearAutoStartTimers();
     startPlayback();
   });
 

package/src/scripts/blogpost-effects.js

@@ -14,11 +14,48 @@ function prefersReducedMotionEnabled() {
 
 export function initBlogpostEffects() {
   var prefersReducedMotion = prefersReducedMotionEnabled();
-  initReadProgressAndBackToTop(prefersReducedMotion);
-  initNetworkCanvas(prefersReducedMotion);
-  initHeroCanvas(prefersReducedMotion);
-  if (document.querySelector('.rq-tv-stage')) {
+  var networkStarted = false;
+  var redQueenStarted = false;
+
+  function startNetworkCanvas() {
+    if (networkStarted) return;
+    networkStarted = true;
+    initNetworkCanvas(prefersReducedMotion);
+  }
+
+  function startRedQueenTv() {
+    if (redQueenStarted) return;
+    if (!document.querySelector('.rq-tv-stage')) return;
+    redQueenStarted = true;
     initRedQueenTv(prefersReducedMotion);
   }
+
+  function scheduleDeferredStarts() {
+    function fallbackSchedule() {
+      function runAfterLoad() {
+        setTimeout(startNetworkCanvas, 120);
+        setTimeout(startRedQueenTv, 460);
+      }
+
+      if (document.readyState === 'complete') runAfterLoad();
+      else window.addEventListener('load', runAfterLoad, { once: true });
+    }
+
+    if (typeof window.requestIdleCallback !== 'function') {
+      fallbackSchedule();
+      return;
+    }
+
+    window.requestIdleCallback(function() {
+      startNetworkCanvas();
+      window.requestIdleCallback(function() {
+        startRedQueenTv();
+      }, { timeout: 2200 });
+    }, { timeout: 1200 });
+  }
+
+  initReadProgressAndBackToTop(prefersReducedMotion);
+  initHeroCanvas(prefersReducedMotion);
   initPostInteractions(prefersReducedMotion);
+  scheduleDeferredStarts();
 }

package/src/styles/blog-post.css

@@ -27,16 +27,27 @@
 					0 24px 48px rgba(8, 18, 30, 0.68),
 					0 0 34px rgba(8, 18, 30, 0.64);
 			}
-			.hero-stack {
-				position: relative;
-				aspect-ratio: 1020 / 510;
-				background: #0a1218;
-			}
-			.hero-canvas-wrap {
-				position: absolute;
-				inset: 0;
-				z-index: 1;
-				opacity: 0;
+				.hero-stack {
+					position: relative;
+					aspect-ratio: 1020 / 510;
+					background: #0a1218;
+				}
+				.hero-base-wrap {
+					position: absolute;
+					inset: 0;
+					z-index: 0;
+				}
+				.hero-base-image {
+					width: 100%;
+					height: 100%;
+					object-fit: cover;
+					display: block;
+				}
+				.hero-canvas-wrap {
+					position: absolute;
+					inset: 0;
+					z-index: 1;
+					opacity: 0;
 				transition: opacity 260ms ease;
 			}
 			.hero-canvas-wrap.ready { opacity: 1; }