GridDistortion
grid-distortion鼠标拖拽的液态网格扭曲 WebGL 背景 · 数据纹理位移场 + 鼠标速度涟漪/弛豫回弹(ogl·零外部资源默认程序化网格底纹·token 着色·reduced-motion 降级)
用法
基础用法
不传 imageSrc 时程序化生成 chart token 网格底纹，移动鼠标推出涟漪。
移动鼠标扭曲网格
tsx
<div className="relative h-64 overflow-hidden rounded-xl bg-neutral-950">
<GridDistortion />
</div>高密度 + 强扭曲
grid 调高网格更细、涟漪更平滑；strength 越大涟漪越剧烈。
移动鼠标扭曲网格
tsx
<GridDistortion grid={24} strength={0.3} mouse={0.18} />余韵长（高弛豫）
relaxation 越接近 1 涟漪衰减越慢、余韵越长。
移动鼠标扭曲网格
tsx
<GridDistortion relaxation={0.96} strength={0.2} />自定义底纹主色
color 改网格底纹主色（仅 imageSrc 未传时生效）。
移动鼠标扭曲网格
tsx
<GridDistortion color="oklch(0.72 0.22 30)" grid={18} />何时用
需要"鼠标划过即液态涟漪扭曲"的强交互网格背景（hero、互动落地页）时用。要静态不动的几何网格用 GridPattern；要复古透视网格地平线用 RetroGrid；要鼠标聚光不要扭曲用 Spotlight。本组件交互核心是鼠标速度驱动的位移涟漪 + 弛豫回弹，也可扭曲传入图片。
导入
ts
import { GridDistortion } from "@hulianui/ui"Props
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| grid | number | 15 | 位移网格边长（格子数），JS 每帧迭代 grid²，建议 8–30 |
| mouse | number | 0.1 | 鼠标影响半径因子（相对网格比例），影响范围 = grid × mouse |
| strength | number | 0.15 | 位移强度，鼠标速度 × 该系数写入位移场，越大涟漪越剧烈 |
| relaxation | number | 0.9 | 弛豫系数（每帧衰减，0–1），越近 1 余韵越长 |
| imageSrc | string | — | 被扭曲的图像；不传则程序化生成 chart token 网格底纹（推荐）；传入需同源或 CORS |
| color | string | --color-chart-1 | 网格底纹主色（仅 imageSrc 未传时生效），任意 CSS 颜色 |
| className | string | — | 透传根容器（或兜底 div） |
Slots
| 插槽 | 类型 | 说明 |
|---|---|---|
| fallback | ReactNode | reduced-motion / 无 WebGL 时的静态替代内容（默认网格底纹 div） |
禁忌 / 坑
- WebGL/ogl 客户端渲染：放在
"use client"边界内；SSR / 无 WebGL 仅出静态网格底纹 fallback。 grid是 JS 侧每帧 O(grid²) 迭代，调到 30 以上会明显吃 CPU，谨慎。- 传
imageSrc扭曲外部图须同源或目标开启 CORS，否则 WebGL 纹理被污染读取失败。 - 根需放进
relative overflow-hidden定位容器并自带高度（如h-64）；扭曲交互依赖指针事件，移动端退化静态。
相关
DotPattern · GridPattern · StripedPattern · Spotlight · RetroGrid · Ripple
Playground
移动鼠标扭曲网格
<div className="relative h-64 overflow-hidden rounded-xl"
style={{ background: "oklch(0.14 0.02 255)" }}>
<GridDistortion
grid={15}
mouse={0.1}
strength={0.15}
relaxation={0.9}
/>
</div>