Shape Animation

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

## Requirements:
- Animated geometric shapes (circle, square, rectangle, triangle, polygon)
- Multiple animation variations (rotate, scale, morph, bounce, spin)
- Customizable speed, color and size
- Responsive design
- Dark theme with customizable colors
- Works with SVG for crisp rendering
- Smooth easing animations

## Component Props:
- shape: 'circle' | 'square' | 'triangle' | 'star' | 'hexagon' (defa...

'use client'

import React, { useEffect } from 'react'

type Shape = 'circle' | 'square' | 'triangle' | 'star' | 'hexagon'
type AnimationType = 'rotate' | 'scale' | 'morph' | 'bounce' | 'spin'

interface ShapeAnimationProps {
  shape?: Shape
  animation?: AnimationType
  speed?: number
  color?: string
  size?: number
}

export default function ShapeAnimation({
  shape = 'circle',
  animation = 'rotate',
  speed = 2000,
  color = 'black',
  size = 100,
}: ShapeAnimationProps) {
  const animation...

# Shape Animation Component - Documentation

## What is this?
A minimalist animated shapes component with multiple shapes and animation effects. Perfect for loading states, decorative elements, and interactive visualizations.

## Installation

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

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

3. Use it:

```typescript
<ShapeAnimation />
```

## How to Use

### Simple ...