feat(motion): 动效层三件——背景辉光/入场/心跳,页脚撤双入口

- 背景鼠标辉光:ink 色 4% 径向渐变跟随(pointer:fine×非
  reduced-motion 才有 JS,raf 节流 document 级监听 VT 存活)——
  丙灰阶语言的"活背景",触屏/减动效自动隐藏
- 正文入场 rise-in 12px/0.4s(VT 换页自然重放)+ 列表行悬停
  1px 微浮;全量 prefers-reduced-motion 豁免
- 首页"最近心跳":构建期拉 blog 仓最新 commit(gitea API 8s 超时
  静默降级),脉冲点+相对时长——本站自己的脉搏
- 页脚撤「装备/制作」入口(页面保留,用户决策:只删入口)
- E2E 加固:g-chords 修好后 location.href 与 goto 竞态(en 页弦
  导航迟到提交打断 goto)——中断重试模式
- 过程教训:str.replace 静默无操作再犯(锚点瞄错组件文件)——
  脚本未进产物却报"全落地",replace 必须 assert 配对 grep 产物

验证: --mx 鼠标双跳 15.6% 实测跟随;E2E 31/31 PASS(竞态重试后
      确定性);构建 34 页 exit 0

Spec: none (动效层+页脚撤口+测试加固,车道级交付)

Co-authored-by: GLM-5.3
This commit is contained in:
wait4xandGLM-5.3 committed 2026-10-25 22:09:41 +08:00
1 parent 0b6524f53c
commit 363cc616f7
6 files changed
+110 -5

No files matched your search

+19
View File
@@ -44,6 +44,22 @@ const withSlash = (p: string) => (p.endsWith('/') ? p : `${p}/`);
<meta name="theme-color" content="#191d23" media="(prefers-color-scheme: dark)" />
<title>{title}</title>
<ThemeScript />
<script is:inline>
// 背景辉光跟随(一次性注册:document 级监听 × raf 节流,VT 换页存活);
// pointer:fine 且非 reduced-motion 才启用,其余设备辉光层保持隐藏
if (matchMedia('(pointer: fine)').matches && !matchMedia('(prefers-reduced-motion: reduce)').matches) {
let raf = 0, mx = 50, my = 30;
document.addEventListener('mousemove', (e) => {
mx = (e.clientX / innerWidth) * 100;
my = (e.clientY / innerHeight) * 100;
if (!raf) raf = requestAnimationFrame(() => {
raf = 0;
document.documentElement.style.setProperty('--mx', mx + '%');
document.documentElement.style.setProperty('--my', my + '%');
});
}, { passive: true });
}
</script>
<ClientRouter />
<!-- 非阻塞字体 CSS:preload+onload 回切(Lighthouse P0-1:渲染阻塞 708KB 元凶) -->
<link rel="preload" as="style" href={sansVar} onload="this.rel='stylesheet'" />
@@ -76,6 +92,9 @@ const withSlash = (p: string) => (p.endsWith('/') ? p : `${p}/`);
<link rel="alternate" hreflang="x-default" href={new URL(withSlash(zhPath), Astro.site)} />
</head>
<body>
<!-- 背景辉光:跟随鼠标的 ink 色径向渐变(丙灰阶语言,3-4% 透明度;
pointer:fine + 非 reduced-motion 才有 JS 驱动,其余静态隐藏) -->
<div class="bg-glow" aria-hidden="true"></div>
<a class="skip-link" href="#main">跳到正文</a>
<Header />
<main id="main" class="container">