Magnetic Grid — React Interaction

A lattice of iron filings for the cursor: each dot feels the pointer's field, slides and swells as it passes, and settles back when it leaves.

View source

Starting live preview

Usage

import { MagneticGrid } from "@/components/MagneticGrid";

export function Field() {
  return (
    <MagneticGrid columns={16} rows={9} strength={24}
      {...{
        columns: 16,
        rows: 9,
        strength: 24,
        mode: "attract",
        color: "#9fb6c2"
      }}
    >
      <div style={{ padding: 64 }}>Your content floats above the dots.</div>
    </MagneticGrid>
  );
}

Implementation notes & API

Accepts children, columns, rows, dotSize, strength, radius, mode ("attract" | "repel"), color, disabled, className and style. The dots are decorative only — your content sits above them, fully interactive — and reduced motion leaves a calm, static weave. Works without WebGPU.

Property	Type	Notes / default
`children`	`ReactNode`	Your own content; the default is a demonstration
`disabled`	`boolean`	false; motion also respects system preferences
`className / style`	`string / CSSProperties`	Applied to the outer container

View source on GitHubFree for commercial projects · MIT