Grid Beams Hero
A free animated hero section over a grid of travelling light beams.
Know where the load is before the customer asks
Northbound pulls telematics, ELD feeds and yard scans into one timeline per shipment, so a where-is-my-load call is answered in nine seconds instead of forty minutes spent ringing three carriers.
Grid Beams Hero is a free animated hero section for Next.js and React that raises your headline, subtitle and calls to action into view over a subtle grid criss-crossed by glowing light beams. It is built with Motion, styled with Tailwind, and composes the Grid Beams background component through a registry dependency.
You pass a title, an optional subtitle and up to two calls to action, and the section handles the rest: the three content blocks rise in sequence once the hero enters the viewport, and a static scrim keeps the text readable over the beam glow. With prefers-reduced-motion enabled everything renders immediately and the background shows a calm static grid with no beams at all.
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/hero-grid-beamsUsage
import { HeroGridBeams } from "@/components/hero-grid-beams";
export default function Page() {
return (
<HeroGridBeams
title="Launch pages that move like products"
subtitle="A staggered content reveal over a grid of travelling light beams."
cta={{ label: "Get started", href: "/signup" }}
secondaryCta={{ label: "Read the docs", href: "/docs" }}
/>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | required | Headline copy, rendered as the section's single h1. |
| subtitle | string | undefined | Supporting copy rendered below the headline. |
| cta | { label: string; href: string } | required | Primary call to action, rendered as a real anchor. |
| secondaryCta | { label: string; href: string } | undefined | Optional secondary call to action, rendered as a real anchor. |
| className | string | undefined | Additional classes merged onto the section root. |
Customisation
Grid Beams Hero declares no tokens of its own; the background is themed through the Grid Beams component it installs as a registry dependency. Override --beams-line for the grid line colour, --beams-glow for the beam colour and --beams-cell for the grid cell size, from :root or any ancestor of the hero, to retheme the whole section without touching the code:
:root {
--beams-glow: var(--color-accent-400);
--beams-cell: 64px;
}Frequently asked questions
- Is Grid Beams Hero free for commercial use?
- Yes. Grid Beams Hero is MIT licensed, so you can use it in personal and commercial projects without attribution.
- Does Grid Beams Hero affect performance or accessibility?
- The entrance animates transforms and opacity only, inside space the layout has already reserved, so there is no layout shift, and it runs once when the section enters the viewport, then leaves nothing running. Focus moving into the hero, or reduced motion switching on, finishes it at once, so a keyboard user never tabs onto an invisible link. The background beams pause while offscreen or in a hidden tab. Both calls to action are real anchors with visible focus rings, the headline is a single accessible h1, and with reduced motion enabled the full content renders immediately over a static grid.
- How do I change the beam colours behind the hero?
- Override the CSS custom properties --beams-glow, --beams-line and --beams-cell from :root or any ancestor element. They belong to the Grid Beams background component that Grid Beams Hero installs automatically.