Dot Matrix Hero
A free animated hero section with a masked reveal over a dot grid.
- Automated axe check
- Reduced-motion tested
- SSR build verified
- GSAP
- 2 runtime packages
Dot Matrix Hero is a free animated hero section for Next.js and React that reveals your headline word by word out of masked lines while a soft glow sweeps across a grid of dots behind it. It is built with GSAP SplitText and ScrollTrigger, styled with Tailwind, and composes the Dot Matrix 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 h1 splits into lines and words that rise into view, the subtitle and CTA row follow a beat later, and a static scrim keeps the text readable over the brightest lit dots. With prefers-reduced-motion enabled there is no splitting and no movement, everything renders immediately, and the background holds still.
Precision sections for launches that cannot slip
Dot Matrix Hero lifts your headline out of masked lines while a soft glow sweeps a quiet grid of dots behind it, giving the opening viewport structure without stealing attention.
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-dot-matrixUsage
import { HeroDotMatrix } from "@/components/hero-dot-matrix";
export default function Page() {
return (
<HeroDotMatrix
title="Launch pages that move like products"
subtitle="A masked headline reveal over a glowing dot grid."
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
Dot Matrix Hero declares no tokens of its own; the background is themed through the Dot Matrix component it installs as a registry dependency. Override --dots-color for the resting dots, --dots-glow for the sweeping highlight and --dots-cell for the grid spacing, from :root or any ancestor of the hero, to retheme the whole section without touching the code:
:root {
--dots-color: var(--border);
--dots-glow: var(--color-accent-400);
--dots-cell: 32px;
}Frequently asked questions
- Is Dot Matrix Hero free for commercial use?
- Yes. Dot Matrix Hero is MIT licensed, so you can use it in personal and commercial projects without attribution.
- Does Dot Matrix Hero affect performance or accessibility?
- The reveal animates transforms and opacity only, the words move inside space the layout has already reserved, so there is no layout shift, and the entrance runs once when the section enters the viewport. The background sweep is a single CSS transform that pauses while offscreen. The headline stays a single accessible string for screen readers, both calls to action are real anchors with visible focus rings, and with reduced motion enabled the full content renders immediately with a static background.
- How do I change the dot grid behind the hero?
- Override the CSS custom properties --dots-color, --dots-cell and --dots-glow from :root or any ancestor element. They belong to the Dot Matrix background component that Dot Matrix Hero installs automatically: --dots-color sets the resting dots, --dots-glow colours the sweeping highlight and --dots-cell controls the spacing of the grid.