Skip to main content

​
Overview

Animate Grid is a component that creates a skew animation effect with box shadows, displaying cards in a grid layout with perspective transformations.

​
Usage

<template>
  <AnimateGrid
    :cards="cards"
    textGlowStartColor="#38ef7d80"
    textGlowEndColor="#38ef7d"
  />
</template>

​
Installation

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

​
API Reference

​
Props

Prop NameTypeDefaultDescription
textGlowStartColorstring"#38ef7d80"Color of the box shadow start.
textGlowEndColorstring"#38ef7d"Color of the box shadow end.
perspectivenumber600You can pass perspective to transform CSS property.
rotateXnumber-1You can pass rotateX to transform CSS property.
rotateYnumber-15You can pass rotateY to transform CSS property.
cards[]"[{logo: 'src'}]"Cards to display in grid.
classstring""Additional tailwind CSS classes for custom styling.

​
Credits

Build docs developers (and LLMs) love

Get started for freeTalk to us