Masked Grid Background

A sophisticated grid-based background component with radial gradient masking that creates elegant fading effects. Perfect for hero sections and attention-grabbing areas where you want the grid to fade naturally from the center point outward or vice versa.

Masked Grid Background

1"use client";
2
3import MaskedGridBackground from "@/components/component-x/masked-grid-background";
4
5export function MaskedGridBackgroundPreview() {
6return (
7  <div className="relative w-full h-full overflow-hidden border flex items-center justify-center">
8    <MaskedGridBackground
9      gridSize={48}
10      gridLineColor="#161616"
11      gridLineOpacity={1}
12      maskPosition="center"
13      maskSize={100}
14      maskOpacity={{ start: 0.8, middle: 0.2, end: 0 }}
15    />
16    <h3 className="text-2xl text-foreground">Masked Grid Background</h3>
17  </div>
18);
19}
20

Installation

Run the following command to add the component:

npx cx add masked-grid-background

Mask Positions

top

center

bottom

1"use client";
2
3import MaskedGridBackground, {
4MaskPosition,
5} from "@/components/component-x/masked-grid-background";
6
7export function MaskedGridBackgroundPositions() {
8const positions: MaskPosition[] = ["top", "center", "bottom"];
9
10return (
11  <div className="w-full h-full overflow-y-auto flex flex-col gap-4">
12    {positions.map((position) => (
13      <div
14        key={position}
15        className="relative flex-none w-full h-full overflow-hidden border flex items-center justify-center"
16      >
17        <MaskedGridBackground
18          gridSize={48}
19          gridLineColor="#161616"
20          gridLineOpacity={0.8}
21          maskPosition={position}
22          maskSize={100}
23          maskOpacity={{ start: 0.8, middle: 0.2, end: 0 }}
24        />
25        <div className="relative z-10 flex flex-col items-center justify-center h-full">
26          <h3 className="text-2xl text-foreground">{position}</h3>
27        </div>
28      </div>
29    ))}
30  </div>
31);
32}
33

Grid Size

Small 24px

Medium 48px

Large 96px

1"use client";
2
3import MaskedGridBackground from "@/components/component-x/masked-grid-background";
4
5export function MaskedGridBackgroundSizes() {
6const sizes = [
7  { label: "Small", value: 24 },
8  { label: "Medium", value: 48 },
9  { label: "Large", value: 96 },
10];
11
12return (
13  <div className="w-full h-full overflow-y-auto flex flex-col gap-4">
14    {sizes.map(({ label, value }) => (
15      <div
16        key={value}
17        className="relative flex-none w-full h-full overflow-hidden border flex items-center justify-center"
18      >
19        <MaskedGridBackground
20          gridSize={value}
21          gridLineColor="#161616"
22          gridLineOpacity={0.8}
23          maskPosition="center"
24          maskSize={100}
25          maskOpacity={{ start: 0.8, middle: 0.2, end: 0 }}
26        />
27        <div className="relative z-10 flex flex-col items-center justify-center h-full">
28          <h3 className="text-2xl text-foreground">
29            {label} <span className="text-muted-foreground">{value}px</span>
30          </h3>
31        </div>
32      </div>
33    ))}
34  </div>
35);
36}
37

Mask Size

Small 50%

Medium 100%

Large 150%

1"use client";
2
3import MaskedGridBackground from "@/components/component-x/masked-grid-background";
4
5export function MaskedGridBackgroundMaskSizes() {
6const maskSizes = [
7  { label: "Small", value: 50 },
8  { label: "Medium", value: 100 },
9  { label: "Large", value: 150 },
10];
11
12return (
13  <div className="w-full h-full overflow-y-auto flex flex-col gap-4">
14    {maskSizes.map(({ label, value }) => (
15      <div
16        key={value}
17        className="relative flex-none w-full h-full overflow-hidden border flex items-center justify-center"
18      >
19        <MaskedGridBackground
20          gridSize={48}
21          gridLineColor="#161616"
22          gridLineOpacity={0.8}
23          maskPosition="center"
24          maskSize={value}
25          maskOpacity={{ start: 0.8, middle: 0.2, end: 0 }}
26        />
27        <div className="relative z-10 flex flex-col items-center justify-center h-full">
28          <h3 className="text-2xl text-foreground">
29            {label} <span className="text-muted-foreground">{value}%</span>
30          </h3>
31        </div>
32      </div>
33    ))}
34  </div>
35);
36}
37

Mask Opacity Control

Subtle Fade

Medium Fade

Aggressive Fade

1"use client";
2
3import MaskedGridBackground from "@/components/component-x/masked-grid-background";
4
5export function MaskedGridBackgroundMaskOpacity() {
6const opacityConfigs = [
7  {
8    label: "Subtle Fade",
9    opacity: { start: 0.4, middle: 0.2, end: 0 },
10  },
11  {
12    label: "Medium Fade",
13    opacity: { start: 0.8, middle: 0.2, end: 0 },
14  },
15  {
16    label: "Aggressive Fade",
17    opacity: { start: 1, middle: 0, end: 0 },
18  },
19];
20
21return (
22  <div className="w-full h-full overflow-y-auto flex flex-col gap-4">
23    {opacityConfigs.map(({ label, opacity }) => (
24      <div
25        key={label}
26        className="relative flex-none w-full h-full overflow-hidden border flex items-center justify-center"
27      >
28        <MaskedGridBackground
29          gridSize={48}
30          gridLineColor="#161616"
31          gridLineOpacity={1}
32          maskPosition="center"
33          maskSize={100}
34          maskOpacity={opacity}
35        />
36        <div className="relative z-10 flex flex-col items-center justify-center h-full">
37          <h3 className="text-2xl text-foreground">{label}</h3>
38        </div>
39      </div>
40    ))}
41  </div>
42);
43}
44
Lamp BackgroundMenu Toggle