ComponentsGridBeamsBackground
GridBeamsBackground
Add moving light beams to a subtle grid background.
On this page
Install component source from the public registry, or use the local workspace package. Follow the setup guide first. The npm package is not published yet.
View registry files- Motion for React
(motion)Animations, transitions, and reduced-motion handling.
Shared foundation: React, clsx for conditional classes, tailwind-merge for resolving utility-class conflicts. Styles use Tailwind CSS and Dethink CSS variables.
Based on this component’s source and registry composition. Libraries used only in showcase examples are excluded.
Import the component into your page or component file.
import { GridBeamsBackground } from "@dethink/components";Try the examples, then open the code to use them in your app. The background fills its container; these previews bound it with a height utility.
Hero composition
The default composition: hero copy and actions render in the content slot above the animated layer, which never intercepts pointer events.
Ship dashboards your team actually trusts
Production-grade components for SaaS, internal tools, and AI-native products — with the wiring already done.
Show sourceexamples/grid-beams-background/basic.tsx
"use client";
import { Badge, Button, GridBeamsBackground } from "@dethink/components";
export function GridBeamsBackgroundBasic() {
return (
<GridBeamsBackground
className="border-border h-[24rem] rounded-lg border"
tone="primary"
>
<div className="flex h-[24rem] flex-col items-center justify-center gap-4 px-6 text-center">
<Badge tone="primary" variant="soft">
Now in beta
</Badge>
<h2 className="text-foreground max-w-xl text-3xl font-semibold tracking-tight">
Ship dashboards your team actually trusts
</h2>
<p className="text-muted-foreground max-w-md text-sm leading-6">
Production-grade components for SaaS, internal tools, and AI-native
products — with the wiring already done.
</p>
<div className="flex gap-3">
<Button>Get started</Button>
<Button variant="outline">View docs</Button>
</div>
</div>
</GridBeamsBackground>
);
}Tones, density, and speed
Every visual axis is a literal token-backed variant. Different seeds reshuffle beam placement deterministically.
Show sourceexamples/grid-beams-background/tones.tsx
"use client";
import { GridBeamsBackground } from "@dethink/components";
export function GridBeamsBackgroundTones() {
return (
<div className="grid gap-4 sm:grid-cols-3">
<GridBeamsBackground
className="border-border h-48 rounded-lg border"
density="dense"
seed={3}
speed="fast"
tone="foreground"
>
<div className="flex h-48 items-end p-4">
<span className="text-muted-foreground text-xs font-medium">
tone="foreground" · dense · fast
</span>
</div>
</GridBeamsBackground>
<GridBeamsBackground
className="border-border h-48 rounded-lg border"
seed={5}
tone="muted"
>
<div className="flex h-48 items-end p-4">
<span className="text-muted-foreground text-xs font-medium">
tone="muted" · normal
</span>
</div>
</GridBeamsBackground>
<GridBeamsBackground
className="border-border h-48 rounded-lg border"
density="sparse"
intensity="bold"
seed={9}
speed="slow"
tone="primary"
>
<div className="flex h-48 items-end p-4">
<span className="text-muted-foreground text-xs font-medium">
tone="primary" · sparse · bold · slow
</span>
</div>
</GridBeamsBackground>
</div>
);
}Static frame
animate={false} — and any user with a reduced-motion preference — gets this composition: no loops mounted, still designed.
Designed at rest
animate={false} renders the same frame reduced-motion users see: the grid plus two frozen beam segments, no loops mounted.
Show sourceexamples/grid-beams-background/static.tsx
"use client";
import { GridBeamsBackground } from "@dethink/components";
export function GridBeamsBackgroundStatic() {
return (
<GridBeamsBackground
animate={false}
className="border-border h-56 rounded-lg border"
tone="primary"
>
<div className="flex h-56 flex-col items-center justify-center gap-2 px-6 text-center">
<h3 className="text-foreground text-xl font-semibold">
Designed at rest
</h3>
<p className="text-muted-foreground max-w-sm text-sm leading-6">
animate={"{false}"} renders the same frame reduced-motion users see:
the grid plus two frozen beam segments, no loops mounted.
</p>
</div>
</GridBeamsBackground>
);
}GridBeamsBackground accepts div props plus the shared background contract: animate, density, intensity, speed, tone, and seed.
| Prop | What it does | Default |
|---|---|---|
animateboolean | Set to false to force the static composition regardless of OS motion preference: the grid plus two frozen beam segments, with no animation loops mounted. | true |
density"sparse" | "normal" | "dense" | Grid cell size (96/56/32px) and beam count (3/5/7). Denser grids suit tighter, more technical compositions. | "normal" |
intensity"faint" | "subtle" | "bold" | Opacity tier for the grid pattern. Keep faint or subtle under body copy; bold is for short hero statements. | "subtle" |
speed"slow" | "normal" | "fast" | Beam traversal duration (9/6/3.5s per sweep). Loops pause automatically while the background is offscreen. | "normal" |
tone"foreground" | "muted" | "primary" | Semantic token driving the grid and beam color via currentColor, so light and dark mode adapt automatically. | "muted" |
seednumber | Drives all pseudo-random beam placement deterministically. The same seed renders the same layout on the server and every client, so markup is SSR-stable; change it to reshuffle the beams. | 1 |
childrenReactNode | Hero content rendered in the content slot above the aria-hidden decorative layer. The layer is pointer-events-none, so children stay fully interactive. | Not set |
getGridBeamsBackgroundMotionConfig / getGridBeamsBackgroundGeometry / *ClassNames helpers(speed, reducedMotion) => config, (seed, density) => beams, ({ className }) => string | Open-code escape hatches: read the resolved loop transition, reuse the seeded beam geometry, or apply the root, layer, and content class recipes to custom elements. | Not set |