Introducing Magic UI Pro - 50+ blocks and templates to build beautiful landing pages in minutes.


Docs
Animated Grid Pattern

Animated Grid Pattern

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

Animated Grid Pattern

Installation

npx shadcn@latest add "https://magicui.design/r/animated-grid-pattern"

Props

GridPattern

PropTypeDescriptionDefault
classNamestringAdditional classes to be added to the pattern-
widthnumberWidth of the pattern40
heightnumberHeight of the pattern40
xnumberX offset of the pattern-1
ynumberY offset of the pattern-1
strokeDasharraynumberStroke dash array of the pattern0
numSquaresnumberNumber of squares in the pattern200
maxOpacitynumberMaximum opacity of the pattern0.5
durationnumberDuration of the animation1
repeatDelaynumberRepeat delay of the animation0.5