ShapeBlur
shape-blur鼠标揭示的模糊形状高光 WebGL 件 · 圆角矩形/圆/圆环/三角四形态 + 阻尼跟随柔光圆擦亮边缘(ogl·token·reduced-motion 降级静态光晕)
用法
基础用法
默认圆角矩形描边，鼠标靠近时柔光圆擦亮形状边缘；色吃 foreground token。
移动鼠标揭示形状
tsx
<div className="relative h-64 overflow-hidden rounded-xl">
<ShapeBlur variation="round-rect" />
</div>实心圆
variation="circle-fill"，circleSize 放大擦亮区域。
鼠标擦亮实心圆
tsx
<ShapeBlur variation="circle-fill" circleSize={0.4} />圆环描边 + 自定义色
variation="circle-stroke"，color 传任意 CSS 颜色覆盖默认前景色。
鼠标擦亮圆环
tsx
<ShapeBlur
variation="circle-stroke"
color="oklch(0.82 0.16 75)"
circleSize={0.35}
/>三角形
variation="triangle"，蓝紫色填充。
鼠标擦亮三角
tsx
<ShapeBlur
variation="triangle"
color="oklch(0.7 0.22 280)"
circleSize={0.32}
/>何时用
需要一块「鼠标靠近才被柔光擦亮的模糊形状高光」装饰背景（hero 留白处、卡片底的隐约几何）。要的是流体黏球选 MetaBalls，要的是图片放大镜选 Lens；ShapeBlur 是其中最克制的一档——平时几乎隐形，鼠标过处才浮现 SDF 几何边缘。
导入
ts
import { ShapeBlur } from "@hulianui/ui"Props
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| variation | "round-rect"｜"circle-fill"｜"circle-stroke"｜"triangle" | "round-rect" | 形状预设（圆角矩形描边/实心圆/圆环描边/三角填充） |
| shapeSize | number | 1.2 | 形状整体尺寸（GLSL u_shapeSize），越大越大 |
| roundness | number | 0.4 | 圆角程度，仅 round-rect 生效，0=直角 |
| borderSize | number | 0.05 | 描边宽度，仅描边类（round-rect/circle-stroke）生效 |
| circleSize | number | 0.3 | 跟随鼠标的柔光圆半径（擦亮区域大小） |
| circleEdge | number | 0.5 | 柔光圆边缘羽化，越大越柔 |
| color | string | var(--color-foreground) | 形状主色，CSS 颜色或带 --color- 前缀的 token |
| damping | number | 8 | 鼠标跟随阻尼，越大跟随越快、越小越懒 |
| className | string | — | 透传到 root 容器 div |
Slots
| 插槽 | 类型 | 说明 |
|---|---|---|
| fallback | ReactNode | reduced-motion / 无 WebGL 时的静态替代（默认 foreground 径向光晕 div） |
禁忌 / 坑
color给 token 必须带--color-前缀，裸var(--primary)shader 不解析；showcase 里color留空即用默认 foreground。见 [[hulian-token-color-var-needs-color-prefix]]。- WebGL/ogl 组件，仅客户端渲染；StrictMode 双挂载 canvas context 复用风险见 [[webgl-canvas-loseContext-poisons-strictmode-remount]]。
- 组件自带
absolute inset-0 z-0，父容器需relative+overflow-hidden；roundness/borderSize只在对应 variation 下生效，换形状别忘对照。
相关
BorderBeam · ShineBorder · GlareHover · Lens · AnimatedBeam · OrbitingCircles
Playground
移动鼠标揭示形状
<div className="relative h-64 overflow-hidden rounded-xl"
style={{ background: "oklch(0.13 0.02 270)" }}>
<ShapeBlur
variation="round-rect"
shapeSize={1.2}
roundness={0.4}
borderSize={0.05}
circleSize={0.3}
circleEdge={0.5}
damping={8}
/>
</div>