Micro-Interactions

Create a smooth, minimalist micro-interactions component with the following characteristics:

## Requirements:
- Subtle feedback animations for micro-interactions
- Multiple interaction types (button feedback, input focus, success states, error states)
- Customizable animation styles (ripple, glow, shake, bounce, feedback)
- Responsive design
- Dark theme with customizable colors
- Works with any interactive element
- Smooth easing animations
- Non-intrusive and enhancing UX

## Component Props:...

'use client'

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

type MicroType = 'ripple' | 'glow' | 'shake' | 'bounce' | 'feedback'
type TriggerType = 'click' | 'hover' | 'focus' | 'submit'

interface MicroInteractionProps {
  children: React.ReactNode
  type?: MicroType
  trigger?: TriggerType
  duration?: number
  color?: string
}

export default function MicroInteraction({
  children,
  type = 'ripple',
  trigger = 'click',
  duration = 300,
  color = 'black',
}: MicroInteractionProps) {
  co...

# Micro-Interactions Component - Documentation

## What is this?
A minimalist micro-interactions component that adds subtle feedback animations to enhance user experience. Perfect for buttons, forms, and creating responsive UI feedback.

## Installation

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

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

3. Wrap your interactive element:

```typescript
<MicroInte...