DotField
dot-field一片会被指针推挤鼓胀、并泛起辉光的点阵
用法
基础用法
点阵背景，移动鼠标推挤点阵并在下方泛起辉光；颜色默认吃 chart / primary token。
由正文决定容器高度，前景内容叠在可交互的点阵背景上方。
tsx
<div className="relative overflow-hidden rounded-xl bg-neutral-950 p-8">
<DotField />
<div className="relative z-10">由正文决定容器高度的前景内容</div>
</div>稀疏点阵 + 强鼓胀
调大 dotSpacing 让点阵更稀疏，加大 bulgeStrength / cursorRadius 得到更夸张的隆起。
由正文决定容器高度，前景内容叠在可交互的点阵背景上方。
tsx
<DotField dotSpacing={22} dotRadius={2} bulgeStrength={80} cursorRadius={260} />波浪起伏 + 星点闪烁
waveAmplitude 让点阵整体做正弦呼吸，sparkle 让少量点偶尔放大成星点。
由正文决定容器高度，前景内容叠在可交互的点阵背景上方。
tsx
<DotField waveAmplitude={5} sparkle dotSpacing={16} />自定义颜色
color 控制点色、glowColor 控制辉光色；任意 CSS 颜色字符串皆可。
由正文决定容器高度，前景内容叠在可交互的点阵背景上方。
tsx
<DotField color="oklch(0.75 0.2 50)" glowColor="oklch(0.7 0.18 200)" />何时用
需要可交互、随光标鼓胀发光的点阵背景时用（科技产品 Hero、控制台底纹、空状态）。要纯静态 CSS 点阵底纹用 DotPattern（轻量、不吃 GPU）；要光幕/旋涡用 Beams / Balatro；DotField 是 canvas2d 实时交互场，强调光标涟漪与隆起，比 DotPattern 重但有交互。
导入
ts
import { DotField } from "@hulianui/ui"Props
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| dotRadius | number | 1.5 | 单个点的绘制半径（px），建议 1-3 |
| dotSpacing | number | 14 | 相邻点间距（px），越大越稀疏，建议 8-24 |
| cursorRadius | number | 220 | 光标影响半径（px），鼠标周围多大范围内的点被推挤 |
| bulgeStrength | number | 56 | 鼓胀强度（px），点被推离原位的最大位移；0=仅随光标发光 |
| color | string | --color-chart-1 | 点阵基色，CSS 颜色字符串；token 须带 --color- 前缀 |
| glowColor | string | --color-primary | 光标处径向辉光颜色 |
| glowRadius | number | 160 | 辉光半径（px）；0=关闭辉光 |
| waveAmplitude | number | 0 | 波浪振幅（px），全局正弦起伏的「呼吸」感；0=无波浪 |
| sparkle | boolean | false | 是否开启随机闪烁（少量点偶尔放大成星点） |
| className | string | - | 透传到根容器的额外 className |
| style | CSSProperties | - | 透传到根容器的内联样式 |
禁忌 / 坑
- token 颜色须带 `--color-` 前缀：喂给 canvas 的
color/glowColor传 CSS 变量必须写完整名（如var(--color-chart-1)），裸var(--chart-1)canvas 不解析 → 点画成黑色/辉光消失。见 [[hulian-token-color-var-needs-color-prefix]]。 - 客户端渲染：依赖 canvas2d +
requestAnimationFrame，SSR/reduced-motion 下降级静态点阵；勿在 server component 直接挂载实时逻辑。 - 定位上下文：父容器必须用
relative或其他非static的定位方式建立定位上下文，并建议配合overflow-hidden；DotField 自带absolute inset-0铺满父容器。前景内容使用relative z-10叠在点阵上方，容器高度可以完全由带 padding 的正文决定。
相关
DotPattern · GridPattern · StripedPattern · Spotlight · RetroGrid · Ripple
Playground
由正文决定容器高度，前景内容叠在可交互的点阵背景上方。
<div className="relative overflow-hidden rounded-xl p-8"
style={{ background: "oklch(0.14 0.02 280)" }}>
<DotField
dotSpacing={14}
dotRadius={1.5}
bulgeStrength={56}
cursorRadius={220}
waveAmplitude={0}
sparkle={false}
/>
<div className="relative z-10">由正文决定容器高度的前景内容</div>
</div>