title: Animate Grid
description: Skew Animation grid with box shadow.
---

```vue
<template>
  <div class="flex items-center justify-center p-4">
    <AnimateGrid :cards>
      <template #logo="{ logo }">
        <img
          class="logo mx-auto h-10 w-auto"
          :src="logo"
        />
      </template>
    </AnimateGrid>
  </div>
</template>
<script lang="ts" setup>
import cloudflare from "./cloudflare.svg";

const cards = Array.from({ length: 16 }, () => ({
  logo: cloudflare,
}));
</script>

```

## 通过 CLI 安装

```vue
<InstallationCli component-id="animate-grid" />
```

## 手动安装

::steps{level=4}

复制并粘贴以下代码：

::CodeViewer{filename="AnimateGrid.vue" language="vue" componentName="AnimateGrid" type="ui" id="animate-grid"}
::

#### Add SVG file

Add at least one SVG file to the same folder as your component and update the import in your component to use it

::

## API

| Prop 名称            | 类型     | 默认值              | 描述                                                |
| -------------------- | -------- | ------------------- | --------------------------------------------------- |
| `textGlowStartColor` | `string` | `"#38ef7d80"`       | Color of the box shadow start.                      |
| `textGlowEndColor`   | `string` | `"#38ef7d"`         | Color of the box shadow end.                        |
| `perspective`        | `number` | `600`               | You can pass perspective to transform CSS property. |
| `rotateX`            | `number` | `-1`                | You can pass rotateX to transform CSS property.     |
| `rotateY`            | `number` | `-15`               | You can pass rotateY to transform CSS property.     |
| `cards`              | `[]`     | `"[{logo: 'src'}]"` | Cards to display in grid.                           |
| `class`              | `string` | `""`                | Additional tailwind CSS classes for custom styling. |

## 功能特性

- **Slot-Based Content**: Supports a default slot to add content inside the Animate Grid container.

## 感谢

- Thanks to [SivaReddy Uppathi](https://github.com/sivareddyuppathi) for providing this component.