Aurora Flares
Backgrounds
Magnetic Grid
A magnetic grid field that bends around the cursor with a subtle neon glow.
Customize
ADVERT
Overview
Magnetic Grid renders a crisp WebGL lattice that warps around the pointer like a magnetic field. The glow stays controlled, the nodes shimmer gently, and the grid keeps a premium, technical feel without overpowering content. Use it for hero backgrounds, product launches, or data-driven storytelling.
Props
Use the props below to customise the magnetic grid in your own React application.
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| className | string | No | undefined | Optional class name for layout control. |
| 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. |
Related React components
More components from the same category or sharing similar tags.
