The anatomy of a hero section that actually converts

Every landing page is judged in the first three seconds. The hero either answers what is this, who is it for, why should I care, or it doesn't, and the visitor scrolls past or bounces. The frustrating part is that this question has been solved by hundreds of teams already. The patterns are public. You're allowed to copy.

This is a field guide to the hero variations that ship at Linear, Vercel, Stripe, Arc, Raycast, and Resend, what they're each good for, and how to build one without falling into the usual traps.

The three jobs of a hero

A hero only has to do three things. Most of them try to do six. Picture it like three short questions, side by side, that the visitor reads in a glance.

1. 01Name the category. If a visitor doesn't already know what bucket your product lives in, the headline has to put it there. "The issue tracker for modern software teams" beats "Linear" alone.
2. 02Make one promise. Not three. Pick the single sharpest reason someone should care, and lead with it.
3. 03Offer one next step. A primary CTA, and at most one secondary. The secondary is almost always either see docs, watch demo, or talk to sales, and you should know which.

The four variations worth knowing

1. The centered bold claim

Big type, dim background, one CTA. This is what Linear and Resend reach for, confident, editorial, almost a magazine cover. It works when your value prop is sharp enough to land in one sentence, and your visual identity can carry the weight of negative space.

It does not work when you need to explain a category. If your product is novel enough that nobody knows the words for it yet, a centered headline reads as marketing fluff. Use the split hero instead.

2. The split hero with product shot

Left column: eyebrow, headline, subhead, CTA. Right column: a tightly cropped product screenshot, often with a slight perspective tilt and a colored backdrop glow. Stripe wrote the playbook here. Arc and Raycast updated it.

Reach for this when the UI is the message. The screenshot does the convincing your headline can't. The trap: a real screenshot looks busy at hero size. Crop ruthlessly. Show one feature, not the whole app.

3. The animated demo loop

A short, silent loop of the product doing the thing. Vercel uses this for deployments; Loom uses it for recording. The loop is 4–8 seconds, cuts cleanly, and reads at thumbnail size.

Animated heroes outperform static ones for products whose value is temporal, something that happens, that you'd want to see in motion. They underperform for products whose value is conceptual, a clear sentence usually wins.

4. The bento hero

A short headline at top, then a 3–4 cell grid below that previews the product's pillars. Apple popularized it; every AI app shipped one in 2024. It compresses a feature tour into the hero itself.

Use it when your product has 3–5 distinct pillars and visitors will want to evaluate them in parallel. Avoid when your value collapses to a single sharp claim, the bento dilutes you.

The pieces every hero needs

• Headline: 56–88px on desktop, weight 500–600, tracking -0.02 to -0.035em. Tight tracking is the difference between editorial and webpage.
• Subhead: 16–20px, max ~60ch, muted color (not full contrast). The subhead is the second sentence the headline can't fit.
• Primary CTA: solid button, one verb, no marketing copy. "Start free" beats "Begin your journey".
• Secondary CTA: ghost link or outlined button. Optional. If it competes visually with the primary, remove it.
• Texture: a subtle gradient, dot grid, or noise. Negative space without texture looks unfinished; texture without restraint looks busy.

The four traps

1. 01Stock illustration of people pointing at laptops. It signals "we hired a template" louder than any copy. If you can't afford original art, use type and texture only.
2. 02Two equal-weight CTAs. If both are solid buttons, neither is primary. The visitor pauses, which means they leave.
3. 03A carousel. Carousels exist because product teams couldn't decide on one message. The decision is the value.
4. 04A video that autoplays with sound. Just don't.

How to ship one this week

Open the hero section entry in the directory, pick the variation that fits your situation, and paste the tuned prompt into Cursor or v0. The prompt encodes the type scale, the spacing, the subtle gradient, and the CTA conventions, so the output reads as product UI, not a demo. You'll spend more time on the headline than on the markup, which is the correct ratio.