Magnetic Grid

Create an interactive Magnetic Grid component with the following characteristics:

## Requirements:
- Mouse movement detection with real-time tracking
- Grid of interactive dots (6x6) that respond to cursor proximity
- Smooth physics-based attraction toward the cursor
- Particles return smoothly to their original positions
- Interactive canvas that responds to mouse events
- Minimalist design with black and white colors
- Fully responsive and mobile-friendly with touch support

## Component Feat...

'use client'

import { useState, useEffect, useRef } from 'react'

interface Particle {
  id: number
  baseX: number
  baseY: number
  x: number
  y: number
  vx: number
  vy: number
}

export default function MagneticGrid() {
  const containerRef = useRef<HTMLDivElement>(null)
  const canvasRef = useRef<HTMLCanvasElement>(null)
  const particlesRef = useRef<Particle[]>([])
  const mouseRef = useRef({ x: -9999, y: -9999 })

  // Initialize grid
  useEffect(() => {
    const cols = 6
    const ro...

# Magnetic Grid Component - Documentation

## What is this?
An interactive physics-based component where dots are attracted to your mouse cursor. The grid responds smoothly with realistic movement physics, creating an engaging visual effect.

## Installation

1. Copy the component code to your project: `components/MagneticGrid.tsx`
2. Import it in your page:

```typescript
import MagneticGrid from '@/components/MagneticGrid'
```

3. Use it:

```typescript
<MagneticGrid />
```

## How to Use

###...