Ripple Effect

Create an interactive Ripple Effect component with the following characteristics:

## Requirements:
- Mouse movement detection with ripple creation
- Expanding circular waves emanating from cursor position
- Multiple concentric ripples with staggered timing
- Smooth fade-out animation as ripples expand
- Canvas-based rendering for performance
- Throttled ripple creation (one every ~100ms)
- Minimalist black and white design
- Interactive and responsive

## Component Features:
- Ripple objects tr...

'use client'

import { useEffect, useRef } from 'react'

interface Ripple {
  id: number
  x: number
  y: number
  createdAt: number
  life: number
}

export default function RippleEffect() {
  const canvasRef = useRef<HTMLCanvasElement>(null)
  const ripplesRef = useRef<Ripple[]>([])
  const nextIdRef = useRef(0)
  const lastRippleTimeRef = useRef(0)

  // Handle mouse movement - create ripples
  const handleMouseMove = (e: React.MouseEvent<HTMLCanvasElement>) => {
    if (!canvasRef.current) r...

# Ripple Effect Component - Documentation

## What is this?
An interactive water-ripple effect triggered by mouse movement. Concentric circles expand and fade from your cursor position, creating a calming, organic interaction pattern.

## Installation

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

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

3. Use it:

```typescript
<RippleEffect />
```

## How to Use

### Simple...