Lab/24
Magnetic Grid
A grid of short needles, each on its own angular spring, turning to point at the cursor. Color follows the angle within a narrow band around vermilion. At rest they settle into rings.
- Canvas
- Interaction
Move to steer the needles
lab/magnetic-grid26px
0.10
Installation
Add Magnetic Grid to your project with the shadcn CLI. The files land in components/lab, ready to edit.
$ pnpm dlx shadcn@latest add @soultel/lab-magnetic-gridOr by URL: https://asafefe.dev/r/lab-magnetic-grid.json
Brings along
- utils
- @soultel/lab-canvas
Usage
import { MagneticGrid } from "@/components/lab/magnetic-grid"
export function Hero() {
return (
<section className="relative h-[420px]">
<MagneticGrid className="absolute inset-0" />
<h1 className="relative">Hello</h1>
</section>
)
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| spacing | number | 26 | Distance between needles in px. |
| length | number | 0.62 | Needle length as a share of the spacing. |
| stiffness | number | 0.1 | Spring pull toward the cursor. |
| damping | number | 0.8 | Angular velocity kept per frame. |
| falloff | number | 280 | Radius where needles grow and brighten. |
| hueRange | number | 34 | Hue swing either side of the base color, in degrees. |
| color | string | "var(--primary)" | Base color. Its hue sets the range. |
| restColor | string | "var(--foreground)" | Color far from the cursor. |
| lineWidth | number | 1.6 | Needle thickness in px. |