animated-grid-pattern

1import { cn } from "@/lib/utils";
2import { AnimatedGridPattern } from "@/components/magicui/animated-grid-pattern";
3 
4export function AnimatedGridPatternDemo() {
5  return (
6    <div className="relative flex h-[500px] w-full items-center justify-center overflow-hidden rounded-lg border bg-background p-20 md:shadow-xl">
7      <p className="z-10 whitespace-pre-wrap text-center text-5xl font-medium tracking-tighter text-black dark:text-white">
8        Animated Grid Pattern
9      </p>
10      <AnimatedGridPattern
11        numSquares={30}
12        maxOpacity={0.1}
13        duration={3}
14        repeatDelay={1}
15        className={cn(
16          "[mask-image:radial-gradient(500px_circle_at_center,white,transparent)]",
17          "inset-x-0 inset-y-[-30%] h-[200%] skew-y-12",
18        )}
19      />
20    </div>
21  );
22}