Scroll Animation

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

## Requirements:
- Animations triggered by scroll position
- Multiple animation variations (fadeIn, slideUp, scaleIn, rotateIn, slideInLeft, slideInRight)
- Customizable trigger points and speeds
- Responsive design
- Dark theme with customizable colors
- Works with any content inside
- Smooth easing animations
- Reveal effect as user scrolls

## Component Props:
- animation: 'fadeIn' | 'slideUp' | 'scale...

'use client'

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

type ScrollAnimationType = 'fadeIn' | 'slideUp' | 'scaleIn' | 'rotateIn' | 'slideInLeft' | 'slideInRight'

interface ScrollAnimationProps {
  children: React.ReactNode
  animation?: ScrollAnimationType
  triggerAt?: number
  duration?: number
  color?: string
}

export default function ScrollAnimation({
  children,
  animation = 'fadeIn',
  triggerAt = 0.5,
  duration = 600,
  color = 'black',
}: ScrollAnimationProps) {
  ...

# Scroll Animation Component - Documentation

## What is this?
A smooth, minimalist scroll animation component that reveals elements as the user scrolls down the page. Perfect for landing pages, portfolios, and creating engaging scroll experiences.

## Installation

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

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

3. Wrap your content:

```typescript
<ScrollAnimat...