Updated 2026-07-05 · 7 min read
We classify the hero of every site we track. Four patterns cover nearly all of them — and choosing the wrong one for your product is a bigger risk than executing any of them imperfectly.
No media at all. A huge statement headline (measured range 60–120px, line-height ~1.05, negative letter-spacing), generous emptiness, one CTA. Fits brands whose product can't be screenshotted — studios, services, manifesto-led companies. Execution risk: timidity. At 48px this pattern dies; commit to scale.
Headline left or centered, and the actual product UI — framed, slightly elevated, often overlapping into the next section. Works because it answers "what is it?" instantly. The screenshot must be art-directed like a photo: real-looking data, your palette, no default-browser chrome.
Full-bleed photography or looping video with text overlaid or beside it. Owns emotion — commerce, food, travel, hardware. The craft is in the overlay: a scrim or gradient zone so text passes contrast, and imagery art-directed to leave calm space for the headline.
A canvas moment reacting to cursor or scroll. The strongest differentiation and the most expensive: performance budgets, fallbacks and reduced-motion variants are mandatory, and everything below the hero should go still so the moment lands. One interactive moment per page.
Browse hero approaches by feel — typographic, photography-led, 3D/WebGL — each breakdown includes the measured headline size, CTA spec and a build prompt.
With strong media or a huge typographic statement, yes (100svh). Without either, a full screen of thin content reads empty — use ~80vh and let the proof strip show above the fold.
Video when motion itself communicates (product in use, atmosphere). It must be muted, autoplaying, seamlessly looping and light (<3MB) with a poster fallback — otherwise a great still wins.
Outcome over mechanism ("Ship sites in minutes", not "AI-powered site builder"), eight words or fewer, no buzzwords. Write ten candidates and keep the shortest one that survives.