Grid Beams

1"use client";
2
3import { GridBeams } from "@/registry/ui";
4
5export function GridBeamsDefaultExample() {
6  return (
7    <div className="relative min-h-[460px] w-full overflow-hidden rounded-xl border border-border bg-background">
8      <GridBeams />
9
10      <div className="relative z-10 flex min-h-[460px] items-center justify-center p-10 text-sm text-muted-foreground">
11        Your content here
12      </div>
13    </div>
14  );
15}

1"use client";
2
3import { GridBeams } from "@/registry/ui";
4
5export function GridBeamsEdgeToEdgeExample() {
6  return (
7    <div className="relative min-h-[460px] w-full overflow-hidden rounded-xl border border-border bg-background">
8      <GridBeams
9        randomStarts={false}
10        beamLength={{ min: 0.5, max: 0.9 }}
11        baseSpeed={0.7}
12      />
13
14      <div className="relative z-10 flex min-h-[460px] flex-col items-center justify-center px-6 text-center">
15        <h2 className="text-2xl font-semibold tracking-tight">
16          Edge-to-Edge Beams
17        </h2>
18        <p className="mt-3 max-w-md text-sm text-muted-foreground">
19          Classic grid beam effect starting from edges with no random starting
20          positions.
21        </p>
22      </div>
23    </div>
24  );
25}

1"use client";
2
3import { GridBeams } from "@/registry/ui";
4
5export function GridBeamsQuickPulsesExample() {
6  return (
7    <div className="relative min-h-[460px] w-full overflow-hidden rounded-xl border border-border bg-background">
8      <GridBeams
9        randomStarts
10        beamLength={{ min: 0.1, max: 0.3 }}
11        baseSpeed={1.5}
12        defaultPattern="pulse"
13        colors={["#60A5FA", "#818CF8", "#A78BFA"]}
14      />
15
16      <div className="relative z-10 flex min-h-[460px] flex-col items-center justify-center px-6 text-center">
17        <h2 className="text-2xl font-semibold tracking-tight">Quick Pulses</h2>
18        <p className="mt-3 max-w-md text-sm text-muted-foreground">
19          Short, quick pulses across the grid with a pulse animation pattern.
20        </p>
21      </div>
22    </div>
23  );
24}

1"use client";
2
3import { GridBeams } from "@/registry/ui";
4
5export function GridBeamsSlowMotionExample() {
6  return (
7    <div className="relative min-h-[460px] w-full overflow-hidden rounded-xl border border-border bg-background">
8      <GridBeams
9        baseSpeed={0.5}
10        beamDelay={{ min: 100, max: 500 }}
11        defaultPattern="pulse"
12        colors={["#60A5FA", "#818CF8", "#A78BFA", "#C084FC"]}
13        gridSize={50}
14      />
15
16      <div className="relative z-10 flex min-h-[460px] flex-col items-center justify-center px-6 text-center">
17        <h2 className="text-2xl font-semibold tracking-tight">
18          Slow Motion Grid
19        </h2>
20        <p className="mt-3 max-w-md text-sm text-muted-foreground">
21          Custom animation with slow-moving beams and wider grid cells.
22        </p>
23      </div>
24    </div>
25  );
26}

1"use client";
2
3import { GridBeams } from "@/registry/ui";
4
5export function GridBeamsMostlyAcceleratingExample() {
6  return (
7    <div className="relative min-h-[460px] w-full overflow-hidden rounded-xl border border-border bg-background">
8      <GridBeams
9        patternDistribution={{
10          steady: 0.2,
11          pulse: 0.2,
12          "accelerate-decelerate": 0.6,
13        }}
14        initialBeams={15}
15        maxBeams={20}
16      />
17
18      <div className="relative z-10 flex min-h-[460px] flex-col items-center justify-center px-6 text-center">
19        <h2 className="text-2xl font-semibold tracking-tight">
20          Mostly Accelerating Beams
21        </h2>
22        <p className="mt-3 max-w-md text-sm text-muted-foreground">
23          More accelerate-decelerate pattern beams with a higher beam count.
24        </p>
25      </div>
26    </div>
27  );
28}