Magnetic Dot Mesh

A premium, modular React component from the React Bytes collection. Built with React and TypeScript.

Installation

npm install @reactbytes/magnetic-dots

Usage

import { MagneticDotMesh } from "@reactbytes/magnetic-dots";

export default function Example() {
  return (
    <MagneticDotMesh />
  );
}

Properties

| Prop | Type | Default | Description | | :--- | :--- | :--- | :--- | | gap | number | 48 | Grid spacing between dots. | | dotRadius | number | 2 | Resting size of each dot. | | repelRadius | number | 140 | Radius of mouse repulsion influence. | | repelForce | number | 14 | Strength of the mouse repulsion push. | | springStiffness | number | 0.055 | Stiffness of the spring pulling dots back to home positions. | | damping | number | 0.82 | Velocity decay factor (friction). | | lineDist | number | 70 | Max distance for connecting dots with mesh lines. | | shockwaveDist | number | 220 | Reach of the shockwave after a click. | | shockwaveForce | number | 22 | Strength of the shockwave push. | | color1 | color | #7c5cff | Primary color for resting dots. | | color2 | color | #2ee6a6 | Secondary color for displaced dots. |

Presets

This component includes the following design presets:

• Default Mesh (default)
• Dense Network (dense)
• Loose Connections (loose)

Credits & Inspiration

Component Source

• ChandruMIT-o - Design & Development

Inspiration

• JP Belley - Designer

For interactive playgrounds, customizable controls, and code copy-pasting, visit the full showcase page at React Bytes - Magnetic Dot Mesh.