跳转到主内容
◆ Strata · Frost Layer RFC

给分层表面
加一层磨砂

Strata 的表面原本是不透明的分层底色 —— 结构清晰，但 backdrop-filter 在这种背景上等于无效， 因为没有东西可模糊。这一版先补一层「基底」，再把表面换成半透明玻璃： 发丝线、等宽注记、同心圆角、色相轨道全部原样保留。

磨砂档位
模糊半径
18px
04
表面档位 · tiers
18px
基准模糊半径
08
色相轨道 · hues
1px
发丝线 · hairline
01

极光层

四个大尺度径向渐变，取自 Strata 已有的色相轨道（蓝 / 青 / 紫 / 青绿），透明度 18–34%，只做 transform 位移，因此是合成层动画，不触发重排重绘。

4 orbs · 46–64s drift
02

细网格

沿用 band--grid 的线宽与节奏，用一个径向遮罩把网格压到页面顶部三分之二。它的作用是给模糊一个可测的参照物 —— 网格在霜面下会糊掉，在平面上一根不少。

76px · radial mask
03

颗粒层

一张 feTurbulence 生成的噪点贴图平铺，overlay 混合。它让大面积渐变不再出现色带，也把「玻璃」和「塑料」区分开 —— 磨砂的本质是散射，不是透明。

180px tile · overlay 5%

被模糊物

exhibit · blur 生效条件
[ 源图形 · 未处理 ]
[ 磨砂片 · blur var(--frost-blur) ]

左侧是原始的色块与网格。磨砂片盖住的区域里， 网格糊掉了，文字却依然锐利 —— 这正是磨砂与「半透明」的区别：模糊只发生在背板。

[*] 关掉顶部开关到「关闭」，这一格里的左半边和右半边就都变成纯色 —— 因为基底层一起消失了。

档位名称不透明度模糊用途判据
T1 逸散 58% 22px 导航栏、滚动进度、贴边元素 透明度最高，因为它必须让底下滚过的内容被感知到
T2 常规 74% 18px 卡片、面板、矩阵、读数组 主力档位。文字密度中等，模糊半径取 18px 是锐利与柔化的平衡点
T3 密读 90% 12px 代码块、终端、数据表格 磨砂强度与文字密度成反比 —— 密读区只留一点底噪，不做高光
T4 浮层 82% 28px 弹窗、下拉、命令面板 唯一允许同时拥有边框与投影的档位，因为它确实浮在内容之上

实物 · T2 常规表面

live specimens

卡片 Card

T2

上缘一道 1px 受光，下缘一道 1px 压暗。玻璃的厚度感来自这两条边， 而不是投影 —— 所以静态卡片依然只有发丝线，符合原系统的 Kumo 规则。

backdrop-filter saturate 165%

面板 Pane

header 更实

页眉在磨砂主体上再叠一层浅色玻璃，形成第二级层次。 两级都用同一个模糊半径，所以不会有「两种玻璃」的割裂感。

下沉腔体 · inset well

凹陷感来自 inset 内阴影，不来自更深的底色 —— 底色一深，磨砂就死了。

基站延迟ms
42

矩阵格共用一条发丝线底板，磨砂后分隔线一根不少。

吞吐req/s
1.8k

格子自己也是半透明玻璃，透过它看到的是已被模糊的背板。

错误率%
0.03

数字用等宽与 tabular-nums，磨砂不会让它变糊。

Aurora substrate ok
Hairline matrix ok
Same-frame blur budget 6 max
Reduced transparency handled

配方片段

css
四档只差三个变量：
--fx-* 底色 · 模糊半径 · 是否要斜向高光
组件不需要知道自己是第几档。
src/styles/strata.css § FROST 
/* T2 · 常规表面（卡片 / 面板） */
.fx-frost .card {
  background-color: var(--fx-card);   /* 表面色 74% */
  background-image: var(--fx-sheen);  /* 斜向高光 */
  border: 1px solid var(--line);      /* 发丝线保留 */
  backdrop-filter: blur(var(--frost-blur))
                  saturate(var(--frost-sat));
  box-shadow:
    inset 0 1px 0 var(--fx-rim),      /* 上缘受光 */
    inset 0 -1px 0 var(--fx-bite);    /* 下缘压暗 */
}
frost@strata:~ 
$ nw strata --audit --layer=frost
[*] 基底层          3 draws   aurora / grid / grain
[*] 磨砂表面        4 tiers   T1..T4
[*] 发丝线          1 px      全部保留
[*] 同屏 blur 层     6 max     超出即降级为 T3
[ok] 文字对比度      AA+       密读区 alpha >= 0.88
[ok] 回退           reduced-transparency / no-backdrop-filter

发丝线在磨砂下依然连续

hairline integrity
层角色不透明度发丝线投影
T1导航 / 贴边0.581px 下缘否
T2卡片 / 面板0.741px 全边否（仅悬停）
T3代码 / 表格0.901px 全边否
T4弹窗 / 下拉0.821px 全边是
[ A ] 现行 · 平铺底色

边缘服务

edge
P99 latency
42ms
缓存命中
96.4%
回源
3.6%
[ B ] 提案 · 磨砂玻璃

边缘服务

edge
P99 latency
42ms
缓存命中
96.4%
回源
3.6%

[*] 注意 B 面板里网格在卡片边缘外仍然清晰、在卡片内部才柔化 —— 这正是 backdrop-filter 的作用范围：只模糊元素背后的内容，不影响元素自身的绘制。

01 受光在上 每个磨砂面只加一条 inset 0 1px 0 的上缘高光，下缘用 inset 0 -1px 0 压暗。玻璃的厚度感来自边缘，不来自投影。
02 静态面不加投影 沿用 Kumo 规则：静态表面只有发丝线 + 边缘光，投影留给真正浮起的 T4。
03 色相不补间 悬停只抬高边框、边缘光与位移（translateY(-2px)），不改变色相 —— 原系统的 motion 规则完整保留。
04 模糊半径分层 四档各自固定半径，不允许在页面里随手写 blur(20px)。半径是层级信号，不是装饰参数。
05 同屏预算 一个视口内最多 6 个 backdrop-filter 层。超出的卡片降级到 T3（高不透明、低模糊），视觉几乎无差别但开销减半。
06 背景必须非均匀 磨砂的前提是「背后有东西可模糊」。纯色背景上的 backdrop-filter 等于无效 —— 所以基底层不是装饰，是这套方案的前置条件。

性能

backdrop-filter 会为每个表面建立一次背板采样。超过 6 层同屏时， 超出部分自动降级为 T3（alpha 0.90 / blur 12px），肉眼几乎无差别。

budget · 6 layers

用户偏好

prefers-reduced-transparency 下关闭全部模糊并把表面提到 0.96； prefers-reduced-motion 下极光停止漂移。两条都是 CSS 一行，无 JS。

a11y · zero js

兼容性

用 @supports not (backdrop-filter) 整体退回不透明表面 —— 宁可完全不磨砂，也不留下半透明的鬼影。浅色主题同理由 token 覆盖。

fallback · opaque

落地清单

3 files
  1. strata.css · 追加 FROST tokens（含 light 覆盖）
  2. strata.css · 追加第 13 节 FROST LAYER 整块 + 第 14 节回退
  3. StrataLayout.astro · 插入基底层 DOM 与档位切换，默认常开

[*] 组件（Card / Panel / Matrix / CodeBlock…）不需要改任何一行， 因为 FROST LAYER 直接作用在既有类名上。