Hero sections beyond the gradient blob

Somewhere around 2020, the internet's hero sections converged. A soft purple-teal gradient, a blob, a sans-serif headline about "empowering teams", two buttons, a screenshot in a browser chrome with rounded corners. You've seen it ten thousand times because it was safe, reproducible and easy to sign off. It is also — and I say this with love for the teams who shipped it — the visual equivalent of hold music.

The hero is the most expensive real estate you own. It earns the LCP (Largest Contentful Paint) budget, it sets the typographic voice for the whole scroll, and it's the only moment where you have the visitor's unearned attention. Spending it on generic softness is a strategic failure disguised as a stylistic one. This is a field guide to the patterns we reach for instead, what each costs in performance, and when each is the right call.

Pattern 1: the typographic statement

Two sentences, set beautifully, no images at all. The typographic hero is the oldest pattern in editorial design and still the bravest one on the web, because it has nowhere to hide. When it works — a 12vw display face with real optical sizing, an italic word doing the emotional labour, a measure short enough to read in one breath — it signals a confidence that no stock illustration can buy.

The traps are legibility and arrogance. Legibility: ultra-large type breaks in surprising places, so set explicit max-width and test your actual headline at 375px before you approve it on a 27-inch monitor. Arrogance: a pure type hero spends all its credibility on the words. "Software with a heartbeat" works because it's specific and arguable. "We build digital experiences" dies on contact. If your positioning statement can't carry the screen alone, don't ask it to.

Cost: essentially free. A variable font file or two, no images, LCP in the hundreds of milliseconds. This is the pattern we recommend when a client wants drama and a sub-second load in the same sprint.

Pattern 2: the generative canvas

A live, procedural animation — WebGL, a 2D canvas, an SVG system — that makes the page feel grown rather than assembled. Done well, it's the closest the web gets to a living logo: the same system, never the same frame. Our own homepage grows a fern from a parametric branch system; nobody screenshots it twice and gets the same plant.

Generative heroes demand three disciplines. First, the motion budget: decide the maximum complexity before you fall in love with the sketch. A capped particle count, a fixed number of branch iterations, a hard frame budget. Second, the static frame: the first rendered frame must be a complete, considered composition on its own, because that's what prerenderers, OG images and reduced-motion users will see. Third, the off-switch: prefers-reduced-motion means render one beautiful frame and stop. Not a grey box. Not a faded apology. A composed still.

Cost: the highest of any pattern here. Budget 200–400ms of main-thread time, a request-cancellation strategy on scroll-past, and an engineering review that treats the hero like a product feature, not decoration. Worth it for studios, tools and brands whose product is the craft; wasteful for a logistics SaaS whose buyers want the pricing page.

Pattern 3: the product-in-context

Show the thing. Not a dashboard screenshot floating in a gradient void, but the product inside the life it's used in: the roastery bench, the packing bench, the van at 6am. This is the workhorse pattern for product companies and e-commerce, and the difference between mediocre and excellent is curation, not budget. One honest, art-directed photograph of the product in use beats a render farm of perfect mockups.

The technical craft lives in the image pipeline: art-directed crops per breakpoint (a wide shot that works at 1440px crops to mush at 375px — compose for the portrait crop separately), modern formats with real fallbacks, and an explicit fetchpriority on the hero image so the browser stops guessing. We go deep on all of this in our piece on art-directing images for the responsive web, but the hero version is simple: the hero image is the LCP element, treat it like the most important request on the page, because it is.

Cost: one well-optimised image, 80–200KB if you're disciplined. The risk is not performance, it's cliché. Audit your shot list against your competitors' homepages. If the same stock-adjacent scene appears twice, reshoot.

Pattern 4: the editorial opener

Borrowed from print: a kicker, a headline, a standfirst, a thin rule, and the article — sorry, the page — begins. No buttons above the fold at all. This pattern works for journals, annual reports, campaign sites and any brand whose proposition needs an argument rather than an adjective. When we built the digital archive for Postcards from the Museums, the hero was a single scanned postcard, a date, and a sentence. It had to feel like opening a drawer, not launching a product.

