Magnetic Grid React Component

LIVE PREVIEWInteract with the component

Install dependencies

npm install @react-three/fiber three

CSS Modules

Usage

Matches your current playground settings.

import MagneticGrid from "./MagneticGrid";

export default function Example() {
  return (
    <MagneticGrid
      gridScale={1}
      distortion={0.75}
      glow={0.65}
      nodes={true}
      vignette={true}
      colorA={"#7CF7FF"}
      colorB={"#FF6BDE"}
      bg={"#080A10"}
      minHeight={420}
    />
  );
}

Using Magnetic Grid

Use gridScale to set the grid density and minHeight to reserve the effect's area.

distortion changes the pointer response while glow changes the brightness. Keep both restrained when placing readable content over the grid.

Props

Name	Type	Required	Default	Description
className	string	No	undefined	Additional CSS class names, merged with base component styles.
minHeight	number \| string	No	420	Minimum height for the component container. Accepts a number (pixels) or any valid CSS height string.
gridScale	number	No	1	Overall grid density and scale multiplier.
distortion	number	No	0.75	Strength of the magnetic field distortion (0 to 1).
glow	number	No	0.65	Glow intensity applied to grid lines and nodes (0 to 1).
nodes	boolean	No	true	Whether to show glowing grid intersections.
vignette	boolean	No	true	Whether to apply a soft vignette on the edges.
colorA	string	No	"#7CF7FF"	Primary grid color.
colorB	string	No	"#FF6BDE"	Secondary grid color for the gradient blend.
bg	string	No	"#080A10"	Background color behind the grid.
mouseRef	React.MutableRefObject<{ x: number; y: number }>	No	undefined	Optional pointer ref for external cursor tracking, values in the range [-1, 1].
onClick	(event: React.MouseEvent) => void	No	undefined	Optional click handler for the root element.