Pixel Background Grid Demo

1import { PixelBackground } from "@/components/unlumen-ui/pixel";
2 
3export const PixelBackgroundGridDemo = () => {
4  return (
5    <div className="absolute m-12 border border-border/80 inset-0 grid grid-cols-3 overflow-hidden divide-x divide-border/80">
6      <PixelBackground
7        pattern="cursor"
8        darkColors="#0d1b4b,#1a3a8f,#2563eb"
9        lightColors="#bfdbfe,#93c5fd,#3b82f6"
10        className="size-full flex flex-col"
11      >
12        <h1 className="text-4xl p-6 pb-1">
13          Pixel <br /> Cursor
14        </h1>
15        <p className="text-sm text-muted-foreground p-6 pt-3">
16          Animation starts from where the mouse enters.
17        </p>
18      </PixelBackground>
19 
20      <PixelBackground
21        pattern="edges"
22        darkColors="#2a2a2a,#3b3b3b,#525252"
23        lightColors="#d4d4d4,#bdbdbd,#a3a3a3"
24        className="size-full flex flex-col"
25      >
26        <h1 className="text-4xl p-6 pb-1">
27          Pixel <br /> Edges
28        </h1>
29        <p className="text-sm text-muted-foreground p-6 pt-3">
30          Pixels appear from all edges inward.
31        </p>
32      </PixelBackground>
33 
34      <PixelBackground
35        pattern="random"
36        darkColors="#606c38,#fefae0,#bc6c25"
37        lightColors="#264653,#2a9d8f,#e9c46a,#f4a261"
38        className="size-full flex flex-col"
39      >
40        <h1 className="text-4xl p-6 pb-1">
41          Pixel <br /> Random
42        </h1>
43        <p className="text-sm text-muted-foreground p-6 pt-3">
44          A Random pattern that combines distance and angle
45        </p>
46      </PixelBackground>
47    </div>
48  );
49};