Line Animation

Create a smooth, minimalist line animation component with the following characteristics:

## Requirements:
- Smooth drawing animation using SVG stroke-dasharray
- Multiple lines that draw sequentially with staggered timing
- Play and Pause button controls
- Speed control slider (0.5x to 2x)
- Duration control (1s to 5s)
- Responsive design
- Dark theme with white strokes
- Smooth easing animations
- Reset button to restart animation
- Display current play state and progress

## Component Props:
...

'use client'

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

interface LineAnimationProps {
  lineCount?: number
  duration?: number
  color?: string
  strokeWidth?: number
  speed?: number
}

export default function LineAnimation({
  lineCount = 5,
  duration = 3,
  color = 'black',
  strokeWidth = 2,
  speed = 1,
}: LineAnimationProps) {
  const [isPlaying, setIsPlaying] = useState(false)
  const [currentDuration, setCurrentDuration] = useState(duration)
  const [currentSpeed, set...

# Line Animation Component - Documentation

## What is this?
A smooth, minimalist animation component that draws multiple lines with staggered timing. Perfect for loading states, transitions, or decorative animations.

## Installation

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

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

3. Use it:

```typescript
<LineAnimation />
```

## How to Use

### Simple - Just add i...