Transition Animation

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

## Requirements:
- Smooth fade, slide, scale transitions
- Multiple transition variations (fade, slideUp, slideDown, scaleIn, etc)
- Customizable duration and easing
- Responsive design
- Dark theme with customizable colors
- Works with page transitions and element animations
- Smooth timing for synchronized animations

## Component Props:
- type: 'fade' | 'slideUp' | 'slideDown' | 'scaleIn' | 'slideL...

'use client'

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

type TransitionType = 'fade' | 'slideUp' | 'slideDown' | 'scaleIn' | 'slideLeft' | 'slideRight'

interface TransitionProps {
  children: React.ReactNode
  type?: TransitionType
  duration?: number
  delay?: number
  color?: string
}

export default function Transition({
  children,
  type = 'fade',
  duration = 500,
  delay = 0,
  color = 'black',
}: TransitionProps) {
  const ref = useRef<HTMLDivElement>(null)

  useEffect(() => {
...

# Transition Animation Component - Documentation

## What is this?
A smooth, minimalist transition animation component that wraps elements with elegant entrance animations. Perfect for page transitions, element reveals, and UI interactions.

## Installation

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

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

3. Wrap your content:

```typescript
<Transition>
  <h1>Hello World</h1>
...