MagnetLines
magnet-lines指针驱动的磁力线网格 · rows×columns 细线段实时朝向鼠标(acos 反三角求角) + token 线色(零依赖·reduced-motion 静止)
用法
基础用法
9×9 线段网格，每条线像指南针一样实时朝向鼠标。
tsx
<MagnetLines containerSize="16rem" lineColor="var(--color-foreground)" />细密网格
调高 rows/columns、收窄线宽，得到更精细的磁力线场。
tsx
<MagnetLines
rows={13}
columns={13}
containerSize="16rem"
lineWidth="0.4rem"
lineHeight="2rem"
lineColor="var(--color-chart-1)"
/>稀疏粗线
更少行列 + 更粗线段，配品牌色做强视觉装饰。
tsx
<MagnetLines
rows={6}
columns={6}
containerSize="16rem"
lineWidth="0.8rem"
lineHeight="3rem"
lineColor="var(--color-primary)"
/>初始角度
baseAngle 决定指针未移动时所有线段的静止角度。
tsx
<MagnetLines
baseAngle={45}
containerSize="16rem"
lineColor="var(--color-chart-2)"
/>何时用
铺一片细线段网格，每根线段实时转向指向鼠标，做磁场/罗盘式的极简交互装饰。它是纯 CSS transform 的轻量方案（无 WebGL），相比 GhostCursor / LaserFlow 这类 WebGL 重背景更轻、更适合做小块图形点缀。容器为正方形，默认占 80vmin。
导入
ts
import { MagnetLines } from "@hulianui/ui"Props
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| rows | number | 9 | 网格行数，rows×columns 即线段总数 |
| columns | number | 9 | 网格列数 |
| containerSize | string | "80vmin" | 容器尺寸（任意 CSS 长度），正方形，线段在其中等分铺开 |
| lineColor | string | var(--color-foreground) | 线段颜色，吃明暗主题；任意 CSS 颜色串均可 |
| lineWidth | string | "1vmin" | 单条线段宽度（任意 CSS 长度） |
| lineHeight | string | "6vmin" | 单条线段高度（任意 CSS 长度） |
| baseAngle | number | -10 | 初始静止角度（度）；指针未动或 reduced-motion 时保持该角 |
| className | string | — | 透传根容器额外 className |
| style | CSSProperties | — | 透传根容器内联样式（与内部计算的 grid 样式合并，后写覆盖） |
禁忌 / 坑
rows × columns即 DOM 线段节点数（默认 81 个），过大网格会拖累渲染，按需控制密度。- reduced-motion 下所有线段固定在
baseAngle，不再跟随鼠标。
相关
BorderBeam · ShineBorder · GlareHover · Lens · AnimatedBeam · OrbitingCircles
Playground
<div className="relative flex h-72 items-center justify-center overflow-hidden rounded-xl"
style={{ background: "oklch(0.14 0.02 255)" }}>
<MagnetLines
rows={9}
columns={9}
baseAngle={-10}
containerSize="16rem"
lineColor="var(--color-foreground)"
/>
</div>