@anglefeint/astro-theme 0.1.21 → 0.1.23

package/package.json

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

package/src/i18n/messages.ts

@@ -36,6 +36,10 @@ export type Messages = {
 		backToBlog: string;
 		related: string;
 		regenerate: string;
+		toastP10: string;
+		toastP30: string;
+		toastP60: string;
+		toastDone: string;
 	};
 };
 
@@ -71,6 +75,10 @@ export const DEFAULT_MESSAGES: Record<Locale, Messages> = {
 			backToBlog: 'Back to blog',
 			related: 'Related',
 			regenerate: 'Regenerate',
+			toastP10: 'context parsed 10%',
+			toastP30: 'context parsed 30%',
+			toastP60: 'inference stable 60%',
+			toastDone: 'output finalized',
 		},
 	},
 	ja: {
@@ -104,6 +112,10 @@ export const DEFAULT_MESSAGES: Record<Locale, Messages> = {
 			backToBlog: 'ブログへ戻る',
 			related: '関連記事',
 			regenerate: '再生成',
+			toastP10: '文脈解析 10%',
+			toastP30: '文脈解析 30%',
+			toastP60: '推論安定 60%',
+			toastDone: '出力確定',
 		},
 	},
 	ko: {
@@ -137,6 +149,10 @@ export const DEFAULT_MESSAGES: Record<Locale, Messages> = {
 			backToBlog: '블로그로 돌아가기',
 			related: '관련 글',
 			regenerate: '재생성',
+			toastP10: '컨텍스트 파싱 10%',
+			toastP30: '컨텍스트 파싱 30%',
+			toastP60: '추론 안정화 60%',
+			toastDone: '출력 완료',
 		},
 	},
 	es: {
@@ -170,6 +186,10 @@ export const DEFAULT_MESSAGES: Record<Locale, Messages> = {
 			backToBlog: 'Volver al blog',
 			related: 'Relacionados',
 			regenerate: 'Regenerar',
+			toastP10: 'contexto analizado 10%',
+			toastP30: 'contexto analizado 30%',
+			toastP60: 'inferencia estable 60%',
+			toastDone: 'salida finalizada',
 		},
 	},
 	zh: {
@@ -203,6 +223,10 @@ export const DEFAULT_MESSAGES: Record<Locale, Messages> = {
 			backToBlog: '返回博客',
 			related: '相关文章',
 			regenerate: '重新生成',
+			toastP10: '语境解析 10%',
+			toastP30: '语境解析 30%',
+			toastP60: '推理稳定 60%',
+			toastDone: '输出完成',
 		},
 	},
 };

package/src/layouts/BlogPost.astro

@@ -90,7 +90,15 @@ const enableRedQueen = THEME.EFFECTS.ENABLE_RED_QUEEN;
 		)}
 		<div class="ai-read-progress" aria-hidden="true"></div>
 		<button type="button" class="ai-back-to-top" aria-label="Back to top" title="Back to top">↑</button>
-		<div class="ai-stage-toast" aria-live="polite" aria-atomic="true"></div>
+			<div
+				class="ai-stage-toast"
+				aria-live="polite"
+				aria-atomic="true"
+				data-toast-p10={messages.blog.toastP10}
+				data-toast-p30={messages.blog.toastP30}
+				data-toast-p60={messages.blog.toastP60}
+				data-toast-done={messages.blog.toastDone}
+			></div>
 		<div class="ai-mouse-glow" aria-hidden="true"></div>
 		<div class="ai-depth-blur" aria-hidden="true"></div>
 		<div class="ai-thinking-dots" aria-hidden="true"><span></span><span></span><span></span></div>
@@ -100,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,6 +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');
@@ -117,6 +123,10 @@ export function initHeroCanvas(prefersReducedMotion) {
   }
 
   function heroRender(t) {
+    if (prefersReducedMotion || document.hidden || !isInViewport) {
+      heroRaf = 0;
+      return;
+    }
     if (!heroStart) heroStart = t;
     var elapsed = (t - heroStart) * 0.001;
     frameCount++;
@@ -237,20 +247,78 @@ export function initHeroCanvas(prefersReducedMotion) {
       }
     }
 
+    if (!prefersReducedMotion && !document.hidden && isInViewport) {
+      heroRaf = requestAnimationFrame(heroRender);
+    } else {
+      heroRaf = 0;
+    }
+  }
+
+  function startHeroLoop() {
+    if (prefersReducedMotion || document.hidden || !isInViewport || !canvas.img || !heroEffectsPrepared || heroRaf) return;
     heroRaf = requestAnimationFrame(heroRender);
   }
 
+  function stopHeroLoop() {
+    if (!heroRaf) return;
+    cancelAnimationFrame(heroRaf);
+    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;
     }
-    heroRaf = requestAnimationFrame(heroRender);
+    // 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;
 
