RetroGrid
retro-grid复古透视网格 · CSS 滚动 + reduced-motion
用法
基础用法
relative 容器内放一层 RetroGrid 即得透视滚动网格，默认 65° 倾角、12s 一轮、text-border。
tsx
<div className="relative h-56 w-full overflow-hidden rounded-xl border border-border bg-surface">
<RetroGrid />
</div>密格 · 慢速
cellSize 调网格疏密，duration 调滚动周期（越大越慢）。
tsx
<div className="relative h-56 w-full overflow-hidden rounded-xl border border-border bg-surface">
<RetroGrid cellSize={36} duration={24} />
</div>改色与透明度
线色取 currentColor，用 text-* 换色；opacity 调整整体淡入程度。
tsx
<div className="relative h-56 w-full overflow-hidden rounded-xl border border-border bg-surface">
<RetroGrid className="text-primary" opacity={0.7} />
</div>何时用
营造合成波/赛博朋克风的透视滚动网格地平线。要动态透视网格用本组件；要静态平铺线网格用 GridPattern，点状用 DotPattern。
导入
ts
import { RetroGrid } from "@hulianui/ui"Props
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| angle | number | 65 | 透视倾斜角度（度） |
| cellSize | number | 60 | 网格单元像素 |
| opacity | number | 0.5 | 整体不透明度 |
| duration | number | 12 | 滚动一轮秒数（越大越慢） |
继承ComponentPropsWithoutRef<"div">。颜色取currentColor，用text-*工具类控制。
禁忌 / 坑
- 内部
absolute inset-0铺满父级，必须放在relative（且通常overflow-hidden）定位容器内。 - 含 CSS 滚动动画，已内置
prefers-reduced-motion降级（系统开启「减少动态效果」时停滚动）。
相关
DotPattern · GridPattern · StripedPattern · Spotlight · Ripple · Meteors
Playground
<div className="relative">
<RetroGrid cellSize={60} duration={12} opacity={0.5} />
</div>