@anglefeint/astro-theme 0.1.19 → 0.1.21

package/package.json

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

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

@@ -4,13 +4,17 @@ export function initHeroCanvas(prefersReducedMotion) {
 
   var canvas = shell.querySelector('.hero-canvas');
   var wrap = shell.querySelector('.hero-canvas-wrap');
-  if (!canvas || !wrap) return;
+  var heroStack = shell.querySelector('.hero-stack');
+  if (!canvas || !wrap || !heroStack) return;
+  var ctx = canvas.getContext('2d');
+  if (!ctx) return;
 
   var src = canvas.getAttribute('data-hero-src');
   if (!src) return;
 
   var heroStart = 0;
   var heroRaf = 0;
+  var resizeTimer = 0;
   var baseCanvas = document.createElement('canvas');
   var baseCtx = baseCanvas.getContext('2d');
   var pixelCanvas = document.createElement('canvas');
@@ -19,14 +23,17 @@ export function initHeroCanvas(prefersReducedMotion) {
   var noiseCtx = noiseCanvas.getContext('2d');
   var edgeCanvas = document.createElement('canvas');
   var edgeCtx = edgeCanvas.getContext('2d');
+  var edgeWorkCanvas = document.createElement('canvas');
+  var edgeWorkCtx = edgeWorkCanvas.getContext('2d');
   var edgeReady = false;
+  var frameCount = 0;
 
   var EDGE_PHASE = 1.8;
   var REVEAL_PHASE = 2.5;
   var INTRO_END = EDGE_PHASE + REVEAL_PHASE;
 
   function sizeCanvas() {
-    var rect = shell.querySelector('.hero-stack').getBoundingClientRect();
+    var rect = heroStack.getBoundingClientRect();
     var dpr = Math.min(window.devicePixelRatio || 1, 2);
     canvas.width = Math.max(2, Math.round(rect.width * dpr));
     canvas.height = Math.max(2, Math.round(rect.height * dpr));
@@ -55,28 +62,44 @@ export function initHeroCanvas(prefersReducedMotion) {
     baseCanvas.width = w;
     baseCanvas.height = h;
     drawBase(baseCtx, img, w, h);
-    drawBase(edgeCtx, img, w, h);
+    var workW = Math.max(2, Math.round(w * 0.5));
+    var workH = Math.max(2, Math.round(h * 0.5));
+    edgeWorkCanvas.width = workW;
+    edgeWorkCanvas.height = workH;
+    drawBase(edgeWorkCtx, img, workW, workH);
 
-    var srcImage = edgeCtx.getImageData(0, 0, w, h);
+    var srcImage = edgeWorkCtx.getImageData(0, 0, workW, workH);
     var d = srcImage.data;
-    var out = edgeCtx.createImageData(w, h);
+    var out = edgeWorkCtx.createImageData(workW, workH);
     var od = out.data;
+    var rowStride = workW * 4;
 
-    for (var y = 1; y < h - 1; y++) {
-      for (var x = 1; x < w - 1; x++) {
-        var idx = function(px, py) {
-          return ((py * w) + px) * 4;
-        };
-        var i = idx(x, y);
-        function luma(px, py) {
-          var j = idx(px, py);
-          return d[j] * 0.299 + d[j + 1] * 0.587 + d[j + 2] * 0.114;
-        }
+    for (var y = 1; y < workH - 1; y++) {
+      var row = y * rowStride;
+      var rowAbove = row - rowStride;
+      var rowBelow = row + rowStride;
+      for (var x = 1; x < workW - 1; x++) {
+        var i = row + x * 4;
+        var iLeft = i - 4;
+        var iRight = i + 4;
+        var iAbove = rowAbove + x * 4;
+        var iAboveLeft = iAbove - 4;
+        var iAboveRight = iAbove + 4;
+        var iBelow = rowBelow + x * 4;
+        var iBelowLeft = iBelow - 4;
+        var iBelowRight = iBelow + 4;
+
+        var lumAboveLeft = d[iAboveLeft] * 0.299 + d[iAboveLeft + 1] * 0.587 + d[iAboveLeft + 2] * 0.114;
+        var lumAbove = d[iAbove] * 0.299 + d[iAbove + 1] * 0.587 + d[iAbove + 2] * 0.114;
+        var lumAboveRight = d[iAboveRight] * 0.299 + d[iAboveRight + 1] * 0.587 + d[iAboveRight + 2] * 0.114;
+        var lumLeft = d[iLeft] * 0.299 + d[iLeft + 1] * 0.587 + d[iLeft + 2] * 0.114;
+        var lumRight = d[iRight] * 0.299 + d[iRight + 1] * 0.587 + d[iRight + 2] * 0.114;
+        var lumBelowLeft = d[iBelowLeft] * 0.299 + d[iBelowLeft + 1] * 0.587 + d[iBelowLeft + 2] * 0.114;
+        var lumBelow = d[iBelow] * 0.299 + d[iBelow + 1] * 0.587 + d[iBelow + 2] * 0.114;
+        var lumBelowRight = d[iBelowRight] * 0.299 + d[iBelowRight + 1] * 0.587 + d[iBelowRight + 2] * 0.114;
 
-        var gx = -luma(x - 1, y - 1) - 2 * luma(x - 1, y) - luma(x - 1, y + 1)
-          + luma(x + 1, y - 1) + 2 * luma(x + 1, y) + luma(x + 1, y + 1);
-        var gy = -luma(x - 1, y - 1) - 2 * luma(x, y - 1) - luma(x + 1, y - 1)
-          + luma(x - 1, y + 1) + 2 * luma(x, y + 1) + luma(x + 1, y + 1);
+        var gx = -lumAboveLeft - 2 * lumLeft - lumBelowLeft + lumAboveRight + 2 * lumRight + lumBelowRight;
+        var gy = -lumAboveLeft - 2 * lumAbove - lumAboveRight + lumBelowLeft + 2 * lumBelow + lumBelowRight;
         var mag = Math.min(255, Math.sqrt(gx * gx + gy * gy));
 
         od[i] = Math.min(255, mag * 0.4);
@@ -86,15 +109,18 @@ export function initHeroCanvas(prefersReducedMotion) {
       }
     }
 
-    edgeCtx.putImageData(out, 0, 0);
+    edgeWorkCtx.putImageData(out, 0, 0);
+    edgeCtx.clearRect(0, 0, w, h);
+    edgeCtx.imageSmoothingEnabled = true;
+    edgeCtx.drawImage(edgeWorkCanvas, 0, 0, workW, workH, 0, 0, w, h);
     edgeReady = true;
   }
 
   function heroRender(t) {
     if (!heroStart) heroStart = t;
     var elapsed = (t - heroStart) * 0.001;
-    var ctx = canvas.getContext('2d');
-    if (!ctx || !canvas.img) {
+    frameCount++;
+    if (!canvas.img) {
       heroRaf = requestAnimationFrame(heroRender);
       return;
     }
@@ -161,7 +187,7 @@ export function initHeroCanvas(prefersReducedMotion) {
       ctx.fillStyle = barGrad;
       ctx.fillRect(0, scanPos - 30, w, 60);
 
-      if (Math.random() < 0.08) {
+      if ((frameCount % 2) === 0 && Math.random() < 0.08) {
         var glitchY = Math.random() * h;
         var glitchH = 2 + Math.random() * 12;
         var shiftX = (Math.random() - 0.5) * 12;
@@ -171,14 +197,14 @@ export function initHeroCanvas(prefersReducedMotion) {
         ctx.restore();
       }
 
-      if (elapsed >= 6 && Math.random() < 0.025) {
+      if ((frameCount % 3) === 0 && elapsed >= 6 && Math.random() < 0.025) {
         var dropoutY = Math.floor(Math.random() * h);
         var dropoutH = 2 + Math.floor(Math.random() * 2);
         ctx.fillStyle = 'rgba(0, 0, 0, 0.85)';
         ctx.fillRect(0, dropoutY, w, dropoutH);
       }
 
-      if (Math.random() < 0.03) {
+      if ((frameCount % 3) === 0 && Math.random() < 0.03) {
         var burstY = Math.random() * h * 0.8;
         var burstH = 4 + Math.random() * 20;
         if (noiseCanvas.width !== w) {
@@ -221,8 +247,7 @@ export function initHeroCanvas(prefersReducedMotion) {
     buildEdge(img);
     wrap.classList.add('ready');
     if (prefersReducedMotion) {
-      var staticCtx = canvas.getContext('2d');
-      if (staticCtx) staticCtx.drawImage(baseCanvas, 0, 0);
+      ctx.drawImage(baseCanvas, 0, 0);
       return;
     }
     heroRaf = requestAnimationFrame(heroRender);
@@ -230,10 +255,13 @@ export function initHeroCanvas(prefersReducedMotion) {
   img.src = new URL(src, window.location.href).href;
 
   window.addEventListener('resize', function() {
-    if (canvas.img) {
+    if (!canvas.img) return;
+    if (resizeTimer) clearTimeout(resizeTimer);
+    resizeTimer = setTimeout(function() {
+      resizeTimer = 0;
       sizeCanvas();
       buildEdge(canvas.img);
-    }
+    }, 180);
   }, { passive: true });
 
   function onHeroVisibilityChange() {
@@ -248,6 +276,7 @@ export function initHeroCanvas(prefersReducedMotion) {
 
   document.addEventListener('visibilitychange', onHeroVisibilityChange);
   window.addEventListener('beforeunload', function() {
+    if (resizeTimer) clearTimeout(resizeTimer);
     cancelAnimationFrame(heroRaf);
   }, { once: true });
 }

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/prose.css

@@ -50,6 +50,7 @@ body.ai-page .ai-content .prose {
 /* 加载扫描线 */
 .ai-load-scan {
   position: fixed;
+  top: 0;
   left: 0;
   right: 0;
   height: 2px;
@@ -64,14 +65,15 @@ body.ai-page .ai-content .prose {
   animation: ai-scan 0.8s ease-out forwards;
   pointer-events: none;
   z-index: 20;
+  will-change: transform, opacity;
 }
 @keyframes ai-scan {
   0% {
-    top: 0;
+    transform: translateY(0);
     opacity: 1;
   }
   100% {
-    top: 100vh;
+    transform: translateY(100vh);
     opacity: 0.2;
   }
 }

package/src/styles/blog-post.css

@@ -150,11 +150,11 @@
 					inset 0 1px 0 rgba(220, 242, 255, 0.22);
 				overflow: hidden;
 				backdrop-filter: blur(1.5px);
+				transform: translate3d(0, 0, 0);
+				will-change: transform, opacity;
 				transition:
-					width 360ms cubic-bezier(0.23, 1, 0.32, 1),
-					top 320ms ease,
-					padding 320ms ease,
-					border-radius 320ms ease,
+					transform 320ms ease,
+					opacity 220ms ease,
 					box-shadow 320ms ease,
 					background 320ms ease;
 			}
@@ -243,10 +243,10 @@
 				outline-offset: -2px;
 			}
 			.rq-tv.rq-tv-collapsed {
-				top: 27vh;
 				width: 34px;
 				padding: 0;
 				border-radius: 6px;
+				transform: translate3d(0, 2vh, 0);
 				background: linear-gradient(165deg, rgba(34, 58, 78, 0.9), rgba(10, 19, 30, 0.92));
 				box-shadow:
 					0 10px 20px rgba(4, 10, 18, 0.42),
@@ -338,7 +338,7 @@
 				position: absolute;
 				top: 0;
 				bottom: 0;
-				left: -35%;
+				left: 0;
 				width: 35%;
 				background: linear-gradient(
 					90deg,
@@ -346,11 +346,13 @@
 					rgba(164, 228, 255, 0.88),
 					rgba(132, 214, 255, 0)
 				);
+				transform: translateX(-100%);
+				will-change: transform;
 				animation: ai-title-flow-run 3.8s linear infinite;
 			}
 			@keyframes ai-title-flow-run {
 				to {
-					left: 100%;
+					transform: translateX(285%);
 				}
 			}
 			.ai-stage-toast {

package/src/styles/theme-cyber.css

@@ -490,6 +490,7 @@ body.cyber-page ul li a:hover img {
 }
 body.cyber-page .title {
   margin: 0;
+  font-size: 1.2rem;
   line-height: 1;
   transition:
     color 0.2s,