Gradient Mesh Hero
A free mesh gradient hero section with a masked headline reveal for Next.js.
Close the month before the month is over
Tessera reconciles card spend, supplier invoices and reimbursements as they land, so a finance team of four closes the books in three days instead of eleven and stops chasing receipts by email.
Gradient Mesh Hero is a free mesh gradient hero section for Next.js and React that reveals your headline word by word, each word rising out of its own mask, while four corner-anchored colour fields breathe slowly behind it. It is built with Motion, 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 headline is split into words as it renders, the words rise into view when the section scrolls in, 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.
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
- Does Gradient Mesh Hero work with right-to-left languages?
- Yes. The headline takes the direction of the page or the element around it, exactly as plain text does, so for a Hebrew or Arabic title set dir="rtl" on the page or on an ancestor, with lang for the language itself (lang alone does not change the direction). Left-to-right text splits into words; text containing right-to-left characters, or placed in a right-to-left context, enters as one block, laid out by the browser's own bidirectional rules.
- 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, leaving no scroll listener or per-frame script behind once it finishes. 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.