Animated Grid Pattern

PreviewCode

@/demos/AnimatedGridPatternDemo.tsx

import { AnimatedGridPattern } from '@/registry/magicui/animated-grid-pattern'

export function AnimatedGridPatternDemo() {
  return (
    <div class="
      relative flex h-125 w-full items-center justify-center overflow-hidden
      rounded-lg border bg-background p-20
    "
    >
      <AnimatedGridPattern
        numSquares={30}
        maxOpacity={0.1}
        duration={3}
        repeatDelay={1}
        class="
          inset-x-0 inset-y-[-30%] h-[200%] skew-y-12
          mask-[radial-gradient(500px_circle_at_center,white,transparent)]
        "
      />
    </div>
  )
}

Installation

pnpm

pnpm dlx shadcn@latest add @magicui-solid/animated-grid-pattern

bun

bunx shadcn@latest add @magicui-solid/animated-grid-pattern

yarn

yarn dlx shadcn@latest add @magicui-solid/animated-grid-pattern

npm

npx shadcn@latest add @magicui-solid/animated-grid-pattern

Usage

import { AnimatedGridPattern } from '@/components/magicui/animated-grid-pattern'

<AnimatedGridPattern />

Props

GridPattern

Prop	Type	Default	Description
class	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	50	Number of squares in the pattern
maxOpacity	number	0.5	Maximum opacity of the pattern
duration	number	4	Duration of the animation
repeatDelay	number	0.5	Repeat delay of the animation

Original:

magicui.design/docs/components/animated-grid-pattern