Interactive Animation

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

## Requirements:
- Animations triggered by user interactions (click, hover, focus)
- Multiple animation variations (pulse, scale, flip, highlight, bounce, shimmer)
- Customizable trigger types and speeds
- Responsive design
- Dark theme with customizable colors
- Works with any content element
- Smooth easing animations
- State management for interaction states

## Component Props:
- trigger: 'hover'...

'use client'

import React, { useState } from 'react'

type TriggerType = 'hover' | 'click' | 'focus'
type AnimationType = 'pulse' | 'scale' | 'flip' | 'highlight' | 'bounce' | 'shimmer'

interface InteractiveAnimationProps {
  children: React.ReactNode
  trigger?: TriggerType
  animation?: AnimationType
  speed?: number
  color?: string
}

export default function InteractiveAnimation({
  children,
  trigger = 'hover',
  animation = 'pulse',
  speed = 600,
  color = 'black',
}: InteractiveAnimat...

# Interactive Animation Component - Documentation

## What is this?
A minimalist interactive animation component that responds to user interactions like hover, click, and focus. Perfect for buttons, cards, and creating engaging user experiences.

## Installation

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

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

3. Wrap your content:

```typescript
<...