@anglefeint/astro-theme 0.1.20 → 0.1.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@anglefeint/astro-theme",
-  "version": "0.1.20",
+  "version": "0.1.22",
   "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>

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

@@ -15,6 +15,8 @@ export function initHeroCanvas(prefersReducedMotion) {
   var heroStart = 0;
   var heroRaf = 0;
   var resizeTimer = 0;
+  var isInViewport = true;
+  var heroObserver = null;
   var baseCanvas = document.createElement('canvas');
   var baseCtx = baseCanvas.getContext('2d');
   var pixelCanvas = document.createElement('canvas');
@@ -117,6 +119,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,9 +243,24 @@ export function initHeroCanvas(prefersReducedMotion) {
       }
     }
 
+    if (!prefersReducedMotion && !document.hidden && isInViewport) {
+      heroRaf = requestAnimationFrame(heroRender);
+    } else {
+      heroRaf = 0;
+    }
+  }
+
+  function startHeroLoop() {
+    if (prefersReducedMotion || document.hidden || !isInViewport || !canvas.img || heroRaf) return;
     heroRaf = requestAnimationFrame(heroRender);
   }
 
+  function stopHeroLoop() {
+    if (!heroRaf) return;
+    cancelAnimationFrame(heroRaf);
+    heroRaf = 0;
+  }
+
   var img = new Image();
   img.onload = function() {
     canvas.img = img;
@@ -250,7 +271,7 @@ export function initHeroCanvas(prefersReducedMotion) {
       ctx.drawImage(baseCanvas, 0, 0);
       return;
     }
-    heroRaf = requestAnimationFrame(heroRender);
+    startHeroLoop();
   };
   img.src = new URL(src, window.location.href).href;
 
@@ -267,16 +288,27 @@ export function initHeroCanvas(prefersReducedMotion) {
   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 (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

@@ -124,67 +124,40 @@ export function initRedQueenTv(prefersReducedMotion) {
     preloadRetryTimers.add(id);
   }
 
-  function preloadGif(item, token, attempt, done) {
+  function preloadDecoderData(item, token, attempt, done) {
     if (token !== playToken || !isPlaying) return;
     var tryCount = typeof attempt === 'number' ? attempt : 0;
     var cachedData = mediaDataCache[item.url];
-
-    if (cachedData instanceof ArrayBuffer) {
-      if (typeof ImageDecoder === 'undefined') {
-        done(true);
+    function retryOrFail() {
+      if (tryCount >= PRELOAD_RETRY_MAX) {
+        done(false);
         return;
       }
-      var cachedDecoder = new ImageDecoder({ data: cachedData, type: item.type });
-      cachedDecoder.tracks.ready.then(async function() {
-        var result = await cachedDecoder.decode({ frameIndex: 0 });
+      var retryDelay = Math.min(1800, RETRY_BASE_MS * (tryCount + 1));
+      schedulePreloadRetry(function() {
+        preloadDecoderData(item, token, tryCount + 1, done);
+      }, retryDelay);
+    }
+
+    function verifyBuffer(buffer) {
+      mediaDataCache[item.url] = buffer;
+      var decoder = new ImageDecoder({ data: buffer, type: item.type });
+      decoder.tracks.ready.then(async function() {
+        var result = await decoder.decode({ frameIndex: 0 });
         if (result && result.image && result.image.close) result.image.close();
         done(true);
-      }).catch(function() {
-        if (tryCount >= PRELOAD_RETRY_MAX) {
-          done(false);
-          return;
-        }
-        var retryDelay = Math.min(1800, RETRY_BASE_MS * (tryCount + 1));
-        schedulePreloadRetry(function() {
-          preloadGif(item, token, tryCount + 1, done);
-        }, retryDelay);
-      });
+      }).catch(retryOrFail);
+    }
+
+    if (cachedData instanceof ArrayBuffer) {
+      verifyBuffer(cachedData);
       return;
     }
 
     fetch(resolveItemUrl(item))
       .then(function(response) { return response.arrayBuffer(); })
-      .then(function(buffer) {
-        mediaDataCache[item.url] = buffer;
-        if (typeof ImageDecoder === 'undefined') {
-          done(true);
-          return;
-        }
-        var decoder = new ImageDecoder({ data: buffer, type: item.type });
-        decoder.tracks.ready.then(async function() {
-          var result = await decoder.decode({ frameIndex: 0 });
-          if (result && result.image && result.image.close) result.image.close();
-          done(true);
-        }).catch(function() {
-          if (tryCount >= PRELOAD_RETRY_MAX) {
-            done(false);
-            return;
-          }
-          var retryDelay = Math.min(1800, RETRY_BASE_MS * (tryCount + 1));
-          schedulePreloadRetry(function() {
-            preloadGif(item, token, tryCount + 1, done);
-          }, retryDelay);
-        });
-      }).catch(function() {
-        if (tryCount >= PRELOAD_RETRY_MAX) {
-          done(false);
-          return;
-        }
-        var retryDelay = Math.min(1800, RETRY_BASE_MS * (tryCount + 1));
-        schedulePreloadRetry(function() {
-          preloadGif(item, token, tryCount + 1, done);
-        }, retryDelay);
-      });
+      .then(verifyBuffer)
+      .catch(retryOrFail);
   }
 
   function preloadImage(item, token, attempt, done) {
@@ -235,8 +208,9 @@ export function initRedQueenTv(prefersReducedMotion) {
       if (left <= 0) finish(!failed);
     }
 
+    var hasImageDecoder = typeof ImageDecoder !== 'undefined';
     playlist.forEach(function(item) {
-      if (item.type === 'image/gif') preloadGif(item, token, 0, markDone);
+      if (hasImageDecoder) preloadDecoderData(item, token, 0, markDone);
       else preloadImage(item, token, 0, markDone);
     });
   }

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

@@ -154,9 +154,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: "";