Gradient Mesh Hero
A free mesh gradient hero section with a masked headline reveal for Next.js.
- Automated axe check
- Reduced-motion tested
- SSR build verified
- GSAP
- 2 runtime packages
Gradient Mesh Hero is a free mesh gradient hero section for Next.js and React that reveals your headline word by word out of masked lines while four corner-anchored colour fields breathe slowly behind it. It is built with GSAP SplitText and ScrollTrigger, styled with Tailwind, and composes the Gradient Mesh 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 lightest and darkest points of the mesh. With prefers-reduced-motion enabled there is no splitting and no movement, everything renders immediately, and the mesh holds still.
Colour that moves before your product does
Gradient Mesh Hero raises your headline out of masked lines while four corner-anchored colour fields breathe slowly behind it, opening the page with depth instead of a flat block of dark.
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-gradient-meshUsage
import { HeroGradientMesh } from "@/components/hero-gradient-mesh";
export default function Page() {
return (
<HeroGradientMesh
title="Launch pages that move like products"
subtitle="A masked headline reveal over a breathing mesh gradient."
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
Gradient Mesh Hero declares no tokens of its own; the background is themed through the Gradient Mesh component it installs as a registry dependency. Override --mesh-1 to --mesh-4, the four corner anchor colours, from :root or any ancestor of the hero, to retheme the whole section without touching the code:
:root {
--mesh-1: var(--color-accent-400);
--mesh-2: var(--color-brand-400);
--mesh-4: var(--color-brand-600);
}Frequently asked questions
- Is Gradient Mesh Hero free for commercial use?
- Yes. Gradient Mesh Hero is MIT licensed, so you can use it in personal and commercial projects without attribution.
- Does Gradient Mesh 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 mesh itself breathes on GPU-friendly transform keyframes and 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 over a static mesh.
- How do I change the mesh gradient behind the hero?
- Override the CSS custom properties --mesh-1, --mesh-2, --mesh-3 and --mesh-4 from :root or any ancestor element. They belong to the Gradient Mesh background component that Gradient Mesh Hero installs automatically, and each one sets the colour of one corner-anchored field, defaulting to the brand, accent and neutral ramps.