Interactive Particles

Create an interactive Interactive Particles component for hero sections with the following characteristics:

## Requirements:
- Mouse movement and touch tracking with real-time interaction
- Canvas-based particle system that creates animated particles
- Particles respond to user proximity with visual feedback
- Smooth animations with gravity effect
- Interactive zones that expand on hover/touch
- Connection lines between center point and cursor
- Minimalista design with black and white colors
- ...

'use client'

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

export default function InteractiveHero() {
  const canvasRef = useRef<HTMLCanvasElement>(null)
  const containerRef = useRef<HTMLDivElement>(null)
  const mouseRef = useRef({ x: 0, y: 0, isActive: false })
  const particlesRef = useRef<Array<{
    x: number
    y: number
    vx: number
    vy: number
    life: number
  }>>([])
  const animationRef = useRef<number | null>(null)

  useEffect(() => {
    const canvas = canvasRef.cu...

# Interactive Particles Component - Documentation

## What is this?
An interactive particle system component designed for hero sections. It creates animated particles that respond to mouse movement and touch, with smooth fade effects and interactive visual feedback.

## Installation

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

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

3. Use it in a flex container:

...