Mouse Gradient

Create an interactive Mouse Gradient component that responds to cursor movement with the following characteristics:

## Requirements:
- Real-time mouse movement and touch tracking
- Smooth gradient background that follows cursor position
- Multiple gradient layers with different blend modes
- Color diffusion effects based on cursor proximity
- Smooth animations with easing functions
- Interactive color transitions
- Minimalista design with vibrant colors
- Fully responsive and mobile-friendly wi...

'use client'

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

export default function MouseGradient() {
  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.curr...

# Mouse Gradient 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:

```type...