# Animated Grid Pattern

A animated background grid pattern made with SVGs, fully customizable using Tailwind CSS.

## Installation

### CLI
```bash
// Installation command here
```

### Manual
```bash
// Manual installation steps here
```

## Usage
```javascript
// Usage example here
```

## Props
### GridPattern

| Prop               | Type    | Default | Description                                     |
| ------------------ | ------- | ------- | ----------------------------------------------- |
| `className`       | `string`| `-`     | Additional classes to be added to the pattern   |
| `width`           | `number`| `40`    | Width of the pattern                             |
| `height`          | `number`| `40`    | Height of the pattern                            |
| `x`               | `number`| `-1`    | X offset of the pattern                         |
| `y`               | `number`| `-1`    | Y offset of the pattern                         |
| `strokeDasharray` | `number`| `0`     | Stroke dash array of the pattern                |
| `numSquares`      | `number`| `200`   | Number of squares in the pattern                |
| `maxOpacity`      | `number`| `0.5`   | Maximum opacity of the pattern                   |
| `duration`        | `number`| `1`     | Duration of the animation                        |
| `repeatDelay`     | `number`| `0.5`   | Repeat delay of the animation                   |

[**Flickering Grid**](/content/docs/components/flickering-grid/index.html) [**Retro Grid**](/content/docs/components/retro-grid/index.html)

## Contribute
- [Report an issue](https://github.com/magicuidesign/magicui/issues/new?title=%5Bbug%5D%3A+%2Fdocs%2Fcomponents%2Fanimated-grid-pattern&labels=bug&labels=documentation&template=bug_report.yml)
- [Request a feature](https://github.com/magicuidesign/magicui/issues/new?title=%5Bfeat%5D%3A+%2Fdocs%2Fcomponents%2Fanimated-grid-pattern&labels=enhancement&template=feature_request.yml)
- [Edit this page](https://github.com/magicuidesign/magicui/edit/main/apps/www/content/docs/components/animated-grid-pattern.mdx)