@@ -260,23 +328,39 @@ export function initHeroCanvas(prefersReducedMotion) {
     resizeTimer = setTimeout(function() {
       resizeTimer = 0;
       sizeCanvas();
-      buildEdge(canvas.img);
+      drawStaticFrame(canvas.img);
+      if (heroEffectsPrepared) buildEdge(canvas.img);
     }, 180);
   }, { passive: true });
 
   function onHeroVisibilityChange() {
     if (prefersReducedMotion) return;
     if (document.hidden) {
-      if (heroRaf) cancelAnimationFrame(heroRaf);
-      heroRaf = 0;
-    } else if (canvas.img && !heroRaf) {
-      heroRaf = requestAnimationFrame(heroRender);
+      stopHeroLoop();
+    } else {
+      startHeroLoop();
     }
   }
 
+  if (!prefersReducedMotion && typeof IntersectionObserver !== 'undefined') {
+    heroObserver = new IntersectionObserver(function(entries) {
+      var entry = entries[0];
+      if (!entry) return;
+      isInViewport = entry.isIntersecting;
+      if (isInViewport) startHeroLoop();
+      else stopHeroLoop();
+    }, { threshold: 0.02 });
+    heroObserver.observe(shell);
+  }
+
   document.addEventListener('visibilitychange', onHeroVisibilityChange);
   window.addEventListener('beforeunload', function() {
     if (resizeTimer) clearTimeout(resizeTimer);
-    cancelAnimationFrame(heroRaf);
+    stopHeroLoop();
+    if (prepareTimer) clearTimeout(prepareTimer);
+    if (prepareIdleHandle && typeof window.cancelIdleCallback === 'function') {
+      window.cancelIdleCallback(prepareIdleHandle);
+    }
+    if (heroObserver) heroObserver.disconnect();
   }, { once: true });
 }

package/src/scripts/blogpost/read-progress.js

@@ -1,9 +1,22 @@
 export function initReadProgressAndBackToTop(prefersReducedMotion) {
   var progress = document.querySelector('.ai-read-progress');
   var toast = document.querySelector('.ai-stage-toast');
-  var stageSeen = { p30: false, p60: false, p90: false };
+  var stageSeen = { p10: false, p30: false, p60: false, done: false };
   var toastTimer = 0;
   var hasScrolled = false;
+  var toastText = {
+    p10: 'context parsed 10%',
+    p30: 'context parsed 30%',
+    p60: 'inference stable 60%',
+    done: 'output finalized',
+  };
+
+  if (toast && toast.dataset) {
+    toastText.p10 = toast.dataset.toastP10 || toastText.p10;
+    toastText.p30 = toast.dataset.toastP30 || toastText.p30;
+    toastText.p60 = toast.dataset.toastP60 || toastText.p60;
+    toastText.done = toast.dataset.toastDone || toastText.done;
+  }
 
   function showStageToast(msg) {
     if (!toast) return;
@@ -25,17 +38,21 @@ export function initReadProgressAndBackToTop(prefersReducedMotion) {
       if (btn) btn.classList.toggle('visible', scrollTop > 400);
       if (!hasScrolled && scrollTop > 6) hasScrolled = true;
       if (!hasScrolled) return;
+      if (!stageSeen.p10 && p >= 0.1) {
+        stageSeen.p10 = true;
+        showStageToast(toastText.p10);
+      }
       if (!stageSeen.p30 && p >= 0.3) {
         stageSeen.p30 = true;
-        showStageToast('context parsed');
+        showStageToast(toastText.p30);
       }
       if (!stageSeen.p60 && p >= 0.6) {
         stageSeen.p60 = true;
-        showStageToast('inference stable');
+        showStageToast(toastText.p60);
       }
-      if (!stageSeen.p90 && p >= 0.9) {
-        stageSeen.p90 = true;
-        showStageToast('output finalized');
+      if (!stageSeen.done && p >= 0.9) {
+        stageSeen.done = true;
+        showStageToast(toastText.done);
       }
     }
 

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/ai/base.css

@@ -89,19 +89,31 @@ body.ai-page::-webkit-scrollbar-thumb {
     #13070f 100%
   );
 }
+.ai-glow::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  background:
+    radial-gradient(circle at 30% 28%, rgba(164, 220, 255, 0.1), rgba(164, 220, 255, 0) 46%),
+    radial-gradient(circle at 72% 64%, rgba(255, 112, 140, 0.08), rgba(255, 112, 140, 0) 52%);
+  opacity: 0.38;
+  transform: translateZ(0);
+  will-change: opacity;
+}
 .ai-glow-shift {
   animation: ai-glow-shift 25s ease-in-out infinite;
 }
 @keyframes ai-glow-shift {
   0%,
   100% {
-    filter: brightness(1) saturate(1);
+    opacity: 0.32;
   }
   33% {
-    filter: brightness(1.02) saturate(1.1) hue-rotate(5deg);
+    opacity: 0.52;
   }
   66% {
-    filter: brightness(0.99) saturate(1.05) hue-rotate(-3deg);
+    opacity: 0.4;
   }
 }
 /* 柔和光晕：中心径向青蓝光 */

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; }
@@ -154,9 +165,7 @@
 				will-change: transform, opacity;
 				transition:
 					transform 320ms ease,
-					opacity 220ms ease,
-					box-shadow 320ms ease,
-					background 320ms ease;
+					opacity 220ms ease;
 			}
 			.rq-tv::before {
 				content: "";