Grid Beams Hero
A free animated hero section over a grid of travelling light beams.
- Automated axe check
- Reduced-motion tested
- SSR build verified
- GSAP
- 2 runtime packages
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 GSAP and ScrollTrigger, 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.
Build the launch page your product deserves
Grid Beams Hero lifts your headline, supporting copy and calls to action into view over a grid of travelling light beams, so the first screen feels alive without slowing anyone down.
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. The background beams pause while offscreen. 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.