Animated Grid Pattern Demo

1import { cn } from "@/lib/utils"
2import { AnimatedGridPattern } from "@/registry/magicui/animated-grid-pattern"
3 
4export default function AnimatedGridPatternDemo() {
5  return (
6    <div className="bg-background relative flex h-[500px] w-full items-center justify-center overflow-hidden rounded-lg border p-20">
7      <AnimatedGridPattern
8        numSquares={30}
9        maxOpacity={0.1}
10        duration={3}
11        repeatDelay={1}
12        className={cn(
13          "mask-[radial-gradient(500px_circle_at_center,white,transparent)]",
14          "inset-x-0 inset-y-[-30%] h-[200%] skew-y-12"
15        )}
16      />
17    </div>
18  )
19}