Grid Beams
A free animated grid background with glowing traveling beams.
Global payroll
One payroll run, thirty-one currencies
Fund a single balance and Tessera settles every contractor in their own currency, on their own local rail. Finance approves the run once, and nobody spends Thursday chasing a wire that landed late in the wrong bank.
Customise
Code
<BgGridBeams />Grid Beams is a free animated background component for Next.js and React that draws a subtle static grid and sends glowing beams traveling along randomly chosen grid lines, edge to edge. It is built with Motion, styled with Tailwind, and renders as an absolutely positioned fill layer that you drop inside any relative container.
The grid itself is two repeating linear-gradients and never moves; only the beams animate, using transform and opacity alone. Each beam picks a new random line on every pass, the beams pause while the layer is offscreen or the browser tab is hidden, and with prefers-reduced-motion enabled the beams are removed entirely so only the static grid renders. The layer is decorative, aria-hidden and ignores pointer events.
Install
Add the @te registry to your components.json once:
{
"registries": {
"@te": "https://templateempire.io/r/{name}.json"
}
}Then install the component:
npx shadcn@latest add @te/bg-grid-beamsUsage
import { BgGridBeams } from "@/components/bg-grid-beams";
export function Example() {
return (
<section className="relative overflow-hidden">
<BgGridBeams beamCount={4} />
<div className="relative">
<h2 className="text-4xl font-semibold">Your content here</h2>
<p className="text-muted-foreground">Beams cross the grid behind it.</p>
</div>
</section>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| beamCount | number | 4 | Number of concurrent traveling beams. Clamped to 1 to 8. |
| className | string | undefined | Additional classes merged onto the root fill layer. |
Customisation
Grid Beams exposes three component tokens, declared in its registry item: --beams-line for the grid line colour (defaulting to the semantic border token), --beams-glow for the beam glow colour (defaulting to the brand ramp) and --beams-cell for the grid cell size (defaulting to 48px). Override them from :root, or on any ancestor of the component, to retheme without touching the code:
:root {
--beams-line: var(--border);
--beams-glow: var(--color-accent-400);
--beams-cell: 64px;
}Frequently asked questions
- Is Grid Beams free for commercial use?
- Yes. Grid Beams is MIT licensed, so you can use it in personal and commercial projects without attribution.
- Does Grid Beams affect performance or accessibility?
- The beams animate transform and opacity only, as Web Animations the browser runs on the compositor, and they pause while the layer is offscreen or the tab is hidden. The layer is aria-hidden, never receives pointer events or focus, and with reduced motion enabled the beams are removed entirely while the static grid stays fully visible.
- How do I change the grid or beam colours?
- Override the CSS custom properties --beams-line and --beams-glow from :root or any ancestor element. Both default to tokens from the library colour system, and --beams-cell controls the grid cell size in any CSS length unit.