The hero decides whether anyone scrolls. AI builders default to the same one — centered headline, subline, two buttons — which is fine, and instantly forgettable. Here are seven hero patterns that generate reliably from a prompt, with the one-sentence spec for each. Paste them into v0, Lovable, Bolt or Cursor and adjust the identity to taste.
1. The Product Stage
Split hero: left column headline + CTA, right column a browser-framed screenshot tilted 3deg with an accent glow behind it, overflowing the viewport edge slightly.
The overflow is the trick — cropping the frame signals the product is bigger than the fold.
2. The Manifesto
Full-width display headline spanning 90% viewport width at clamp(3.5rem,10vw,8rem), two short lines, no image, tiny CTA row beneath. Everything else is whitespace.
Works when the copy is strong. Dies when it is not — this pattern has nowhere to hide.
3. The Live Backdrop
Centered content over a full-bleed animated background — slow CSS gradient mesh drifting at 30s loops, content on a subtle dark scrim, motion pausing under prefers-reduced-motion.
Backgrounds carry atmosphere cheaply; keep them under the content, never competing. (More patterns: animated backgrounds without video files, and the backgrounds collection.)
4. The Bento Teaser
Headline block occupying the top-left two-thirds; three small preview tiles filling the remaining grid cells, each a cropped glimpse of a feature, lifting on hover.
Gives feature-rich products a way to show breadth without a feature list in the hero.
5. The Terminal
Left column headline; right column a mock terminal or code editor panel with syntax-highlighted snippet typing itself out once, then a cursor blink.
The default choice for dev tools, because it is proof rather than claim.
6. The Social Opener
Standard centered hero, but the subline is replaced by a single row: five tiny avatar circles + "Trusted by 2,400 builders" in muted text, sitting above the CTA.
Moving proof above the CTA measurably changes how the click feels — from bet to bandwagon.
7. The Split Statement
Viewport split diagonally: upper-left solid background with headline, lower-right full-bleed imagery or animated texture; the CTA sits on the seam.
The most art-directed of the seven; specify the angle (e.g. 12deg) or generators flatten it.
Using these
Each spec above is a skeleton — it still needs your identity block (palette, type, radius) and a Never-list to stay clean; the anatomy of a full prompt is broken down in this SaaS page walkthrough. Or skip assembly: the sections collection has finished hero prompts in each of these families, and 60 prompts are free to test in your builder first.