Grid Beams
A free animated grid background with glowing traveling beams.
- Automated axe check
- Reduced-motion tested
- SSR build verified
- GSAP
- 2 runtime packages
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 GSAP, 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, an IntersectionObserver pauses the timeline while the layer is offscreen, 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.
Template Empire
A quiet grid, crossed by light
Four glowing beams travel random lines of this grid, edge to edge, while the grid itself never moves. The layer sits behind your content, ignores every click, pauses when it scrolls offscreen, and under reduced motion only the static grid remains.
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">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, so the browser compositor does the work, and the GSAP timeline pauses automatically while the layer is offscreen. 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.