PixelTrail
pixel-trail鼠标划过点亮背后的像素网格、拖尾随时间淡灭的颗粒余晖背景 · 自维护 CPU 拖尾缓冲 + ogl data texture 着色 + 可选 gooey 液态融合(ogl·token·reduced-motion)
用法
基础用法
铺满容器，鼠标划过点亮像素网格，拖尾随时间淡灭。
在此区域内移动鼠标
tsx
<div className="relative h-56 overflow-hidden rounded-xl"
style={{ background: "oklch(0.14 0.02 255)" }}>
<PixelTrail className="absolute inset-0" />
</div>细密网格 + 短余晖
调高 gridSize 让像素更精细，压低 maxAge 让拖尾更短促。
在此区域内移动鼠标
tsx
<PixelTrail
gridSize={72}
maxAge={200}
color="var(--color-chart-2)"
className="absolute inset-0"
/>粗颗粒 + 长余晖
降低 gridSize、加大 trailSize 与 maxAge，复古颗粒 + 长拖尾。
在此区域内移动鼠标
tsx
<PixelTrail
gridSize={24}
trailSize={0.16}
maxAge={600}
color="var(--color-chart-4)"
className="absolute inset-0"
/>黏液融合
gooey=true 启用 SVG 滤镜，相邻像素融合成有机液态团块。
在此区域内移动鼠标
tsx
<PixelTrail
gridSize={48}
trailSize={0.14}
gooey
gooeyStrength={9}
color="var(--color-chart-1)"
className="absolute inset-0"
/>何时用
需要一块「鼠标划过点亮像素格、余晖淡灭」的交互背景（hero、404、空状态铺底），可切硬边像素或 gooey 液态团块。要的是流体溅彩跟随光标选 SplashCursor；要的是弹性飘带跟随选 Ribbons；PixelTrail 是其中「复古像素颗粒感」的一档。
导入
ts
import { PixelTrail } from "@hulianui/ui"Props
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| gridSize | number | 40 | 横向像素格子数（纵向按比例自动推算保持方格），建议 16–120 |
| trailSize | number | 0.1 | 拖尾影响半径（占容器短边比例 0–1），越大拖尾越粗 |
| maxAge | number | 320 | 单格点亮后存活时长（ms），越大余晖越久 |
| color | string | var(--color-chart-1) | 像素点颜色，token 必须带 --color- 前缀 |
| gooey | boolean | false | 启用黏液滤镜：相邻点融合成液态团块而非硬边方格 |
| gooeyStrength | number | 8 | gooey 融合强度（高斯模糊半径 px），仅 gooey=true 生效 |
| className | string | — | 透传到根容器（默认 block h-full w-full，由外层控尺寸） |
| style | CSSProperties | — | 透传到根容器 |
禁忌 / 坑
color喂 token 必须带--color-前缀，裸var(--primary)shader 不解析。见 [[hulian-token-color-var-needs-color-prefix]]。- WebGL/ogl 组件，仅客户端渲染；StrictMode 双挂载 canvas context 复用风险见 [[webgl-canvas-loseContext-poisons-strictmode-remount]]。
- 父容器需
relative+overflow-hidden，组件铺absolute inset-0；深色底上像素余晖最清晰。
相关
BorderBeam · ShineBorder · GlareHover · Lens · AnimatedBeam · OrbitingCircles
Playground
在此区域内移动鼠标
<div className="relative h-56 overflow-hidden rounded-xl"
style={{ background: "oklch(0.14 0.02 255)" }}>
<PixelTrail
gridSize={40}
trailSize={0.1}
maxAge={320}
gooey={false}
className="absolute inset-0"
/>
</div>