Animate Grid

Skew Animation grid with box shadow.

Install using CLI

npm

pnpm

bun

yarn

npx shadcn-vue@latest add "https://inspira-ui.com/r/animate-grid.json"

AnimateGrid.vue

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

Prop Name	Type	Default	Description
`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.

On This Page