ProgressiveBlur
progressive-blur渐进模糊 · 分层 backdrop-blur + mask 渐变(纯 CSS·RSC)
用法
底部渐进模糊
绝对覆盖在内容上，越靠底部越糊，常用于内容淡出/遮罩文案区。
渐进模糊 · bottom
tsx
<div className="relative overflow-hidden rounded-[var(--radius)] border border-border">
{/* content */}
<ProgressiveBlur side="bottom" />
</div>顶部渐进模糊
side 切换模糊增强方向，顶部最糊适合顶栏吸附场景。
渐进模糊 · top
tsx
<ProgressiveBlur side="top" />横向 · 右侧渐糊
left / right 做横向渐进模糊，常用于横滑列表的边缘暗示。
渐进模糊 · right
tsx
<ProgressiveBlur side="right" />更强分层
layers 增加层数让过渡更平滑，blur 提升基础模糊量。
layers=8 · blur=2
tsx
<ProgressiveBlur side="bottom" layers={8} blur={2} />何时用
需要把内容某一侧（图片墙、长列表、横向滚动条）逐渐模糊淡出做边缘羽化时用，常铺在滚动容器或图片上方做「渐隐遮罩」。它只做单侧渐进模糊叠层；要给边框走光用 BorderBeam/ShineBorder，要做鼠标跟随聚光用 GlareHover，要做局部放大镜用 Lens。
导入
ts
import { ProgressiveBlur } from "@hulianui/ui"Props
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| side | "top" | "bottom" | "left" | "right" | "bottom" | 模糊增强的方向，该侧最糊。 |
| layers | number | — | 分层数，越多过渡越平滑。 |
| blur | number | — | 基础模糊量(px)，逐层翻倍。 |
| className | string | — | 透传到根叠层。 |
禁忌 / 坑
- 父容器必须
position: relative且overflow-hidden，叠层靠绝对定位铺满该侧，否则模糊层会溢出或定位错乱。 - 依赖
backdrop-filter，需作用在有实际内容的同层之上才看得见效果（空背景上无可糊之物）。
相关
BorderBeam · ShineBorder · GlareHover · Lens · AnimatedBeam · OrbitingCircles
Playground
渐进模糊 · bottom
<div className="relative overflow-hidden">
{/* content */}
<ProgressiveBlur side="bottom" />
</div>