QiuYe UI
视觉与动效

Dot Glass

点阵开孔毛玻璃组件：一种「反直觉」的玻璃效果，只在点阵孔洞里露出背后内容的模糊（blur），其余区域是纯色盖板遮挡，适用于 Header、Navbar 等需要特殊视觉效果的场景。

glassblurbackdropheadernavbareffectdotmask

快速预览

查看 Dot Glass 组件的基本效果

白底黑字
左侧 50% 覆盖
黑底白字
左侧 50% 覆盖

基本用法

使用 Dot Glass 组件的基础示例

导入组件

1import { DotGlass } from "@/components/qiuye-ui/dot-glass";

使用组件

1<DotGlass
2  className="absolute inset-0 left-1/2"
3  dotSize={3}
4  dotGap={6}
5  blur={4}
6  saturation={140}
7  glassAlpha={0.45}
8  coverColor={"#ffffff"}
9></DotGlass>

组件演示

查看组件的各种使用方式和效果

Playground：拖拽对比 + 参数调节

预览区固定展示两种场景：白底黑字 & 黑底白字。拖拽手柄（或用滑块） 调整 DotGlass 覆盖宽度，对比“有/无 DotGlass”的差异。

白色背景 · 黑色文字
文本内容
看 dot 内的模糊
这里模拟常见的标题/段落/按钮布局，方便观察 blur、saturation 的变化效果。
色块/图表
便于看饱和度
提示
推荐先把 coverColor 设为与背景一致（白/黑），再调 blur、dotFade 观察差异。
DotGlass
原始
黑色背景 · 白色文字
文本内容
看 dot 内的模糊
这里模拟常见的标题/段落/按钮布局，方便观察 blur、saturation 的变化效果。
色块/图表
便于看饱和度
提示
推荐先把 coverColor 设为与背景一致（白/黑），再调 blur、dotFade 观察差异。
DotGlass
原始
50%（左侧 DotGlass）

为了获得“点阵开孔”的干净对比，建议让 coverColor 与场景背景 接近：白底用白色，黑底用接近黑色的颜色。

白底场景
黑底场景
3
6
0
4
130
0.00
示例：动态色块跑马灯

底层使用水平等距的循环色块跑马灯，拖拽中线查看 DotGlass 覆盖区域内的点阵开孔毛玻璃效果。