grid-pattern

1"use client";
2 
3import { cn } from "@/lib/utils";
4import { GridPattern } from "@/components/magicui/grid-pattern";
5 
6export function GridPatternDemo() {
7  return (
8    <div className="relative flex h-[500px] w-full flex-col items-center justify-center overflow-hidden rounded-lg border bg-background md:shadow-xl">
9      <p className="z-10 whitespace-pre-wrap text-center text-5xl font-medium tracking-tighter text-black dark:text-white">
10        Grid Pattern
11      </p>
12      <GridPattern
13        squares={[
14          [4, 4],
15          [5, 1],
16          [8, 2],
17          [5, 3],
18          [5, 5],
19          [10, 10],
20          [12, 15],
21          [15, 10],
22          [10, 15],
23          [15, 10],
24          [10, 15],
25          [15, 10],
26        ]}
27        className={cn(
28          "[mask-image:radial-gradient(400px_circle_at_center,white,transparent)]",
29          "inset-x-0 inset-y-[-30%] h-[200%] skew-y-12",
30        )}
31      />
32    </div>
33  );
34}