The editorial hero's risk is bounce: you're asking for reading before you've earned trust. Mitigations are typographic more than structural — a standfirst that promises a specific payoff, a visible rhythm of subheads below the fold so the scroll feels populated, and anchors that let impatient visitors skip to the content they came for.

Cost: cheap to build, expensive to write. The writing is the design here, and it will be tested by every visitor.

Pattern 5: the working interface

The hero that is itself a tiny product: a playable configurator, an interactive data visual, a live search. The visitor doesn't read about the thing, they touch it in the first viewport. This is the highest-conviction pattern — it says the product is so good we'll demo it before we describe it. Our Lab is built on this belief, and the strongest case study heroes we've shipped — like the pack configurator for Osprey Outdoor — put the interactive artifact inside the first scroll.

Two warnings. Interactive heroes are the worst LCP-invalidation machines in existence: a client-rendered component that mounts late will eat your performance score and your credibility in the same week. Precompute, prerender a meaningful shell, hydrate late. And respect the fold: the working interface must still fit a headline and orientation text for the visitor who doesn't want to play. Never let the toy eat the message.

Cost: engineering-grade. Treat it as a feature with a budget, a test plan and a reduced-motion fallback, or don't ship it.

Choosing the pattern

When we're stuck, we ask four questions in order:

What's being sold? Craft and capability → generative or typographic. A product → product-in-context or working interface. An idea → editorial.
Who's arriving? Cold paid traffic needs a verb and a button. Warm traffic from press or word-of-mouth can be asked to read.
What's the performance budget? Agree it before the moodboard. If the target market is regional Australia on mid-tier Android, the generative WebGL hero is a fantasy; a typographic hero with one stunning image is the brave correct answer.
What can we maintain? Heroes rot. The generative piece bit-rots, the video crew leaves, the brand serif gets retired. Ship the pattern your team can keep alive for two years.

The universal checklist

Whatever pattern you choose, the boring load-bearing rules don't change:

H1 says what you do, for whom. Cleverness rides in the subline.
One primary action, visually unmissable, label written as the user's verb ("See the work"), not yours ("Learn more" is a dead verb — bury it).
Reduced-motion users get a complete, composed experience — the same message, still frame, fast.
The hero is the LCP. Everything about it — image priority, font loading, animation start time — is a performance decision.

A hero earns its keep or it gets cut. The blob didn't fail because it was ugly. It failed because it said nothing about the people behind it.

Key takeaways

The five patterns that beat the gradient blob: typographic statement, generative canvas, product-in-context, editorial opener, working interface. Choose by what's being sold and who's arriving.
Every generative or interactive hero needs a composed static first frame and a real reduced-motion equivalent — not a grey box.
The hero is your LCP element. Font loading, image fetchpriority and animation start-times are design decisions with performance consequences.
Decide the performance budget before the moodboard, or the moodboard will decide it for you.
One primary action, labelled with the visitor's verb. "Learn more" is a dead verb.

Frequently asked questions

Should every website have a hero section? No. Documentation sites, dashboards and high-frequency tools should open on the thing itself — the content, the data, the task. Heroes are a marketing pattern. The mistake is applying them by default to utility surfaces, where the "hero" is the user's job in progress. Save the ceremony for the pages that need persuasion.

How long should a hero headline be? Short enough to read in one breath and specific enough to argue with — in practice, four to nine words for the H1. If you need more, the extra words belong in a subline, not in a longer headline. And write it before you design the layout: the type size should serve the sentence, never the reverse.

Are video heroes ever a good idea? Rarely on marketing sites. They arrive with muted autoplay, compressed mush on mobile, multi-megabyte payloads and movement that competes with your own headline. Where motion footage genuinely sells — hospitality, events, manufacturing — a short, poster-framed, user-initiated clip further down the page converts better and costs less. If video must be a hero, cap it at 2MB, provide a strong poster frame and honour reduced-motion with the poster alone.

How do I know if my hero is working? Watch three numbers: LCP under 2.5 seconds on real devices, scroll depth past the hero (dead heroes stop the scroll), and click-through on the primary action segmented by traffic temperature. Run the CRO basics before redesigning — half the "boring hero" complaints we investigate turn out to be a slow LCP or a buried call to action, not a visual problem at all.