GridMotion
grid-motion倾斜网格视差背景 · 鼠标横移每行奇偶反向弹性追随 + 中心径向光晕(零依赖 motion useSpring·token·reduced-motion)
用法
基础用法
默认 4×7 网格，奇偶行随鼠标横向反向视差平移；不足时用占位文字补齐。
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12
Item 13
Item 14
Item 15
Item 16
Item 17
Item 18
Item 19
Item 20
Item 21
Item 22
Item 23
Item 24
Item 25
Item 26
Item 27
Item 28
tsx
<div className="relative h-72 overflow-hidden rounded-xl bg-neutral-950">
<GridMotion className="absolute inset-0" />
</div>自定义文字 + 光晕色
items 传内容数组（字符串当文字，http 开头当图片），gradientColor 改中心光晕。
瑚琏
组件库
企业级
高质量
原生适配
Token
动效
瑚琏
组件库
企业级
高质量
原生适配
Token
动效
瑚琏
组件库
企业级
高质量
原生适配
Token
动效
瑚琏
组件库
企业级
高质量
原生适配
Token
动效
tsx
<GridMotion
className="absolute inset-0"
gradientColor="var(--color-chart-1)"
items={["瑚琏", "组件库", "企业级", "高质量", "原生适配", "Token", "动效"]}
/>紧凑网格 + 小视差
rows/columns 加密网格，maxMoveAmount 控制每行最大平移幅度。
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12
Item 13
Item 14
Item 15
Item 16
Item 17
Item 18
Item 19
Item 20
Item 21
Item 22
Item 23
Item 24
Item 25
Item 26
Item 27
Item 28
Item 29
Item 30
Item 31
Item 32
Item 33
Item 34
Item 35
Item 36
Item 37
Item 38
Item 39
Item 40
Item 41
Item 42
Item 43
Item 44
Item 45
Item 46
Item 47
Item 48
Item 49
Item 50
Item 51
Item 52
Item 53
Item 54
tsx
<GridMotion
className="absolute inset-0"
rows={6}
columns={9}
maxMoveAmount={160}
gradientColor="var(--color-chart-4)"
/>强透视（大旋转 + 大视差）
rotate 调透视斜切角度，maxMoveAmount 越大视差越夸张。
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12
Item 13
Item 14
Item 15
Item 16
Item 17
Item 18
Item 19
Item 20
Item 21
Item 22
Item 23
Item 24
Item 25
Item 26
Item 27
Item 28
tsx
<GridMotion className="absolute inset-0" rotate={-25} maxMoveAmount={420} />何时用
需要把图片/文字/图标铺成倾斜网格、随鼠标横移产生奇偶行反向视差的 hero 背景时用。要纯几何网格底纹（无内容、无视差）用 GridPattern；要带消失点的复古透视网格用 RetroGrid。
导入
ts
import { GridMotion } from "@hulianui/ui"Props
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| items | ReactNode[] | 占位文字「Item N」 | 网格单元内容。字符串以 http 开头视为图片 URL，否则当文字；ReactNode 直接渲染。超过 行×列 截断，不足补占位 |
| rows | number | 4 | 网格行数，每行为独立视差平移单元（奇偶行反向） |
| columns | number | 7 | 网格列数 |
| gradientColor | string | var(--color-primary) | 中心径向光晕颜色，从画布中心向外渐隐 |
| maxMoveAmount | number | 300 | 鼠标横移时每行最大平移幅度(px)，越大视差越夸张 |
| rotate | number | -15 | 网格整体旋转角度(deg)，营造透视斜切 |
| className | string | — | 透传根容器 className |
| style | CSSProperties | — | 透传根容器内联样式 |
禁忌 / 坑
- 父容器必须
relative + overflow-hidden + 定高，组件靠absolute inset-0铺满；缺高度则不可见。 - 视差/光晕走客户端 motion
useSpring，SSR 首帧无动画，属正常。reduced-motion 下视差降级。 - 自定义
gradientColor传 CSS 变量须用带--color-前缀的 token（如var(--color-chart-1)），裸var(--primary)不解析，见 [[hulian-token-color-var-needs-color-prefix]]。
相关
DotPattern · GridPattern · StripedPattern · Spotlight · RetroGrid · Ripple
Playground
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12
Item 13
Item 14
Item 15
Item 16
Item 17
Item 18
Item 19
Item 20
Item 21
Item 22
Item 23
Item 24
Item 25
Item 26
Item 27
Item 28
<div className="relative h-72 overflow-hidden rounded-xl"
style={{ background: "oklch(0.14 0.02 255)" }}>
<GridMotion
className="absolute inset-0"
rows={4}
columns={7}
maxMoveAmount={300}
rotate={-15}
/>
</div>